From d9e5c2f89c00e54f6e37aa63466256bc90468efe Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Mon, 18 Mar 2024 09:26:34 +0800
Subject: [PATCH] feat: support full screen file upload on file uploader

---
 app/src/components/FileProvider.tsx | 10 ++--------
 app/src/utils/dom.ts                | 26 ++++++++++++++------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/app/src/components/FileProvider.tsx b/app/src/components/FileProvider.tsx
index 1fb3d27..0ed5a1a 100644
--- a/app/src/components/FileProvider.tsx
+++ b/app/src/components/FileProvider.tsx
@@ -260,14 +260,8 @@ function FileInput({ id, loading, className, handleEvent }: FileInputProps) {
   const ref = useRef(null);
 
   useEffect(() => {
-    if (!ref.current) return;
-    const target = ref.current as HTMLLabelElement;
-    useDraggableInput(target, handleEvent);
-    return () => {
-      target.removeEventListener("dragover", () => {});
-      target.removeEventListener("drop", () => {});
-    };
-  }, [ref]);
+    return useDraggableInput(window.document.body, handleEvent);
+  }, []);
 
   return (
     <>
diff --git a/app/src/utils/dom.ts b/app/src/utils/dom.ts
index 2b60be8..0d525f6 100644
--- a/app/src/utils/dom.ts
+++ b/app/src/utils/dom.ts
@@ -113,32 +113,34 @@ export function getSelectionTextInArea(el: HTMLElement): string {
 }
 
 export function useDraggableInput(
-  target: HTMLLabelElement,
+  target: HTMLElement,
   handleChange: (files: File[]) => void,
 ) {
   /**
    * Make input element draggable
-   * @param t i18n function
-   * @param toast Toast function
-   * @param target Input element
-   * @param handleChange Handle change function
-   * @example
-   * const input = document.getElementById("input") as HTMLLabelElement;
-   * useDraggableInput(t, toast, input, handleChange);
    */
 
-  target.addEventListener("dragover", (e) => {
+  const dragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-  });
-  target.addEventListener("drop", (e) => {
+  }
+
+  const drop = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
     const files = e.dataTransfer?.files || ([] as File[]);
     if (!files.length) return;
     handleChange(Array.from(files));
-  });
+  }
+
+  target.addEventListener("dragover", dragOver);
+  target.addEventListener("drop", drop);
+
+  return () => {
+    target.removeEventListener("dragover", dragOver);
+    target.removeEventListener("drop", drop);
+  }
 }
 
 export function testNumberInputEvent(e: any): boolean {