1

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?

Joseph Adam
  • 1,341
  • 3
  • 21
  • 47

1 Answers1

5

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
    }]
}
Samira
  • 2,361
  • 1
  • 12
  • 21