Fix issue: can't get progress when upload file

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

Hide file tree

Showing 3 changed files with 44 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,16 @@ var ReactQiniuDemo = React.createClass({
             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
@@ -39,7 +49,7 @@ var ReactQiniuDemo = React.createClass({
     render: function () {
       return (
           <div>
-            <Qiniu onDrop={this.onDrop} size={150} token={this.state.token}>
+            <Qiniu onDrop={this.onDrop} size={150} token={this.state.token} onUpload={this.onUpload}>
               <div>Try dropping some files here, or click to select files to upload.</div>
             </Qiniu>
           </div>
@@ -53,7 +63,7 @@ React.render(<ReactQiniuDemo />, 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`
+see more in [example/app.js](https://github.com/lenage/react-qiniu/blob/master/example/app.js)
 
 ## Contributing
 

diff --git a/example/app.js b/example/app.js
@@ -7,12 +7,26 @@ const ReactQiniuExample = React.createClass({
     getInitialState () {
         return {
             files: [],
-            token: 'YOUR_QINIU_TOKEN'
+            token: '6qF2ejYiRzXlPoPO3eKwaWE3juLDyX5QgE1PEMJ-:3Ji3PPOaUYfs30-OFz7coPEL2Ws=:eyJzY29wZSI6ImVuYWdlLWNlc2hpIiwiZGVhZGxpbmUiOjE3NTczOTA0NTB9'
         };
     },
 
+    onUpload (files) {
+        let progresses = {};
+        let _this = this;
+        files.map(function (f) {
+            f.onprogress = function(e) {
+                progresses[f.preview] = e.percent;
+                console.log(e.percent);
+                _this.setState({progresses: progresses});
+                };
+        });
+        },
+
     onDrop (files) {
         console.log('Received files: ', files);
+        // This will not work because onDrop called after uploadFiles, so
+        // we need a funtion to set hook before call uploadFiles and attach file to function
         this.setState({
             files: files
         });
@@ -24,10 +38,12 @@ const ReactQiniuExample = React.createClass({
         }
 
         var files = this.state.files;
+        var progresses = this.state.progresses;
         let styles = {
             width: '600px',
             margin: '10px auto'
         }
+
         return (
            <div className='dropped-files' style={styles}>
             <h3>Dropped files: </h3>
@@ -37,12 +53,13 @@ const ReactQiniuExample = React.createClass({
                 // 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 = '';
+                var progress = progresses && progresses[f.preview]
                 if (/image/.test(f.type)) {
                     preview = <img src={f.preview} />;
                 } else if (/audio/.test(f.type)) {
                     preview = <audio src={f.preview} controls preload> </audio>;
                 }
-                return <li key={i}>{preview} {f.name + ' : ' + f.size + ' bytes.'}</li>;
+                return <li key={i}>{preview} {f.name + ' : ' + f.size/1000 + 'KB.'}   {(progress || 0) + '% uploaded'}</li>;
             })}
             </ul>
             </div>
@@ -62,7 +79,12 @@ const ReactQiniuExample = React.createClass({
         var inputStyles = { marginTop: 30, width: 500};
         return (
             <div className="react-qiniu-example">
-              <Dropzone onDrop={this.onDrop} size={300} token={this.state.token} accept="image/*" style={dropZoneStyles}>
+              <Dropzone onDrop={this.onDrop}
+                        onUpload={this.onUpload}
+                        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/index.js b/index.js
@@ -15,6 +15,8 @@ var ReactQiniu = React.createClass({
     propTypes: {
         onDrop: React.PropTypes.func.isRequired,
         token: React.PropTypes.string.isRequired,
+        // called before upload to set callback to files
+        onUpload: React.PropTypes.func,
         size: React.PropTypes.number,
         style: React.PropTypes.object,
         supportClick: React.PropTypes.bool,
@@ -70,6 +72,11 @@ var ReactQiniu = React.createClass({
 
         var maxFiles = (this.props.multiple) ? files.length : 1;
 
+        if (this.props.onUpload) {
+            files = Array.prototype.slice.call(files, 0, maxFiles);
+            this.props.onUpload(files, e);
+        }
+
         for (var i = 0; i < maxFiles; i++) {
             files[i].preview = URL.createObjectURL(files[i]);
             files[i].request = this.upload(files[i]);