Change drop zone, how to upload image?

Question

Using the Replace dropzone, I successfully accessed the image using the onDrop . However, I am trying to upload to Amazon S3 by sending the image to my server, storing it in an S3 bucket and returning the signed URL to the client.

I cannot do this with the information that I have so far, and the documents do not seem to mention this as far as I know.

onDrop launches a function call in my reducex actions with files:

 export function saveImageToS3 (files, user) { file = files[0] // file.name -> filename.png // file -> the entire file object // filepreview -> blob:http:localhost:3000/1ds3-sdfw2-23as2 return { [CALL_API] : { method:'post', path: '/api/image', successType: A.SAVE_IMAGE, body: { name: file.name, file: file, preview: file.preview, username: user } } } } 

However, when I get to my server, I'm not sure how to save this blob image (which is only referenced by the browser).

  server.post('/api/image', (req, res) => { // req.body.preview --> blob:http://localhost:3000/1ds3-sdfw2-23as2 // req.body.file -> {preview:blob:http://localhost:3000/1ds3-sdfw2-23as2}, no other properties for some reason }) 

Answer 1

React Dropzone returns an array of File objects that can be sent to the server with a multi-part request. This can be done differently depending on the library used.

Using the Fetch API , it looks like this:

 var formData = new FormData(); formData.append('file', files[0]); fetch('http://server.com/api/upload', { method: 'POST', body: formData }) 

Using Superagent , you will do something like:

  var req = request.post('/api/upload'); req.attach(file.name, files[0]); req.end(callback);