Réagir dropzone, comment télécharger l'image?

À l'aide de Réagir dropzone, j'ai réussi à accéder à l'image en utilisant la onDrop de rappel. Cependant, je suis en train de télécharger sur Amazon S3, par l'envoi d'image sur mon serveur, l'enregistrement d'un compartiment S3, et en le retournant signé de l'url de l'image vers le client.

Je ne peux pas le faire avec les informations que j'ai jusqu'à présent et les docs ne semblent pas à le mentionner à ma connaissance.

onDrop déclenche un appel de fonction dans mon redux actions 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, quand j'arrive à mon serveur, je ne suis pas sûr de la façon de sauver ce blob de l'image (qui n'est référencé à partir du 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
})
Il semble que vous avez télécharger le blob de l'URL plutôt que les octets de la goutte. Vous auriez besoin de lire le blob à l'aide d'un FileReader/ArrayBuffer pour obtenir les octets - beaucoup d'exemples de code sur la façon de le faire. Mais quand j'ai cherché un peu, j'ai trouvé ceci, peut-être il pourrait vous aider: npmjs.com/package/react-dropzone-s3-uploader
pour quelqu'un d'autre - j'ai également eu à utiliser multer côté serveur puisqu'il n'a pas de registre de plusieurs parties des données de formulaire. j'ai utilisé le ci-dessous des suggestions de nouveaux FormData pour créer l'objet, et ensuite utilisé multer nœud en tant qu'application.post('/api/image, télécharger.unique('fichier'), function (){...}) pour prendre soin d'elle.

OriginalL'auteur Kim Lee | 2016-12-07

  1. 14

    Réagir Dropzone retourne un tableau de Fichier les objets qui peuvent être envoyés à un serveur avec un multi-partie de la demande. Dépendent de la bibliothèque que vous utilisez, il peut être fait différemment.

    À l'aide de Chercher de l'API elle se présente comme suit:

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

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

    À l'aide de Superagent vous ferais quelque chose comme:

     var req = request.post('/api/upload');
 req.attach(file.name, files[0]);
 req.end(callback);
    comment pouvez-vous montrer l'avancement du téléchargement?
    Vous pouvez utiliser react-dropzone-uploader.js.org (divulgation complète: je l'ai écrit). réagir-dropzone n'aide pas avec les uploads de fichier. Si vous voulez télécharger des progrès que vous avez à utiliser XMLHttpRequest API (fetch ne fournit pas de progression de téléchargement), puis rédigez votre propre fichier de prévisualisation. C'est une douleur, mais RDU prend soin de lui pour vous.

    OriginalL'auteur George Borunov