React dropzone, comment télécharger une image?
en utilisant React dropzone, j'ai réussi à accéder à l'image en utilisant le onDrop rappel. Cependant, j'essaie de télécharger sur Amazon S3 en envoyant l'image sur mon serveur, en sauvegardant dans un seau S3, et en retournant une url signée à l'image au 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 Mes actions redux avec le 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 sur mon serveur, Je ne sais pas comment enregistrer cette image blob (qui est référencée uniquement à 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
})
1 réponses
React Dropzone renvoie un tableau de le Fichier objets pouvant être envoyés à un serveur avec une requête multi-pièces. Dépendent de la bibliothèque que vous utilisez, il peut être fait différemment.
en utilisant Fetch 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
})
en utilisant Superagent vous ferais quelque chose comme:
var req = request.post('/api/upload');
req.attach(file.name, files[0]);
req.end(callback);