Uploader bug repair (#2802)

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

@@ -43,6 +43,8 @@ class FileUploader extends React.Component {
       uploadBitrate: '0'
     };
 
+    this.uploadInput = React.createRef();
+
     this.notifiedFolders = [];
 
     this.timestamp = null;
@@ -68,7 +70,7 @@ class FileUploader extends React.Component {
       forceChunkSize: true,
     });
 
-    this.resumable.assignBrowse(this.uploadInput, true);
+    this.resumable.assignBrowse(this.uploadInput.current, true);
 
     //Enable or Disable DragAnd Drop
     if (this.props.dragAndDrop === true) {
@@ -79,6 +81,12 @@ class FileUploader extends React.Component {
     this.bindEventHandler();
   }
 
+  componentWillUnmount = () => {
+    if (this.props.dragAndDrop === true) {
+      this.resumable.disableDropOnDocument();
+    }
+  }
+
   bindCallbackHandler = () => {
     let {maxFilesErrorCallback, minFileSizeErrorCallback, maxFileSizeErrorCallback, fileTypeErrorCallback } = this.props;
 
@@ -197,6 +205,7 @@ class FileUploader extends React.Component {
       uniqueIdentifier: resumableFile.uniqueIdentifier,
       resumableFile: resumableFile,
       progress: resumableFile.progress(),
+      isSaved: false,
     };
   }
 
@@ -271,6 +280,7 @@ class FileUploader extends React.Component {
         if (item.resumableFile.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.resumableFile.fileName = message.name;
           item.resumableFile.relativePath = relative_path + message.name;
+          item.isSaved = true;
         }
         return item;
       });
@@ -289,6 +299,14 @@ class FileUploader extends React.Component {
       };
       this.props.onFileUploadSuccess(dirent); // this contance: just one file
 
+      let uploadFileList = this.state.uploadFileList.map(item => {
+        if (item.resumableFile.uniqueIdentifier === resumableFile.uniqueIdentifier) {
+          item.isSaved = true;
+        }
+        return item;
+      });
+      this.setState({uploadFileList: uploadFileList});
+
       return;
     }
 
@@ -306,6 +324,7 @@ class FileUploader extends React.Component {
       if (item.resumableFile.uniqueIdentifier === resumableFile.uniqueIdentifier) {
         item.resumableFile.fileName = message.name;
         item.resumableFile.relativePath = message.name;
+        item.isSaved = true;
       }
       return item;
     });
@@ -379,8 +398,8 @@ class FileUploader extends React.Component {
   }
 
   onFileUpload = () => {
-    this.uploadInput.removeAttribute('webkitdirectory');
-    this.uploadInput.click();
+    this.uploadInput.current.removeAttribute('webkitdirectory');
+    this.uploadInput.current.click();
     let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
@@ -388,8 +407,8 @@ class FileUploader extends React.Component {
   }
 
   onFolderUpload = () => {
-    this.uploadInput.setAttribute('webkitdirectory', 'webkitdirectory');
-    this.uploadInput.click();
+    this.uploadInput.current.setAttribute('webkitdirectory', 'webkitdirectory');
+    this.uploadInput.current.click();
     let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
@@ -398,13 +417,14 @@ class FileUploader extends React.Component {
 
   onDragStart = () => {
     let repoID = this.props.repoID;
-    this.uploadInput.setAttribute('webkitdirectory', 'webkitdirectory');
+    this.uploadInput.current.setAttribute('webkitdirectory', 'webkitdirectory');
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
     });
   }
 
   onCloseUploadDialog = () => {
+    this.resumable.files = [];
     this.setState({isUploadProgressDialogShow: false, uploadFileList: []});
   }
 
@@ -478,7 +498,7 @@ class FileUploader extends React.Component {
       <Fragment>
         <div className="file-uploader-container">
           <div className="file-uploader">
-            <input className="upload-input" type="file" ref={node => this.uploadInput = node} onClick={this.onClick}/>
+            <input className="upload-input" type="file" ref={this.uploadInput} onClick={this.onClick}/>
           </div>
         </div>
           {

frontend/src/components/file-uploader/upload-list-item.js

@@ -45,10 +45,15 @@ class UploadListItem extends React.Component {
           }
         </td>
         <td className="upload-operation">
-          { progress !== 100 ?
-            <a href="#" onClick={this.onUploadCancel}>{gettext(('cancel'))}</a> :
+          {(!item.isSaved && progress !== 100) && (
+            <a href="#" onClick={this.onUploadCancel}>{gettext(('cancel'))}</a>
+          )}
+          {(!item.isSaved && progress === 100) && (
+            <span className="sf-font">{gettext('saving...')}</span>
+          )}
+          {item.isSaved && (
             <span>{gettext('uploaded')}</span>
-          }
+          )}
         </td>
       </tr>
     );

frontend/src/components/file-uploader/upload-progress-dialog.js

@@ -64,9 +64,9 @@ class UploadProgressDialog extends React.Component {
           <table className="table-thead-hidden">
             <thead>
               <tr>
-                <th width="50%">{gettext('name')}</th>
+                <th width="45%">{gettext('name')}</th>
                 <th width="40%">{gettext('progress')}</th>
-                <th width="10%">{gettext('state')}</th>
+                <th width="15%">{gettext('state')}</th>
               </tr>
             </thead>
             <tbody>