React Component to upload file to Qiniu
See Demo: http://lenage.com/react-qiniu/
Just require('react-qiniu') and specify an onDrop method that accepts an array of dropped files and pass your Qiniu token as prop.
You can also specify a style object to apply to the Drop Zone. Optionally pass in a size property to configure the size of the Drop Zone.
var React = require('react');
var Qiniu = require('react-qiniu');
var ReactQiniuDemo = React.createClass({
getInitialState: function () {
return {
files: [],
token: 'YOUR_UPLOAD_TOKEN',
uploadKey: 'YOUR_CUSTOM_UPLOAD_KEY', // Optional
prefix: 'YOUR_QINIU_KEY_PREFIX' // Optional
};
},
onUpload: function (files) {
// set onprogress function before uploading
files.map(function (f) {
f.onprogress = function(e) {
console.log(e.percent);
};
});
},
onDrop: function (files) {
this.setState({
files: files
});
// files is a FileList(https://developer.mozilla.org/en/docs/Web/API/FileList) Object
// and with each file, we attached two functions to handle upload progress and result
// file.request => return super-agent uploading file request
// file.uploadPromise => return a Promise to handle uploading status(what you can do when upload failed)
// `react-qiniu` using bluebird, check bluebird API https://github.com/petkaantonov/bluebird/blob/master/API.md
// see more example in example/app.js
console.log('Received files: ', files);
},
render: function () {
return (
<div>
<Qiniu onDrop={this.onDrop} size={150} token={this.state.token} uploadKey={this.state.uploadKey} onUpload={this.onUpload}>
<div>Try dropping some files here, or click to select files to upload.</div>
</Qiniu>
</div>
);
}
});
React.render(<ReactQiniuDemo />, document.body);when upload, we will add a promise to file object, see index.js,
so, you can deal with this promise to handle upload status. (do something when success/failure)
see more in example/app.js
- Fork it ( https://github.com/lingochamp/react-qiniu/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
MIT