feat: implement abort upload functionality (#2673)

frontend/src/api/tus.js

@@ -6,6 +6,7 @@ import { fetchURL } from "./utils";
 
 const RETRY_BASE_DELAY = 1000;
 const RETRY_MAX_DELAY = 20000;
+const CURRENT_UPLOAD_LIST = {};
 
 export async function upload(
   filePath,
@@ -34,6 +35,7 @@ export async function upload(
         "X-Auth": store.state.jwt,
       },
       onError: function (error) {
+        delete CURRENT_UPLOAD_LIST[filePath];
         reject("Upload failed: " + error);
       },
       onProgress: function (bytesUploaded) {
@@ -44,10 +46,12 @@ export async function upload(
         }
       },
       onSuccess: function () {
+        delete CURRENT_UPLOAD_LIST[filePath];
         resolve();
       },
     });
     upload.start();
+    CURRENT_UPLOAD_LIST[filePath] = upload;
   });
 }
 
@@ -88,3 +92,21 @@ export async function useTus(content) {
 function isTusSupported() {
   return tus.isSupported === true;
 }
+
+export function abortUpload(filePath) {
+  const upload = CURRENT_UPLOAD_LIST[filePath];
+  if (upload) {
+    upload.abort();
+    delete CURRENT_UPLOAD_LIST[filePath];
+  }
+}
+
+export function abortAllUploads() {
+  for (let filePath in CURRENT_UPLOAD_LIST) {
+    const upload = CURRENT_UPLOAD_LIST[filePath];
+    if (upload) {
+      upload.abort();
+      delete CURRENT_UPLOAD_LIST[filePath];
+    }
+  }
+}

frontend/src/components/prompts/UploadFiles.vue

@@ -7,7 +7,14 @@
     <div class="card floating">
       <div class="card-title">
         <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
-
+        <button
+          class="action"
+          @click="abortAll"
+          aria-label="Abort upload"
+          title="Abort upload"
+        >
+        <i class="material-icons">{{ "cancel" }}</i>
+        </button>
         <button
           class="action"
           @click="toggle"
@@ -42,7 +49,9 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapMutations } from "vuex";
+import { abortAllUploads } from "@/api/tus";
+import buttons from "@/utils/buttons";
 
 export default {
   name: "uploadFiles",
@@ -53,11 +62,21 @@ export default {
   },
   computed: {
     ...mapGetters(["filesInUpload", "filesInUploadCount"]),
+    ...mapMutations(['resetUpload']),
   },
   methods: {
     toggle: function () {
       this.open = !this.open;
     },
+    abortAll() {
+      if (confirm(this.$t('upload.abortUpload'))) {
+        abortAllUploads();
+        buttons.done('upload');
+        this.open = false;
+        this.$store.commit('resetUpload');
+        this.$store.commit("setReload", true);
+      }
+    },
   },
 };
 </script>

frontend/src/i18n/en.json

@@ -45,6 +45,9 @@
     "downloadFolder": "Download Folder",
     "downloadSelected": "Download Selected"
   },
+  "upload": {
+    "abortUpload": "Are you sure you want to abort?"
+  },
   "errors": {
     "forbidden": "You don't have permissions to access this.",
     "internal": "Something really went wrong.",

frontend/src/store/getters.js

@@ -4,7 +4,7 @@ const getters = {
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   selectedCount: (state) => state.selected.length,
   progress: (state) => {
-    if (state.upload.progress.length == 0) {
+    if (state.upload.progress.length === 0) {
       return 0;
     }
 
@@ -14,9 +14,7 @@ const getters = {
     return Math.ceil((sum / totalSize) * 100);
   },
   filesInUploadCount: (state) => {
-    let total =
+    return Object.keys(state.upload.uploads).length + state.upload.queue.length;
-      Object.keys(state.upload.uploads).length + state.upload.queue.length;
-    return total;
   },
   filesInUpload: (state) => {
     let files = [];

frontend/src/store/mutations.js

@@ -97,6 +97,13 @@ const mutations = {
     state.clipboard.key = "";
     state.clipboard.items = [];
   },
+  resetUpload(state) {
+    state.upload.uploads = {};
+    state.upload.queue = [];
+    state.upload.progress = [];
+    state.upload.sizes = [];
+    state.upload.id = 0;
+  },
 };
 
 export default mutations;