Webserver: allow canceling file upload

buildsystem/network-sharing-server/public/icons/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>

buildsystem/network-sharing-server/src/components/UploadDialog.vue

@@ -39,8 +39,11 @@
             <td class="align-middle text-end status-cell">
               <ImageButton v-if="(fileUpload.status == 'waiting')" type="file_upload" class="small"
                 v-on:click="this.$upload(fileUpload.file)" />
-              <div v-else-if="(fileUpload.status == 'uploading')" class="spinner-border text-primary" role="status">
-                <span class="visually-hidden">Loading...</span>
+              <div v-else-if="(fileUpload.status == 'uploading')">
+                <div class="spinner-border text-primary align-middle" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                <ImageButton type="cancel" class="small" v-on:click="this.$cancelUploadFile(fileUpload.file)" />
               </div>
               <img v-else-if="(fileUpload.status == 'error')" class="image-button-image" :src="(`./icons/error.svg`)" />
               <img v-else class="image-button-image" :src="(`./icons/success.svg`)" />

buildsystem/network-sharing-server/src/plugins/vlcUtils.js

@@ -8,6 +8,7 @@ export default {
     install: (app) => {
         const appStore = useAppStore()
         const uploadStore = useUploadStore()
+        const controllersForFile = []
         app.config.globalProperties.$readableDuration = (ms) => {
             const seconds = Math.floor((ms / 1000) % 60)
             const minutes = Math.floor((ms / (60 * 1000)) % 60)
@@ -52,6 +53,7 @@ export default {
             });
         }
         app.config.globalProperties.$upload = (file) => {
+            const controller = new AbortController();
             const onUploadProgress = (progressEvent) => {
                 const { loaded, total } = progressEvent;
                 let percent = Math.floor((loaded * 100) / total);
@@ -65,13 +67,26 @@ export default {
                 headers: {
                     'Content-Type': 'multipart/form-data'
                 },
+                signal: controller.signal,
                 onUploadProgress
             }).catch(function () {
                 uploadStore.changeFileStatus(file, 'error')
 
-            }).then(() => {
-                uploadStore.changeFileStatus(file, 'uploaded')
+            }).then((response) => {
+                if (response === undefined) uploadStore.changeFileStatus(file, 'waiting')
+                else
+                    uploadStore.changeFileStatus(file, 'uploaded')
             })
+            controllersForFile.push({
+                file: file,
+                controller: controller
+            })
+        }
+        app.config.globalProperties.$cancelUploadFile = (file) => {
+            let controller = controllersForFile.findLast((element) => element.file == file)
+            const index = controllersForFile.indexOf(controller)
+            controller.controller.abort()
+            controllersForFile.splice(index, 1)
         }
     }
 }