web-dev-qa-db-fra.com

React dropzone, comment télécharger une image?

En utilisant React dropzone, j'ai réussi à accéder à l'image en utilisant le rappel onDrop. Cependant, j'essaie de télécharger sur Amazon S3 en envoyant l'image à mon serveur, en enregistrant vers un compartiment S3 et en renvoyant une URL signée vers l'image au client.

Je ne peux pas le faire avec les informations dont je dispose jusqu'à présent et les documents ne semblent pas le mentionner à ma connaissance.

onDrop déclenche un appel de fonction dans mes actions redux avec les fichiers:

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
      }
    }
  }
}

Cependant, lorsque j'arrive sur mon serveur, je ne sais pas comment enregistrer cette image blob (qui n'est référencée que par le navigateur.)

 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
})
reactjsamazon-s3react-redux
15
Kim Lee

React Dropzone renvoie un tableau d'objets File qui peuvent être envoyés à un serveur avec une demande en plusieurs parties. Selon la bibliothèque que vous utilisez, cela peut être fait différemment.

En utilisant Fetch API cela ressemble à ceci:

var formData = new FormData();
formData.append('file', files[0]);

fetch('http://server.com/api/upload', {
  method: 'POST',
  body: formData
})

En utilisant Superagent vous feriez quelque chose comme:

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