update file drop component to work with use effect

M3-org · Dec 10, 2023 · a24ab5e · a24ab5e
1 parent f5e01ec
commit a24ab5e
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/FileDropComponent.jsx b/src/components/FileDropComponent.jsx
@@ -4,14 +4,15 @@ import styles from './FileDropComponent.module.css';
 
 export default function FileDropComponent ({onFilesDrop}){
   const [isDragging, setIsDragging] = useState(false);
+  const [files, setFiles] = React.useState(null);
 
   useEffect(() => {
     const handleDrop = (event) => {
       event.preventDefault();
       setIsDragging(false);
       const files = event.dataTransfer.files;
       if (onFilesDrop) {
-        onFilesDrop(files);
+        setFiles(files)
       }
     };
 
@@ -31,6 +32,13 @@ export default function FileDropComponent ({onFilesDrop}){
     };
   }, []);
 
+  useEffect(()=>{
+    if (files){
+      console.log("files");
+      onFilesDrop(files);
+    }
+  },[files])
+
   const handleDragLeave = () => {
     setIsDragging(false);
   };