I have a react frontend, and I want to view the image on the browser when I upload the image. Below is my uploading function
onDrop = async (files) => {
const FILES = {
"uploaded_image": [{
name: files[0].name, <- Name prints on screen succesfully
image: files[0].file, <- It is just empty
}]
}
this.setState({
...some states
})
..some calls
}
And below is the render
<div>
<Image
src={this.state.files[0].image}
/>
</div>
The image shows if I hardcode the field directly,
image: require(`static_media/car.png`).default
But I would like to show without hardcoding the path of the uploaded file, how can I modify the image field in the onDrop to do that?
you need to use URL.createObjectURL(files[0])
const FILES = {
"uploaded_image": [{
name: files[0].name, <- Name prints on screen succesfully
image: URL.createObjectURL(files[0]), <- It is just empty
}]
}