From 037da3a7fdc9317d6d3619060cdaf88942060276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Fri, 15 Aug 2025 17:37:04 +0800
Subject: [PATCH] feat: Support file management page drag and drop upload
 (#10011)

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

diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 55345ce5e..761a81577 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,23 @@ 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);
+};
+
+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 d9ed1f2ce..50ecadd2f 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, open });
 </script>
 
 <style lang="scss" scoped>