Я всюду искал некоторую помощь в создании компонента, который помог бы управлять загрузкой файлов из 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>
);
}
}
});
Если бы кто-то мог просто указать мне правильное направление, я бы отправил несколько виртуальных объятий. Я работал над этим довольно широко. Я чувствую, что я рядом, но не совсем там.
Спасибо!