fix(fe/panel_uploading): add delete button for stopped uploadings and create uploading files asap

src/client/web/src/components/panel_uploadings.tsx

@@ -118,18 +118,30 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         case UploadState.Error:
           rightCell = (
             <div className="item-op">
-              <span className="badge white-font red0-bg">
+              <span className="badge white-font red0-bg margin-r-m">
                 {this.props.msg.pkg.get("state.error")}
               </span>
+              <button
+                onClick={() => this.deleteUpload(uploading.filePath)}
+                className="float-input"
+              >
+                {this.props.msg.pkg.get("browser.delete")}
+              </button>
             </div>
           );
           break;
         case UploadState.Stopped:
           rightCell = (
             <div className="item-op">
-              <span className="badge yellow0-font black-bg">
+              <span className="badge yellow0-font black-bg margin-r-m">
                 {this.props.msg.pkg.get("state.stopped")}
               </span>
+              <button
+                onClick={() => this.deleteUpload(uploading.filePath)}
+                className="float-input"
+              >
+                {this.props.msg.pkg.get("browser.delete")}
+              </button>
             </div>
           );
           break;

src/client/web/src/worker/chunk_uploader.ts

@@ -141,7 +141,7 @@ export class ChunkUploader {
         return {
           filePath,
           uploaded: uploadResp.data.uploaded,
-          state: UploadState.Ready,
+          state: UploadState.Created,
           err: "",
         };
       } else if (isFatalErr(uploadResp)) {
@@ -174,7 +174,7 @@ export class ChunkUploader {
         ? {
             filePath,
             uploaded: uploadStatusResp.data.uploaded,
-            state: UploadState.Ready,
+            state: UploadState.Created,
             err: `retrying, error: ${JSON.stringify(uploadResp.data)}`,
           }
         : {

src/client/web/src/worker/upload_mgr.ts

@@ -41,13 +41,12 @@ export class UploadMgr {
     }
 
     const infos = this.infos.valueSeq().toArray();
+
+    // create files at first to persist uploading info
     for (let i = 0; i < this.infos.size; i++) {
       const info = infos[i];
 
-      if (
-        info.state === UploadState.Ready ||
-        info.state === UploadState.Created
-      ) {
+      if (info.state === UploadState.Ready) {
         this.infos = this.infos.set(info.filePath, {
           ...info,
           state: UploadState.Uploading,
@@ -59,8 +58,32 @@ export class UploadMgr {
           filePath: info.filePath,
           size: info.size,
           uploaded: info.uploaded,
-          created: info.uploaded > 0 || info.state === UploadState.Created,
+          created: false,
         });
+
+        return;
+      }
+    }
+
+    // start uploading if all files are created
+    for (let i = 0; i < this.infos.size; i++) {
+      const info = infos[i];
+
+      if (info.state === UploadState.Created) {
+        this.infos = this.infos.set(info.filePath, {
+          ...info,
+          state: UploadState.Uploading,
+        });
+
+        this.worker.postMessage({
+          kind: syncReqKind,
+          file: info.file,
+          filePath: info.filePath,
+          size: info.size,
+          uploaded: info.uploaded,
+          created: true,
+        });
+
         break;
       }
     }
@@ -201,15 +224,16 @@ export class UploadMgr {
             this.infos = this.infos.delete(infoResp.filePath);
             this.statusCb(this.infos.toMap(), true);
           } else {
+            // this avoids overwriting Stopped/Error state
+            const state =
+              entry.state === UploadState.Stopped ||
+              entry.state === UploadState.Error
+                ? entry.state
+                : infoResp.state;
             this.infos = this.infos.set(infoResp.filePath, {
               ...entry,
               uploaded: infoResp.uploaded,
-              state:
-                // this avoids overwriting Stopped/Error state
-                entry.state === UploadState.Stopped ||
-                entry.state === UploadState.Error
-                  ? UploadState.Stopped
-                  : infoResp.state,
+              state: state,
             });
             this.statusCb(this.infos.toMap(), false);
           }