Reading & Uploading Files From Users Computer For Uploading (With React-Dropzone)

Question

I'm a bit lost here. I am using react-dropzone and I want to upload a file to s3. I don't need help uploading the file to s3, but I am lost when it comes to reading the file in the browser and passing it over. So far I have:

    const onDrop = useCallback(async acceptedFiles => {

      console.log("GOT FILE")
      console.log(acceptedFiles[0]) <=== I am not sure what to do with this; seems to only contain meta info on the file, but not an actual file I can upload?

      await uploadToS3({blob: acceptedFiles[0] })

    }, [])

When I console log the acceptedFiles[0], I get:

How do I go from this to an uploadable file that I can use to upload to s3?

Answer 1

to take access to the data for this file you need to create an url than refer this url in the html, ex:

setAudioFile(URL.createObjectURL(acceptedFiles[0]);

{...}

<audio>
   <source src={audioFile} type="audio/mp3" />
</audio>

`