https://github.com/lenage/react-qiniu
A React Component to upload file to Qiniu
https://github.com/lenage/react-qiniu
Last synced: over 1 year ago
JSON representation
A React Component to upload file to Qiniu
- Host: GitHub
- URL: https://github.com/lenage/react-qiniu
- Owner: lenage
- License: mit
- Created: 2015-06-25T09:44:42.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2019-10-29T14:34:24.000Z (over 6 years ago)
- Last Synced: 2024-04-24T02:34:47.417Z (about 2 years ago)
- Language: JavaScript
- Homepage: http://lenage.com/react-qiniu/
- Size: 604 KB
- Stars: 107
- Watchers: 7
- Forks: 52
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-qiniu
React Component to upload file to [Qiniu](http://www.qiniu.com/)
See Demo: http://lenage.com/react-qiniu/
## Usage
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.
```jsx
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 (
Try dropping some files here, or click to select files to upload.
);
}
});
React.render(, document.body);
```
when upload, we will add a `promise` to file object, see [index.js](https://github.com/lenage/react-qiniu/blob/master/index.js#L68),
so, you can deal with this promise to handle upload status. (do something when success/failure)
see more in [example/app.js](https://github.com/lenage/react-qiniu/blob/master/example/app.js)
## Contributing
1. Fork it ( https://github.com/lingochamp/react-qiniu/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
## Thanks
[@paramaggarwal](https://github.com/paramaggarwal/react-dropzone)
[@mingxinstar](https://github.com/mingxinstar)
## License
MIT