Adopted changes in v0.3.0 to basic example

lionng429 · Jun 10, 2016 · 8da8046 · 8da8046
1 parent 4379caf
commit 8da8046
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 30 deletions.
diff --git a/examples/basic/client.js b/examples/basic/client.js
@@ -1,6 +1,7 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
 var FileUploader = require('../../lib');
+var _ = require('lodash');
 
 var MyComponent = React.createClass({
     getInitialState: function() {
@@ -30,7 +31,7 @@ var MyComponent = React.createClass({
         //}
     },
 
-    onFileDrop: function(target, files) {
+    onFileDrop: function({ target }, files) {
         let node = ReactDOM.findDOMNode(this.refs.uploadPanel);
         if (target != node) {
             return false;
@@ -51,6 +52,20 @@ var MyComponent = React.createClass({
         this.closePanel();
     },
 
+    onFileProgress: function(file) {
+    var files = this.state.files;
+
+    files.map(function(_file) {
+        if (_file.id === file.id) {
+            _file = file;
+        }
+    });
+
+    this.setState({
+        files: files
+    });
+},
+
     onFileUpdate: function(file) {
         var files = this.state.files;
 
@@ -106,36 +121,39 @@ var MyComponent = React.createClass({
                         }
                     </p>
                 </FileUploader.Receiver>
-                <FileUploader.UploadManager
-                    customClass="upload-list"
-                    files={this.state.files}
-                    uploadUrl="/upload"
-                    onUploadStart={this.onFileUpdate}
-                    onUploadProgress={this.onFileUpdate}
-                    onUploadEnd={this.onFileUpdate} >
+                <div>
                     <p>Upload List</p>
-                    {
-                        this.state.files.map(function(file, index) {
-                            return (
-                                <FileUploader.UploadHandler key={index} file={file} autoStart={true}>
-                                    <dl>
-                                        <dh>{ file.name }</dh>
-                                        <dd>
-                                            <span className="file__id">{ file.id } </span>
-                                            <span className="file__type">{ file.type } </span>
-                                            <span className="file__size">{ file.size / 1000 / 1000 } MB</span>
-                                            <span className="file__progress">{ file.progress }%</span>
-                                            <span className="file__status">
-                                                {_this._getStatusString(file.status)}
-                                            </span>
-                                            <span className="file__error">{ file.error }</span>
-                                        </dd>
-                                    </dl>
-                                </FileUploader.UploadHandler>
-                            )
-                        })
-                    }
-                </FileUploader.UploadManager>
+                    <FileUploader.UploadManager
+                        customClass="upload-list"
+                        files={this.state.files}
+                        uploadUrl="/upload"
+                        onUploadStart={this.onFileUpdate}
+                        onUploadProgress={_.debounce(this.onFileProgress, 150)}
+                        onUploadEnd={this.onFileUpdate}
+                    >
+                        {
+                            this.state.files.map(function(file, index) {
+                                return (
+                                    <FileUploader.UploadHandler key={index} file={file} autoStart={true}>
+                                        <dl>
+                                            <dh>{ file.name }</dh>
+                                            <dd>
+                                                <span className="file__id">{ file.id } </span>
+                                                <span className="file__type">{ file.type } </span>
+                                                <span className="file__size">{ file.size / 1000 / 1000 } MB</span>
+                                                <span className="file__progress">{ file.progress }%</span>
+                                                <span className="file__status">
+                                                    {_this._getStatusString(file.status)}
+                                                </span>
+                                                <span className="file__error">{ file.error }</span>
+                                            </dd>
+                                        </dl>
+                                    </FileUploader.UploadHandler>
+                                )
+                            })
+                        }
+                    </FileUploader.UploadManager>
+                </div>
             </div>
         );
     }

diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -7,6 +7,7 @@
     "connect-multiparty": "^2.0.0",
     "express": "^4.13.3",
     "forever": "^0.15.1",
+    "lodash": "^4.13.1",
     "react": "^0.14.3",
     "react-dom": "^0.14.3"
   },