jquery - tutorial - Subir componente de archivo con ReactJS

usar jquery con react

Question

He estado buscando ayuda en todas partes para hacer un componente para ayudar a administrar la carga de archivos desde React a un punto final que he configurado.

He probado numerosas opciones, incluida la integración de filedropjs . Decidí no hacerlo porque no tengo control sobre los elementos que configura en el DOM con el new FileDrop(''zone'', options);

Esto es lo que tengo hasta ahora:

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 (
<form ref="uploadForm" className="uploader" encType="multipart/form-data" onChange={this.handleChange}>
<input ref="file" type="file" name="file" className="upload-file"/>
</form>
);
}
});
},
render: function(){
console.log(this.props.content);
if(this.props.content != ""){
return (
<img src={this.props.content} />
);
} else {
return (
<form className="uploader" encType="multipart/form-data" onChange={this.handleChange}>
<input ref="file" type="file" name="file" className="upload-file"/>
</form>
);
}
}
});

Si alguien pudiera señalarme en la dirección correcta, enviaría algunos abrazos virtuales. He estado trabajando en esto bastante extensamente. Siento que estoy cerca, pero no del todo.

¡Gracias!

Answer 1

Esto puede ayudar

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 (
<div>
<form ref="uploadForm" className="uploader" encType="multipart/form-data" >
<input ref="file" type="file" name="file" className="upload-file"/>
<input type="button" ref="button" value="Upload" onClick={this.uploadFile} />
</form>
</div>
);
}
});

prestado desde aquí ¿Cómo enviar objetos FormData con solicitudes Ajax en jQuery?

Answer 2

Hay un paquete npm de Dropzone para este https://www.npmjs.com/package/react-dropzone

Answer 3

Me enfrenté a la tarea de obtener ese comportamiento similar a Facebook o Gmail donde su objetivo de caída se resalta tan pronto como el usuario comienza a arrastrar un archivo a cualquier lugar sobre la ventana. No había una solución de arrastrar y soltar React lista para usar que pudiera encontrar. Entonces, hice uno.

Está destinado a ser básico, proporcionándole una base para personalizar y diseñar como propia. Proporciona muchos ganchos para permitirle hacer esto. Pero también hay una demostración que le da un ejemplo para salir.

Compruébalo: https://www.npmjs.com/package/react-file-drop

Demostración: http://sarink.github.io/react-file-drop/demo/

Answer 4

Trabajé en esto bastante tiempo también. Esto es lo que se me ocurrió.

Un componente Dropzone , junto con el uso 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 (
<div className={className} onClick={this.onClick} onDragLeave={this.onDragLeave} onDragOver={this.onDragOver} onDrop={this.onDrop}>
<input style={{display: ''none'' }} type=''file'' multiple ref=''fileInput'' onChange={this.onDrop} />
{this.props.children}
</div>
);
}
});
module.exports = Dropzone

Usando la Dropzone .

 <Dropzone onDrop={this.onAddFile}>
<p>Drag &amp; drop files here or click here to browse for files.</p>
</Dropzone>

Cuando se agrega un archivo a la zona de colocación, agréguelo a su lista de archivos para cargar. Lo agrego a mi tienda de fundente.

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

Puede usar imageUrl para mostrar una vista previa del archivo.

 <img ref="img" src={this.state.imageUrl} width="120" height="120"/>

Para cargar los archivos, obtenga la lista de archivos y envíelos a través de superagent. Estoy usando Flux, así que obtengo la lista de imágenes de esa tienda.

 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'');
});
}