frontend: make uploads cancellable

frontend/src/views/Home.vue

@@ -107,6 +107,7 @@
       <FileUploader
         ref="fileUploader"
         :upload-handler="uploadHandler"
+        :cancel-handler="onCancelUpload"
         @finished="onUploadFinished"
         :tr="$t"
       />
@@ -131,6 +132,7 @@ import ProgressSpinner from 'primevue/progressspinner';
 import { useConfirm } from 'primevue/useconfirm';
 
 import { DirectoryView, TopBar, PathBreadcrumbs, BottomBar, MainLayout, FileUploader } from 'pankow';
+import Icon from 'pankow/components/Icon.vue';
 import { sanitize, sleep } from 'pankow/utils';
 
 import { ISTATES } from '../constants.js';
@@ -160,7 +162,8 @@ export default {
     PathBreadcrumbs,
     PreviewPanel,
     ProgressSpinner,
-    TopBar
+    TopBar,
+    Icon
   },
   data() {
     return {
@@ -188,6 +191,7 @@ export default {
       resourceType: '',
       resourceId: '',
       visible: true,
+      uploadRequest: null,
       newFileDialog: {
         visible: false,
         busy: false,
@@ -233,6 +237,10 @@ export default {
     onUploadMenu(event) {
       this.$refs.uploadMenu.toggle(event);
     },
+    onCancelUpload() {
+      if (!this.uploadRequest) return;
+      this.uploadRequest.abort();
+    },
     // generic dialog focus handler
     onDialogShow(focusElementId) {
       setTimeout(() => document.getElementById(focusElementId).focus(), 0);
@@ -449,7 +457,16 @@ export default {
       this.extractInProgress = false;
     },
     async uploadHandler(targetDir, file, progressHandler) {
-      await this.directoryModel.upload(targetDir, file, progressHandler);
+      this.uploadRequest = this.directoryModel.upload(targetDir, file, progressHandler);
+
+      try {
+        await this.uploadRequest;
+      } catch (e) {
+        console.log('Upload cancelled.');
+      }
+
+      this.uploadRequest = null;
+
       await this.loadCwd();
     },
     async loadCwd() {