import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class FileInput extends React.Component {
constructor(props) {
super(props);
this.state = {
src: "#"
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
console.log("this.fileInput", this.fileInput);
var file = this.fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
const s = e.target.result;
localStorage.setItem("src", s);
};
var src = localStorage.getItem("src");
// console.log("SRC", src);
reader.readAsDataURL(file);
this.setState({ src: src }, () => {
// console.log("STATE", this.state);
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.fileInput = input;
}}
/>
<img src={this.state.src} />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<FileInput />, rootElement);
Last active
March 15, 2021 16:32
-
-
Save meetzaveri/dee7dc3614f1294de1f39403d1559db8 to your computer and use it in GitHub Desktop.
File upload snippet for react
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment