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,11 +32,16 @@ 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;
 
+      const uploadPromises: Promise<any>[] = [];
+
+      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);
@@ -32,11 +51,22 @@ const useFileDrop = (uploadFlow, type) => {
                   file: file,
                   isComponent: type === "all" ? null : type === "component",
                 })
+                  .then((_) => resolve())
+                  .catch((error) => {
+                    reject(error);
+                  });
+              };
+              reader.readAsText(file);
+            },
+          );
+          uploadPromises.push(FileReaderPromise);
+        }
+      }
+
+      Promise.all(uploadPromises)
         .then(() => {
           setSuccessData({
-                title: `${
+            title: `All files uploaded successfully`,
-                  is_component ? "Component" : "Flow"
-                } uploaded successfully`,
           });
           getFolderById(folderId ? folderId : myCollectionId);
         })
@@ -46,18 +76,8 @@ const useFileDrop = (uploadFlow, type) => {
             list: [error],
           });
         });
-        };
-
-        reader.readAsText(file);
-      } else {
-        setErrorData({
-          title: WRONG_FILE_ERROR_ALERT,
-          list: [UPLOAD_ALERT_LIST],
-        });
-      }
     }
   };
-
   return [handleFileDrop];
 };