React Component to upload file to Qiniu
Demo will avaiable soon
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 () {
return {
files: [],
token: 'YOUR_UPLOAD_TOKEN'
};
},
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 status
// file.progress => return upload progress of file
// file.uploadPromise => return a Promise to handle uploading status(what you can do when upload failed)
console.log('Received files: ', files);
},
render: function () {
return (
<div>
<Qiniu onDrop={this.onDrop} size={150} token={this.state.token}>
<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