React-qiniu NPM

react-qiniu

React Component to upload file to Qiniu

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.

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