enhancement: Update useFileDrop hook to handle multiple file drops (#3083)

* refactor: Update useFileDrop hook to handle multiple file drops

The useFileDrop hook in use-on-file-drop.tsx has been updated to handle multiple file drops. It now accepts an array of files instead of a single file, and processes each file individually. This allows for uploading multiple files at once and improves the user experience.

* [autofix.ci] apply automated fixes

* Remove unused console.log

* Removed console.log

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>

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 uploadPromises: Promise<any>[] = [];
-        const reader = new FileReader();
 
-        reader.onload = (event) => {
+      for (let i = 0; i < files.length; i++) {
-          const fileContent = event.target!.result;
+        const file = files[i];
-          const fileContentJson = JSON.parse(fileContent as string);
+        if (file.type === "application/json") {
-          const is_component = fileContentJson.is_component;
+          const reader = new FileReader();
-          uploadFlow({
+          const FileReaderPromise: Promise<void> = new Promise(
-            newProject: true,
+            (resolve, reject) => {
-            file: file,
+              reader.onload = (event) => {
-            isComponent: type === "all" ? null : type === "component",
+                const fileContent = event.target!.result;
-          })
+                const fileContentJson = JSON.parse(fileContent as string);
-            .then(() => {
+                const is_component = fileContentJson.is_component;
-              setSuccessData({
+                uploadFlow({
-                title: `${
+                  newProject: true,
-                  is_component ? "Component" : "Flow"
+                  file: file,
-                } uploaded successfully`,
+                  isComponent: type === "all" ? null : type === "component",
-              });
+                })
-              getFolderById(folderId ? folderId : myCollectionId);
+                  .then((_) => resolve())
-            })
+                  .catch((error) => {
-            .catch((error) => {
+                    reject(error);
-              setErrorData({
+                  });
-                title: CONSOLE_ERROR_MSG,
+              };
-                list: [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];
 };