feat: Support file management page drag and drop upload (#10011)

#9307

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');

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>