improve upload ui (#2780)

frontend/src/components/file-uploader/file-uploader.js

@@ -4,6 +4,7 @@ import Resumablejs from '@seafile/resumablejs';
 import MD5 from 'MD5';
 import { enableResumableFileUpload } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import UploadProgressDialog from './upload-progress-dialog';
 import UploadRemindDialog from '../dialog/upload-remind-dialog';
 import '../../css/file-uploader.css';
@@ -39,9 +40,14 @@ class FileUploader extends React.Component {
       isUploadProgressDialogShow: false,
       isUploadRemindDialogShow: false,
       currentResumableFile: null,
+      uploadBitrate: 0
     };
 
     this.notifiedFolders = [];
+
+    this.timestamp = null;
+    this.loaded = 0;
+    this.bitrateInterval = 500; // Interval in milliseconds to calculate the bitrate
   }
 
   componentDidMount() {
@@ -95,20 +101,20 @@ class FileUploader extends React.Component {
   }
 
   bindEventHandler = () => {
-    this.resumable.on('chunkingComplete', this.onChunkingComplete);
-    this.resumable.on('fileAdded', this.onFileAdded);
-    this.resumable.on('filesAddedComplete', this.filesAddedComplete);
-    this.resumable.on('fileProgress', this.onFileProgress);
-    this.resumable.on('fileSuccess', this.onFileUploadSuccess);
-    this.resumable.on('progress', this.onProgress);
-    this.resumable.on('complete', this.onComplete);
-    this.resumable.on('pause', this.onPause);
-    this.resumable.on('fileRetry', this.onFileRetry);
-    this.resumable.on('fileError', this.onFileError);
-    this.resumable.on('error', this.onError);
-    this.resumable.on('beforeCancel', this.onBeforeCancel);
-    this.resumable.on('cancel', this.onCancel);
-    this.resumable.on('dragstart', this.onDragStart);
+    this.resumable.on('chunkingComplete', this.onChunkingComplete.bind(this));
+    this.resumable.on('fileAdded', this.onFileAdded.bind(this));
+    this.resumable.on('filesAddedComplete', this.filesAddedComplete.bind(this));
+    this.resumable.on('fileProgress', this.onFileProgress.bind(this));
+    this.resumable.on('fileSuccess', this.onFileUploadSuccess.bind(this));
+    this.resumable.on('progress', this.onProgress.bind(this));
+    this.resumable.on('complete', this.onComplete.bind(this));
+    this.resumable.on('pause', this.onPause.bind(this));
+    this.resumable.on('fileRetry', this.onFileRetry.bind(this));
+    this.resumable.on('fileError', this.onFileError.bind(this));
+    this.resumable.on('error', this.onError.bind(this));
+    this.resumable.on('beforeCancel', this.onBeforeCancel.bind(this));
+    this.resumable.on('cancel', this.onCancel.bind(this));
+    this.resumable.on('dragstart', this.onDragStart.bind(this));
   }
 
   onChunkingComplete = (file) => {
@@ -164,11 +170,11 @@ class FileUploader extends React.Component {
         });
       } else {
         this.setUploadFileList(this.resumable.files);
-        resumableFile.upload();
+        this.resumable.upload();
       }
     } else {
       this.setUploadFileList(this.resumable.files);
-      resumableFile.upload();
+      this.resumable.upload();
     }
   }
 
@@ -205,10 +211,38 @@ class FileUploader extends React.Component {
 
     this.setState({uploadFileList: uploadFileList});
   }
+
+  getBitrate = () => {
+    let loaded = 0;
+    let uploadBitrate = 0;
+    let now = new Date().getTime();
+    
+    this.resumable.files.forEach(file => {
+      loaded += file.progress() * file.size;
+    });
+
+    if (this.timestamp) {
+      let timeDiff = (now - this.timestamp);
+      if (timeDiff < this.bitrateInterval) {
+        return this.state.uploadBitrate;
+      }
+      uploadBitrate = (loaded - this.loaded) * (1000 / timeDiff) * 8;
+    }
+
+    this.timestamp = now;
+    this.loaded = loaded;
+
+    uploadBitrate = Utils.formatBitRate(uploadBitrate);
+    return uploadBitrate;
+  }
   
   onProgress = () => {
     let progress = Math.round(this.resumable.progress() * 100);
-    this.setState({totalProgress: progress});
+    let uploadBitrate = this.getBitrate();
+    this.setState({
+      totalProgress: progress,
+      uploadBitrate: uploadBitrate
+    });
   }
 
   onFileUploadSuccess = (resumableFile, message) => {
@@ -370,17 +404,18 @@ class FileUploader extends React.Component {
     });
   }
 
-  onMinimizeUploadDialog = () => {
-    this.setState({isUploadProgressDialogShow: false});
-  }
-
   onCloseUploadDialog = () => {
     this.setState({isUploadProgressDialogShow: false, uploadFileList: []});
   }
 
-  onUploadCancel = (resumableFile) => {
+  onUploadCancel = (uploadingItem) => {
     let uploadFileList = this.state.uploadFileList.filter(item => {
-      return item.uniqueIdentifier !== resumableFile.uniqueIdentifier;
+      if (item.uniqueIdentifier === uploadingItem.uniqueIdentifier) {
+        uploadingItem.resumableFile.cancel();
+        this.resumable.removeFile(uploadingItem.resumableFile.file);
+      } else {
+        return item;
+      }
     });
     let newUploaderFileList = uploadFileList.map(item => {
       let progress = Math.round(item.resumableFile.progress() * 100);
@@ -390,6 +425,19 @@ class FileUploader extends React.Component {
     this.setState({uploadFileList: newUploaderFileList});
   }
 
+  onCancelAllUploading = () => {
+    let uploadFileList = this.state.uploadFileList.filter(item => {
+      let resumableFile = item.resumableFile;
+      if (Math.round(resumableFile.progress() !== 1)) {
+        resumableFile.cancel();
+        this.resumable.removeFile(resumableFile.file);
+      } else {
+        return item;
+      }
+    });
+    this.setState({uploadFileList: uploadFileList});
+  }
+
   onUploaderRetry = () => {
 
   }
@@ -447,9 +495,10 @@ class FileUploader extends React.Component {
             <UploadProgressDialog
               uploadFileList={this.state.uploadFileList}
               totalProgress={this.state.totalProgress}
-              onMinimizeUploadDialog={this.onMinimizeUploadDialog}
               onCloseUploadDialog={this.onCloseUploadDialog}
+              onCancelAllUploading={this.onCancelAllUploading}
               onUploadCancel={this.onUploadCancel}
+              uploadBitrate={this.state.uploadBitrate}
             />
           }
       </Fragment>