I'm trying to display a image selected from my computer in my web app. I referred the following question which addresses the question i'm trying to fix.
How to display selected image without sending data to server?
I have my html part like this
<div className="add_grp_image_div margin_bottom">
<img src={img_upload} className="add_grp_image"/>
<input type="file" className="filetype" id="group_image"/>
<span className="small_font to_middle">Add group image</span>
<img id="target"/>
</div>
I want to display the selected image in
<img id="target"/>
How can i do this?
I referred FileReader
docs as well.
Try this
<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>
Add method to class
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
reader.onload = (e) => {
this.setState({image: e.target.result});
};
reader.readAsDataURL(event.target.files[0]);
}
}
or you can use URL.createObjectURL
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
this.setState({
image: URL.createObjectURL(event.target.files[0])
});
}
}
And display image
<img id="target" src={this.state.image}/>