feat: Exit file upload with added prompt

frontend/src/components/drawer-pro/index.vue

@@ -3,6 +3,7 @@
         v-model="localOpenPage"
         @close="handleClose"
         :destroy-on-close="true"
+        :before-close="beforeClose"
         :size="size"
         :close-on-press-escape="autoClose"
         :close-on-click-modal="autoClose"
@@ -78,10 +79,14 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    confirmBeforeClose: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const slots = useSlots();
-const emit = defineEmits(['update:modelValue', 'close']);
+const emit = defineEmits(['update:modelValue', 'close', 'beforeClose']);
 
 const size = computed(() => {
     switch (props.size) {
@@ -112,10 +117,25 @@ const localOpenPage = computed({
 });
 
 const handleBack = () => {
-    if (props.back) {
-        props.back();
+    if (props.confirmBeforeClose) {
+        const done = () => {
+            if (props.back) {
+                props.back();
+            } else {
+                localOpenPage.value = false;
+                globalStore.isFullScreen = false;
+                emit('close');
+            }
+        };
+        emit('beforeClose', done);
     } else {
-        handleClose();
+        if (props.back) {
+            props.back();
+        } else {
+            localOpenPage.value = false;
+            globalStore.isFullScreen = false;
+            emit('close');
+        }
     }
 };
 
@@ -125,6 +145,10 @@ const handleClose = () => {
     emit('close');
 };
 
+const beforeClose = (done: () => void) => {
+    emit('beforeClose', done);
+};
+
 function toggleFullscreen() {
     globalStore.isFullScreen = !globalStore.isFullScreen;
 }

frontend/src/lang/modules/en.ts

@@ -1500,6 +1500,8 @@ const message = {
         setting: 'Setting',
         showHide: 'Show hidden files',
         noShowHide: 'Don’t show hidden files',
+        cancelUpload: 'Cancel Upload',
+        cancelUploadHelper: 'Whether to cancel the upload, after cancellation the upload list will be cleared.',
     },
     ssh: {
         autoStart: 'Auto start',

frontend/src/lang/modules/ja.ts

@@ -1444,6 +1444,8 @@ const message = {
         setting: '設定',
         showHide: '隠しファイルを表示',
         noShowHide: '隠しファイルを表示しない',
+        cancelUpload: 'アップロードをキャンセル',
+        cancelUploadHelper: 'アップロードをキャンセルするかどうか、キャンセル後、アップロードリストはクリアされます。',
     },
     ssh: {
         autoStart: 'オートスタート',

frontend/src/lang/modules/ko.ts

@@ -1429,6 +1429,8 @@ const message = {
         setting: '설정',
         showHide: '숨김 파일 표시',
         noShowHide: '숨김 파일 숨기기',
+        cancelUpload: '업로드 취소',
+        cancelUploadHelper: '업로드를 취소할지 여부, 취소 후 업로드 목록이 비워집니다.',
     },
     ssh: {
         autoStart: '자동 시작',

frontend/src/lang/modules/ms.ts

@@ -1486,6 +1486,9 @@ const message = {
         setting: 'tetapan',
         showHide: 'Tunjukkan fail tersembunyi',
         noShowHide: 'Jangan tunjukkan fail tersembunyi',
+        cancelUpload: 'Batalkan Muat Naik',
+        cancelUploadHelper:
+            'Adakah hendak membatalkan muat naik, selepas pembatalan senarai muat naik akan dikosongkan.',
     },
     ssh: {
         autoStart: 'Mula automatik',

frontend/src/lang/modules/pt-br.ts

@@ -1474,6 +1474,8 @@ const message = {
         setting: 'configuração',
         showHide: 'Mostrar arquivos ocultos',
         noShowHide: 'Não mostrar arquivos ocultos',
+        cancelUpload: 'Cancelar Upload',
+        cancelUploadHelper: 'Deseja cancelar o upload, após o cancelamento, a lista de upload será limpa.',
     },
     ssh: {
         autoStart: 'Início automático',

frontend/src/lang/modules/ru.ts

@@ -1475,6 +1475,8 @@ const message = {
         setting: 'настройка',
         showHide: 'Показывать скрытые файлы',
         noShowHide: 'Не показывать скрытые файлы',
+        cancelUpload: 'Отменить загрузку',
+        cancelUploadHelper: 'Отменить загрузку или нет, после отмены список загрузок будет очищен.',
     },
     ssh: {
         autoStart: 'Автозапуск',

frontend/src/lang/modules/tr.ts

@@ -1517,6 +1517,8 @@ const message = {
         setting: 'Ayar',
         showHide: 'Gizli dosyaları göster',
         noShowHide: 'Gizli dosyaları gösterme',
+        cancelUpload: 'Yüklemeyi İptal Et',
+        cancelUploadHelper: 'Yüklemeyi iptal etmek ister misiniz, iptal sonrası yükleme listesi temizlenecektir.',
     },
     ssh: {
         autoStart: 'Otomatik başlat',

frontend/src/lang/modules/zh-Hant.ts

@@ -1430,6 +1430,8 @@ const message = {
         setting: '设置',
         showHide: '顯示隱藏檔案',
         noShowHide: '不顯示隱藏檔案',
+        cancelUpload: '取消上傳',
+        cancelUploadHelper: '是否取消上傳，取消後將清空上傳列表',
     },
     ssh: {
         autoStart: '開機自啟',

frontend/src/lang/modules/zh.ts

@@ -1425,6 +1425,8 @@ const message = {
         setting: '设置',
         showHide: '显示隐藏文件',
         noShowHide: '不显示隐藏文件',
+        cancelUpload: '取消上传',
+        cancelUploadHelper: '是否取消上传，取消后将清空上传列表',
     },
     ssh: {
         autoStart: '开机自启',

frontend/src/views/host/file-management/upload/index.vue

@@ -1,5 +1,11 @@
 <template>
-    <DrawerPro v-model="open" :header="$t('commons.button.upload')" @close="handleClose" size="normal">
+    <DrawerPro
+        v-model="open"
+        :header="$t('commons.button.upload')"
+        @before-close="handleClose"
+        size="normal"
+        :confirmBeforeClose="true"
+    >
         <template #content>
             <div class="button-container">
                 <div>
@@ -46,7 +52,7 @@
                 <template #tip>
                     <el-text>{{ uploadHelper }}</el-text>
                     <el-progress
-                        v-if="loading"
+                        v-if="upLoading"
                         text-inside
                         :stroke-width="20"
                         :percentage="uploadPercent"
@@ -84,8 +90,8 @@
 
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit()" :disabled="loading || uploaderFiles.length == 0">
+                <el-button @click="handleClose" :disabled="upLoading">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit()" :disabled="upLoading || uploaderFiles.length == 0">
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -115,10 +121,32 @@ const open = ref(false);
 const path = ref();
 let uploadHelper = ref('');
 const dialogExistFileRef = ref();
+const upLoading = ref(false);
+const abortController = ref<AbortController | null>(null);
 
 const em = defineEmits(['close']);
-const handleClose = () => {
+const handleClose = (done) => {
+    if (upLoading.value) {
+        ElMessageBox.confirm(i18n.global.t('file.cancelUploadHelper'), i18n.global.t('file.cancelUpload'), {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
+        })
+            .then(() => {
+                abortController.value.abort();
+                abortController.value = null;
+                closePage();
+                done();
+            })
+            .catch(() => {});
+    } else {
+        closePage();
+        done();
+    }
+};
+const closePage = () => {
     open.value = false;
+    upLoading.value = false;
     clearFiles();
     em('close', false);
 };
@@ -308,11 +336,17 @@ const uploadFile = async (files: any[]) => {
         clearFiles();
     } else {
         loading.value = true;
+        upLoading.value = true;
+        abortController.value = new AbortController();
         let successCount = 0;
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
             uploadHelper.value = i18n.global.t('file.fileUploadStart', [file.name]);
 
+            if (abortController.value.signal.aborted) {
+                break;
+            }
+
             let isSuccess =
                 file.size <= MAX_SINGLE_FILE_SIZE ? await uploadSingleFile(file) : await uploadLargeFile(file);
 
@@ -325,9 +359,10 @@ const uploadFile = async (files: any[]) => {
         }
 
         loading.value = false;
+        upLoading.value = false;
         uploadHelper.value = '';
 
-        if (successCount === files.length) {
+        if (successCount === files.length && !abortController.value.signal.aborted) {
             clearFiles();
             MsgSuccess(i18n.global.t('file.uploadSuccess'));
         }
@@ -345,6 +380,7 @@ const uploadSingleFile = async (file: { raw: string | Blob }) => {
             uploadPercent.value = Math.round((progressEvent.loaded / progressEvent.total) * 100);
         },
         timeout: 40000,
+        signal: abortController.value?.signal,
     });
     return true;
 };
@@ -354,6 +390,9 @@ const uploadLargeFile = async (file: { size: any; raw: string | Blob; name: stri
     const chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
     let uploadedChunkCount = 0;
     for (let c = 0; c < chunkCount; c++) {
+        if (abortController.value?.signal.aborted) {
+            return false;
+        }
         const start = c * CHUNK_SIZE;
         const end = Math.min(start + CHUNK_SIZE, fileSize);
         const chunk = file.raw.slice(start, end);
@@ -372,9 +411,13 @@ const uploadLargeFile = async (file: { size: any; raw: string | Blob; name: stri
                     );
                 },
                 timeout: TimeoutEnum.T_60S,
+                signal: abortController.value?.signal,
             });
             uploadedChunkCount++;
         } catch (error) {
+            if (abortController.value?.signal.aborted) {
+                return false;
+            }
             return false;
         }
     }