Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhadeepakkumar14/a5943ed000e795017f26c0596e4886bd to your computer and use it in GitHub Desktop.
Save jhadeepakkumar14/a5943ed000e795017f26c0596e4886bd to your computer and use it in GitHub Desktop.
React Image Uploading Component with Image Preview
class ImageUpload extends Component {
constructor(props) {
super(props);
this.state = {
file: '',
imagePreviewUrl: ''
};
this._handleImageChange = this._handleImageChange.bind(this);
this._handleSubmit = this._handleSubmit.bind(this);
}
_handleSubmit(e) {
e.preventDefault();
// TODO: do something with -> this.state.file
}
_handleImageChange(e) {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend = () => {
this.setState({
file: file,
imagePreviewUrl: reader.result
});
}
reader.readAsDataURL(file)
}
render() {
let {imagePreviewUrl} = this.state;
let $imagePreview = null;
if (imagePreviewUrl) {
$imagePreview = (<img src={imagePreviewUrl} />);
}
return (
<div>
<form onSubmit={this._handleSubmit}>
<input type="file" onChange={this._handleImageChange} />
<button type="submit" onClick={this._handleSubmit}>Upload Image</button>
</form>
{$imagePreview}
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment