support onprogress callback to fetch upload progress

lenage · Sep 12, 2015 · 111fa82 · 111fa82
1 parent d5b6c23
commit 111fa82
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 React Component to upload file to [Qiniu](http://www.qiniu.com/)
 
-![img](https://raw.githubusercontent.com/paramaggarwal/react-dropzone/master/screenshot.png)
-
 Demo will avaiable soon
 
 ## Usage
@@ -30,10 +28,11 @@ var ReactQiniuDemo = React.createClass({
             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
+        // 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);
     },
 

diff --git a/example/app.js b/example/app.js
@@ -7,7 +7,7 @@ const ReactQiniuExample = React.createClass({
     getInitialState () {
         return {
             files: [],
-            token: 'YOUR_UPLOAD_TOKEN'
+            token: 'YOUR_QINIU_TOKEN'
         };
     },
 
@@ -24,15 +24,18 @@ const ReactQiniuExample = React.createClass({
         }
 
         var files = this.state.files;
-
+        let styles = {
+            width: '600px',
+            margin: '10px auto'
+        }
         return (
-            <div className='dropped-files'>
+           <div className='dropped-files' style={styles}>
             <h3>Dropped files: </h3>
             <ul>
             {[].map.call(files, function (f, i) {
                 // f is a element of files
-                // f.progress => return upload progress of file
                 // f.uploadPromise => return a Promise to handle uploading status(what you can do when upload failed)
+                // f.request => return super-agent request with uploading file
                 var preview = '';
                 if (/image/.test(f.type)) {
                     preview = <img src={f.preview} />;
@@ -48,10 +51,18 @@ const ReactQiniuExample = React.createClass({
 
     render () {
         var styles = { padding: 30};
+        var dropZoneStyles = {
+            margin: '20px auto',
+            border: '2px dashed #ccc',
+            borderRadius: '5px',
+            width: '300px',
+            height: '200px',
+            color: '#aaa'
+        }
         var inputStyles = { marginTop: 30, width: 500};
         return (
             <div className="react-qiniu-example">
-              <Dropzone onDrop={this.onDrop} size={300} token={this.state.token} accept="image/*">
+              <Dropzone onDrop={this.onDrop} size={300} token={this.state.token} accept="image/*" style={dropZoneStyles}>
                 <div style={styles}> Try dropping some files here, or click files to upload. </div>
               </Dropzone>
             {this.showFiles()}

diff --git a/example/index.html b/example/index.html
@@ -58,6 +58,7 @@
         max-width: 100px;
       }
     </style>
+    <link rel="stylesheet" href="http://cdn.staticfile.org/pure/0.5.0/base-min.css" />
 </head>
 <body>
   <div id="app">

diff --git a/index.js b/index.js
@@ -1,9 +1,15 @@
 /*global URL */
 
+'use strict';
 var React = require('react');
 var Promise = require('bluebird');
 var request = require('superagent-bluebird-promise');
 
+var isFunction = function (fn) {
+ var getType = {};
+ return fn && getType.toString.call(fn) === '[object Function]';
+};
+
 var ReactQiniu = React.createClass({
     // based on https://github.com/paramaggarwal/react-dropzone
     propTypes: {
@@ -66,7 +72,8 @@ var ReactQiniu = React.createClass({
 
         for (var i = 0; i < maxFiles; i++) {
             files[i].preview = URL.createObjectURL(files[i]);
-            files[i].uploadPromise = this.upload(files[i]);
+            files[i].request = this.upload(files[i]);
+            files[i].uploadPromise = files[i].request.promise();
         }
 
         if (this.props.onDrop) {
@@ -89,22 +96,20 @@ var ReactQiniu = React.createClass({
 
     upload: function(file) {
         if (!file || file.size === 0) return null;
-        var url;
         var key = file.preview.split('/').pop() + '.' + file.name.split('.').pop();
         if (this.props.prefix) {
             key = this.props.prefix  + key;
         }
-        var promise = request
+        var r = request
             .post(this.props.uploadUrl)
             .field('key', key)
             .field('token', this.props.token)
             .field('x:filename', file.name)
             .field('x:size', file.size)
             .attach('file', file, file.name)
-            .set('Accept', 'application/json')
-            .on('progress',  function (e) { file.progress = e.percent;})
-            .promise()
-        return promise;
+            .set('Accept', 'application/json');
+        if (isFunction(file.onprogress)) { r.on('progress', file.onprogress); }
+        return r;
     },
 
     render: function() {