Ability to cancel uploading progress via x button

resources/js/components/FilesView/UploadProgress.vue

@@ -13,21 +13,28 @@
                     {{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total, progress: uploadingFileProgress}) }}
                 </span>
             </div>
-            <ProgressBar :progress="uploadingFileProgress" />
+            <div class="progress-wrapper">
+                <ProgressBar :progress="uploadingFileProgress" />
+                <span @click="cancelUpload" :title="$t('uploading.cancel')" class="cancel-icon">
+                    <x-icon size="16" @click="cancelUpload"></x-icon>
+                </span>
+            </div>
         </div>
     </transition>
 </template>
 
 <script>
     import ProgressBar from '@/components/FilesView/ProgressBar'
-    import { RefreshCwIcon } from 'vue-feather-icons'
+    import { RefreshCwIcon, XIcon } from 'vue-feather-icons'
     import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
 
     export default {
         name: 'UploadProgress',
         components: {
             RefreshCwIcon,
             ProgressBar,
+            XIcon,
         },
         computed: {
             ...mapGetters([
@@ -35,6 +42,11 @@
                 'uploadingFilesCount',
                 'isProcessingFile',
             ])
+        },
+        methods: {
+            cancelUpload() {
+                events.$emit('cancel-upload')
+            }
         }
     }
 </script>
@@ -78,6 +90,22 @@
         position: relative;
         z-index: 1;
 
+        .progress-wrapper {
+            display: flex;
+
+            .cancel-icon {
+                cursor: pointer;
+                padding: 0 13px;
+
+                &:hover {
+
+                    line {
+                        stroke: $theme;
+                    }
+                }
+            }
+        }
+
         .progress-title {
             font-weight: 700;
             text-align: center;
@@ -88,6 +116,16 @@
         }
     }
 
+    @media only screen and (max-width: 690px) {
+
+        .upload-progress {
+
+            .progress-wrapper .cancel-icon {
+                padding: 0 9px;
+            }
+        }
+    }
+
     @media (prefers-color-scheme: dark) {
         .progress-bar {
             background: $dark_mode_foreground;

resources/js/i18n/lang/en.json

@@ -720,6 +720,7 @@
 		"href": "Please confirm your payment."
 	},
 	"uploading": {
+		"cancel": "Cancel Uploading",
 		"processing_file": "Processing File...",
 		"progress_single_upload": "Uploading File {progress}%",
 		"progress": "Uploading File {progress}% - {current}/{total}"

resources/js/store/modules/fileFunctions.js

@@ -111,8 +111,13 @@ const actions = {
                 ? '/api/upload/public/' + router.currentRoute.params.token
                 : '/api/upload'
 
+            // Create cancel token for axios cancelation
+            const CancelToken = axios.CancelToken;
+            const source = CancelToken.source();
+
             axios
                 .post(route, form, {
+                    cancelToken: source.token,
                     headers: {
                         'Content-Type': 'application/octet-stream'
                     },
@@ -174,6 +179,15 @@ const actions = {
                     // Reset uploader
                     commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
                 })
+
+            // Cancel the upload request
+            events.$on('cancel-upload', () => {
+                source.cancel();
+
+                // Hide upload progress bar
+                commit('PROCESSING_FILE', false)
+                commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+            })
         })
     },
     restoreItem: ({commit, getters}, item) => {