From a2017b108574ddfd5ccafceb7310be6aae8006a9 Mon Sep 17 00:00:00 2001
From: lan-yonghui <yonghui.lan@fit2cloud.com>
Date: Fri, 15 Aug 2025 14:28:46 +0800
Subject: [PATCH 1/2] feat: Support file management page drag and drop upload

---
 .../src/views/host/file-management/index.vue    | 17 ++++++++++++++++-
 .../views/host/file-management/upload/index.vue |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 55345ce5ebc5..f2505e2e3b13 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div @dragover="handleDragover" @drop="handleDrop" @dragleave="handleDragleave">
         <div class="flex sm:flex-row flex-col justify-start gap-y-2 items-center gap-x-4" ref="toolRef">
             <div class="flex-shrink-0 flex sm:w-min w-full items-center justify-start">
                 <el-tooltip :content="$t('file.back')" placement="top">
@@ -1407,6 +1407,21 @@ const getHostMount = async () => {
     }
 };
 
+const handleDrop = async (event: DragEvent) => {
+    event.preventDefault();
+    fileUpload.path = req.path;
+    uploadRef.value.acceptParams(fileUpload);
+    await uploadRef.value?.handleDrop(event);
+};
+
+const handleDragover = (event: DragEvent) => {
+    event.preventDefault();
+};
+
+const handleDragleave = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+};
+
 onMounted(() => {
     if (localStorage.getItem('show-hidden') === null) {
         localStorage.setItem('show-hidden', 'true');
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index d9ed1f2ceaf9..6d36969d43ba 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -448,7 +448,7 @@ const acceptParams = (props: UploadFileProps) => {
     });
 };
 
-defineExpose({ acceptParams });
+defineExpose({ acceptParams, handleDrop });
 </script>
 
 <style lang="scss" scoped>

From e414c3b14e07b5d4b717d67e9f5a14c749df26c9 Mon Sep 17 00:00:00 2001
From: lan-yonghui <yonghui.lan@fit2cloud.com>
Date: Fri, 15 Aug 2025 14:43:57 +0800
Subject: [PATCH 2/2] feat: Support file management page drag and drop upload

---
 frontend/src/views/host/file-management/index.vue        | 4 +++-
 frontend/src/views/host/file-management/upload/index.vue | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index f2505e2e3b13..761a81577e1b 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -1410,8 +1410,10 @@ const getHostMount = async () => {
 const handleDrop = async (event: DragEvent) => {
     event.preventDefault();
     fileUpload.path = req.path;
+    if (!uploadRef.value?.open) {
+        await uploadRef.value?.handleDrop(event);
+    }
     uploadRef.value.acceptParams(fileUpload);
-    await uploadRef.value?.handleDrop(event);
 };
 
 const handleDragover = (event: DragEvent) => {
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index 6d36969d43ba..50ecadd2f701 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -448,7 +448,7 @@ const acceptParams = (props: UploadFileProps) => {
     });
 };
 
-defineExpose({ acceptParams, handleDrop });
+defineExpose({ acceptParams, handleDrop, open });
 </script>
 
 <style lang="scss" scoped>