enhancement: Update useFileDrop hook to handle multiple file drops

src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx

@@ -1,4 +1,5 @@
 import { useLocation } from "react-router-dom";
+import { XYPosition } from "reactflow";
 import {
   CONSOLE_ERROR_MSG,
   UPLOAD_ALERT_LIST,
@@ -7,7 +8,20 @@ import {
 import useAlertStore from "../../../stores/alertStore";
 import { useFolderStore } from "../../../stores/foldersStore";
 
-const useFileDrop = (uploadFlow, type) => {
+const useFileDrop = (
+  uploadFlow: ({
+    newProject,
+    file,
+    isComponent,
+    position,
+  }: {
+    newProject: boolean;
+    file?: File;
+    isComponent: boolean | null;
+    position?: XYPosition;
+  }) => Promise<string | never>,
+  type,
+) => {
   const location = useLocation();
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -18,46 +32,52 @@ const useFileDrop = (uploadFlow, type) => {
   const handleFileDrop = (e) => {
     e.preventDefault();
     if (e.dataTransfer.types.some((type) => type === "Files")) {
-      const file = e.dataTransfer.files.item(0);
+      const files: FileList = e.dataTransfer.files;
 
-      if (file.type === "application/json") {
-        const reader = new FileReader();
+      const uploadPromises: Promise<any>[] = [];
 
-        reader.onload = (event) => {
-          const fileContent = event.target!.result;
-          const fileContentJson = JSON.parse(fileContent as string);
-          const is_component = fileContentJson.is_component;
-          uploadFlow({
-            newProject: true,
-            file: file,
-            isComponent: type === "all" ? null : type === "component",
-          })
-            .then(() => {
-              setSuccessData({
-                title: `${
-                  is_component ? "Component" : "Flow"
-                } uploaded successfully`,
-              });
-              getFolderById(folderId ? folderId : myCollectionId);
-            })
-            .catch((error) => {
-              setErrorData({
-                title: CONSOLE_ERROR_MSG,
-                list: [error],
-              });
-            });
-        };
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (file.type === "application/json") {
+          const reader = new FileReader();
+          const FileReaderPromise: Promise<void> = new Promise(
+            (resolve, reject) => {
+              reader.onload = (event) => {
+                const fileContent = event.target!.result;
+                const fileContentJson = JSON.parse(fileContent as string);
+                const is_component = fileContentJson.is_component;
+                uploadFlow({
+                  newProject: true,
+                  file: file,
+                  isComponent: type === "all" ? null : type === "component",
+                })
+                  .then((_) => resolve())
+                  .catch((error) => {
+                    reject(error);
+                  });
+              };
+              reader.readAsText(file);
+            },
+          );
+          uploadPromises.push(FileReaderPromise);
+        }
+      }
 
-        reader.readAsText(file);
-      } else {
-        setErrorData({
-          title: WRONG_FILE_ERROR_ALERT,
-          list: [UPLOAD_ALERT_LIST],
+      Promise.all(uploadPromises)
+        .then(() => {
+          setSuccessData({
+            title: `All files uploaded successfully`,
+          });
+          getFolderById(folderId ? folderId : myCollectionId);
+        })
+        .catch((error) => {
+          setErrorData({
+            title: CONSOLE_ERROR_MSG,
+            list: [error],
+          });
         });
-      }
     }
   };
-
   return [handleFileDrop];
 };