Télécharger un composant de fichier avec ReactJS

J’ai cherché partout de l’aide pour créer un composant permettant de gérer le téléchargement de fichiers depuis React vers un terminal que j’ai configuré.

J’ai essayé de nombreuses options, y compris l’intégration de http://filedropjs.org . J’ai décidé de ne pas le contrôler car je ne contrôle pas les éléments qu’il installe dans le DOM avec le new FileDrop('zone', options);

C’est ce que j’ai jusqu’à présent:

 module.exports = React.createClass({ displayName: "Upload", handleChange: function(e){ formData = this.refs.uploadForm.getDOMNode(); jQuery.ajax({ url: 'http://example.com', type : 'POST', xhr: function(){ var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } return myXhr; }, data: formData, cache: false, contentType: false, processData: false, success: function(data){ alert(data); } }); }, render: function(){ return (   
 ); } }); }, render: function(){ console.log(this.props.content); if(this.props.content != ""){ return (  ); } else { return (   
 ); } } });

Si quelqu’un pouvait juste me diriger dans la bonne direction, j’enverrais des câlins virtuels. J’ai beaucoup travaillé là-dessus. J’ai l’impression d’être proche, mais pas tout à fait là.

Merci!

J’ai travaillé là-dessus aussi longtemps. C’est ce que j’ai imaginé.

Un composant Dropzone , associé à l’utilisation de superagent .

 // based on https://github.com/paramaggarwal/react-dropzone, adds image preview const React = require('react'); const _ = require('lodash'); var Dropzone = React.createClass({ getInitialState: function() { return { isDragActive: false } }, propTypes: { onDrop: React.PropTypes.func.isRequired, size: React.PropTypes.number, style: React.PropTypes.object }, onDragLeave: function(e) { this.setState({ isDragActive: false }); }, onDragOver: function(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; this.setState({ isDragActive: true }); }, onDrop: function(e) { e.preventDefault(); this.setState({ isDragActive: false }); var files; if (e.dataTransfer) { files = e.dataTransfer.files; } else if (e.target) { files = e.target.files; } _.each(files, this._createPreview); }, onClick: function () { this.refs.fileInput.getDOMNode().click(); }, _createPreview: function(file){ var self = this , newFile , reader = new FileReader(); reader.onloadend = function(e){ newFile = {file:file, imageUrl:e.target.result}; if (self.props.onDrop) { self.props.onDrop(newFile); } }; reader.readAsDataURL(file); }, render: function() { var className = 'dropzone'; if (this.state.isDragActive) { className += ' active'; }; var style = { width: this.props.size || 100, height: this.props.size || 100, borderStyle: this.state.isDragActive ? 'solid' : 'dashed' }; return (   {this.props.children} 
 ); } }); module.exports = Dropzone

Utiliser le Dropzone .

   Drag & drop files here or click here to browse for files.

Lorsqu’un fichier est ajouté à la zone de repository, ajoutez-le à votre liste de fichiers à télécharger. Je l’ajoute à mon magasin de stream.

  onAddFile: function(res){ var newFile = { id:uuid(), name:res.file.name, size: res.file.size, altText:'', caption: '', file:res.file, url:res.imageUrl }; this.executeAction(newImageAction, newFile); }

Vous pouvez utiliser l’imageUrl pour afficher un aperçu du fichier.

Pour télécharger les fichiers, obtenez la liste des fichiers et envoyez-les via superagent. J’utilise le stream, alors je reçois la liste des images de ce magasin.

  request = require('superagent-bluebird-promise') Promise = require('bluebird') upload: function(){ var images = this.getStore(ProductsStore).getNewImages(); var csrf = this.getStore(ApplicationStore).token; var url = '/images/upload'; var requests = []; var promise; var self = this; _.each(images, function(img){ if(!img.name || img.name.length == 0) return; promise = request .post(url) .field('name', img.name) .field('altText', img.altText) .field('caption', img.caption) .field('size', img.size) .attach('image', img.file, img.file.name) .set('Accept', 'application/json') .set('x-csrf-token', csrf) .on('progress', function(e) { console.log('Percentage done: ', e.percent); }) .promise() .then(function(res){ var newImg = res.body.result; newImg.id = img.id; self.executeAction(savedNewImageAction, newImg); }) .catch(function(err){ self.executeAction(savedNewImageErrorAction, err.res.body.errors); }); requests.push(promise); }); Promise .all(requests) .then(function(){ console.log('all done'); }) .catch(function(){ console.log('done with errors'); }); }

Cela peut aider

 var FormUpload = React.createClass({ uploadFile: function (e) { var fd = new FormData(); fd.append('file', this.refs.file.getDOMNode().files[0]); $.ajax({ url: 'http://localhost:51218/api/Values/UploadFile', data: fd, processData: false, contentType: false, type: 'POST', success: function(data){ alert(data); } }); e.preventDefault() }, render: function() { return (     
 
 ); } });

emprunté ici Comment envoyer des objects FormData avec des requêtes Ajax dans jQuery?

J’ai été confronté à la tâche d’obtenir un comportement semblable à celui de Facebook ou de Gmail où votre cible disparaît dès que l’utilisateur commence à faire glisser un fichier n’importe où sur la fenêtre. Il n’y avait pas de solution prête à l’emploi que je pourrais trouver. Alors, j’en ai créé un.

Il est destiné à être nu, vous fournissant une base pour personnaliser et personnaliser le vôtre. Il fournit de nombreux hooks pour vous permettre de le faire. Mais il y a aussi une démo qui vous donne un exemple à suivre.

Découvrez-le: https://www.npmjs.com/package/react-file-drop

Démo: http://sarink.github.io/react-file-drop/demo/

Il existe un package npm Dropzone pour cette https://www.npmjs.com/package/react-dropzone