improve retry method to support resumable upload file (#3993)

frontend/package-lock.json

@@ -118,9 +118,9 @@
       }
     },
     "@seafile/resumablejs": {
-      "version": "1.1.12",
+      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/@seafile/resumablejs/-/resumablejs-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/resumablejs/-/resumablejs-1.1.13.tgz",
-      "integrity": "sha512-IK3POb3mdqFOJwQRerzpamQf5/3LdKFFgxe81M6X/ZQwjusINZKJwTZmqawKU1EnW3ghX7d3HW0nmcIrZayfLw=="
+      "integrity": "sha512-GhLgburkCrankp8H0EWNZoQOdQ9vXvuWsD9uKj0JCNwy3kyDty7/qqpXtj6RHN7fzqF9LRoGpOMVdkS4SecPKQ=="
     },
     "@seafile/seafile-editor": {
       "version": "0.2.57",

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@reach/router": "^1.2.0",
-    "@seafile/resumablejs": "^1.1.12",
+    "@seafile/resumablejs": "^1.1.13",
     "@seafile/seafile-editor": "^0.2.57",
     "MD5": "^1.3.0",
     "autoprefixer": "7.1.6",

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

@@ -203,7 +203,8 @@ class FileUploader extends React.Component {
     let { repoID, path } = this.props;
     seafileAPI.getFileUploadedBytes(repoID, path, resumableFile.fileName).then(res => {
       let uploadedBytes = res.data.uploadedBytes;
-      let offset = Math.floor(uploadedBytes / (1024 * 1024));
+      let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
+      let offset = Math.floor(uploadedBytes / blockSize);
       resumableFile.markChunksCompleted(offset);
       this.resumable.upload();
     }).catch(error => {
@@ -231,7 +232,7 @@ class FileUploader extends React.Component {
       if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
         if (uploadBitrate) {
           let lastSize = (item.size - (item.size * item.progress())) * 8;
-          let time = Math.ceil(lastSize / uploadBitrate);
+          let time = Math.floor(lastSize / uploadBitrate);
           item.remainingTime = time;
         }
       }
@@ -306,7 +307,6 @@ class FileUploader extends React.Component {
         if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.newFileName = relative_path + message.name;
           item.isSaved = true;
-          item.remainingTime = 0;
         }
         return item;
       });
@@ -329,7 +329,6 @@ class FileUploader extends React.Component {
         if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.newFileName = fileName;
           item.isSaved = true;
-          item.remainingTime = 0;
         }
         return item;
       });
@@ -352,7 +351,6 @@ class FileUploader extends React.Component {
       if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
         item.newFileName = message.name;
         item.isSaved = true;
-        item.remainingTime = 0;
       }
       return item;
     });
@@ -393,7 +391,8 @@ class FileUploader extends React.Component {
   }
 
   onError = (message) => {
-
+    // After the error, the user can switch windows
+    Utils.registerGlobalVariable('uploader', 'totalProgress', 100);
   }
 
   onFileRetry = () => {
@@ -545,7 +544,7 @@ class FileUploader extends React.Component {
       let uploadFileList = this.state.uploadFileList.map(item => {
         if (item.uniqueIdentifier === resumableFile.uniqueIdentifier) {
           item.error = null;
-          item.retry();
+          this.retryUploadFile(item);
         }
         return item;
       });
@@ -565,8 +564,8 @@ class FileUploader extends React.Component {
     seafileAPI.getUploadLink(this.props.repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
       this.state.retryFileList.forEach(item => {
-        item.retry();
         item.error = false;
+        this.retryUploadFile(item);
       });
       
       let uploadFileList = this.state.uploadFileList.slice(0);
@@ -581,6 +580,39 @@ class FileUploader extends React.Component {
     });
   }
 
+  retryUploadFile = (resumableFile) => {
+    let { repoID, path } = this.props;
+    let fileName = resumableFile.fileName;
+    let isFile = resumableFile.fileName === resumableFile.relativePath;
+    if (!isFile) {
+      let relative_path = resumableFile.formData.relative_path;
+      let prefix = path === '/' ? (path + relative_path) : (path + '/' + relative_path);
+      fileName = prefix + fileName;
+    }
+    
+    resumableFile.bootstrap();
+    var firedRetry = false;
+    resumableFile.resumableObj.on('chunkingComplete', () => {
+      if(!firedRetry) {
+        console.log(path);
+        seafileAPI.getFileUploadedBytes(repoID, path, fileName).then(res => {
+          let uploadedBytes = res.data.uploadedBytes;
+          let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;
+          let offset = Math.floor(uploadedBytes / blockSize);
+          resumableFile.markChunksCompleted(offset);
+    
+          resumableFile.resumableObj.upload();
+    
+        }).catch(error => {
+          let errMessage = Utils.getErrorMsg(error);
+          toaster.danger(errMessage);
+        });
+      }
+      firedRetry = true;
+    });
+    
+  }
+
   replaceRepetitionFile = () => {
     let { repoID, path } = this.props;
     seafileAPI.getUpdateLink(repoID, path).then(res => {

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

@@ -30,7 +30,7 @@ class UploadListItem extends React.Component {
     if (resumableFile.error) {
       uploadState = UPLOAD_ERROR;
     } else {
-      if (resumableFile.progress() === 1 && !resumableFile.isSaved) {
+      if (resumableFile.remainingTime === 0 && !resumableFile.isSaved) {
         uploadState = UPLOAD_ISSAVING;
       }
   
@@ -82,7 +82,7 @@ class UploadListItem extends React.Component {
           <span className="file-size">{this.formatFileSize(resumableFile.size)}</span>
         </td>
         <td className="upload-progress">
-          {this.state.uploadState === UPLOAD_UPLOADING &&
+          {(this.state.uploadState === UPLOAD_UPLOADING || this.state.uploadState === UPLOAD_ISSAVING) &&
             <Fragment>
               {resumableFile.size >= (100 * 1000 * 1000) &&
                 <Fragment>
@@ -91,8 +91,9 @@ class UploadListItem extends React.Component {
                       <div className="progress">
                         <div className="progress-bar" role="progressbar" style={{width: `${progress}%`}} aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100"></div>
                       </div>
-                      {resumableFile.remainingTime === 0 && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
+                      {(resumableFile.remainingTime === -1) && <div className="progress-text">{gettext('Preparing to upload...')}</div>}
-                      {resumableFile.remainingTime !== 0 && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
+                      {(resumableFile.remainingTime > 0) && <div className="progress-text">{gettext('Remaining')}{' '}{Utils.formatTime(resumableFile.remainingTime)}</div>}
+                      {(resumableFile.remainingTime === 0) && <div className="progress-text">{gettext('Indexing...')}</div>}
                     </div>
                   )}
                   {!resumableFile.isUploading() && (