我一直在到处寻找有关制作组件的帮助,以帮助管理从React到我已设置的端点的文件上传。
我尝试了许多选项,包括集成filedropjs。我决定反对,因为我无法控制它在DOM中设置的元素new FileDrop('zone', options);
这是我到目前为止所拥有的:
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>
);
}
}
});
如果有人可以指出正确的方向,我会发送一些虚拟的拥抱。我已经对此进行了广泛的研究。我觉得我已经接近了,但还没到那儿。
谢谢!
这个https://www.npmjs.com/package/react-dropzone有一个Dropzone npm软件包。