Convert file type to data URI - React-Dropzone

Question

I am having problems integrating React-dropzone with FeathersJS Upload

I successfully completed the RESTful download when you sent the POST data for my download endpoint. { uri: data:image/gif;base64,........}

My problem is to select a file in the response-response zone and submit the form, I see the type File... It seems I need to somehow convert this to a data URI.

This should be handled by Dauria ... But I think my problem is in my POST request without having the property Fileset with the correct file format. Should I convert Fileto FormData?

Answer 1

Here is one way to do this from a File object:

Using Image and FileReader allows you to get width, height and base64 data:

onDrop = (acceptedFiles, rejectedFiles) => {
  const file = acceptedFiles.find(f => f)
  const i = new Image()

  i.onload = () => {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      console.log({
        src: file.preview,
        width: i.width,
        height: i.height,
        data: reader.result
      })
    }
  }
  
  i.src = file.preview
}

Run codeHide result