Fixed function to upload flows on Folder upload button

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -33,7 +33,7 @@ const SideBarFoldersButtonsComponent = ({
   const [foldersNames, setFoldersNames] = useState({});
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const [editFolders, setEditFolderName] = useState(
-    folders.map((obj) => ({ name: obj.name, edit: false }))
+    folders.map((obj) => ({ name: obj.name, edit: false })),
   );
   const uploadFolder = useFolderStore((state) => state.uploadFolder);
   const currentFolder = pathname.split("/");
@@ -58,11 +58,13 @@ const SideBarFoldersButtonsComponent = ({
 
   const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
     folderId,
-    handleFolderChange
+    handleFolderChange,
   );
 
   const handleUploadFlowsToFolder = () => {
-    uploadFolder(folderId);
+    uploadFolder(folderId).then(() => {
+      getFolderById(folderId);
+    });
   };
 
   const handleDownloadFolder = (id: string) => {
@@ -73,7 +75,7 @@ const SideBarFoldersButtonsComponent = ({
     addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
       (res) => {
         getFoldersApi(true);
-      }
+      },
     );
   }
 
@@ -119,7 +121,7 @@ const SideBarFoldersButtonsComponent = ({
         <>
           {folders.map((item, index) => {
             const editFolderName = editFolders?.filter(
-              (folder) => folder.name === item.name
+              (folder) => folder.name === item.name,
             )[0];
             return (
               <div
@@ -135,7 +137,7 @@ const SideBarFoldersButtonsComponent = ({
                     ? "border border-border bg-muted hover:bg-muted"
                     : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
                   "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
-                  folderIdDragging === item.id! ? "bg-border" : ""
+                  folderIdDragging === item.id! ? "bg-border" : "",
                 )}
                 onClick={() => handleChangeFolder!(item.id!)}
               >
@@ -205,7 +207,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              }))
+                              })),
                             );
                           }
                           if (e.key === "Enter") {
@@ -238,10 +240,10 @@ const SideBarFoldersButtonsComponent = ({
                             };
                             const updatedFolder = await updateFolder(
                               body,
-                              item.id!
+                              item.id!,
                             );
                             const updateFolders = folders.filter(
-                              (f) => f.name !== item.name
+                              (f) => f.name !== item.name,
                             );
                             setFolders([...updateFolders, updatedFolder]);
                             setFoldersNames({});
@@ -249,7 +251,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              }))
+                              })),
                             );
                           } else {
                             setFoldersNames((old) => ({

src/frontend/src/stores/foldersStore.tsx

@@ -112,31 +112,25 @@ export const useFolderStore = create<FoldersStoreType>((set, get) => ({
           const file = (event.target as HTMLInputElement).files![0];
           const formData = new FormData();
           formData.append("file", file);
-          const fileReader = new FileReader();
+          file.text().then((text) => {
-          fileReader.readAsText(file, "UTF-8");
+            const data = JSON.parse(text);
-          fileReader.onload = (e) => {
+            if (data.data?.nodes) {
-            if (e && e.target) {
+              useFlowsManagerStore
-              const data = JSON.parse(e.target.result as string);
+                .getState()
-              if (data.data?.nodes) {
+                .addFlow(true, data)
-                uploadFlowsToDatabase(formData).then(() => {
+                .then(() => {
-                  useFlowsManagerStore
+                  resolve();
-                    .getState()
-                    .refreshFlows()
-                    .then(() => {
-                      resolve();
-                    });
                 });
-              } else {
+            } else {
-                uploadFlowsFromFolders(formData).then(() => {
+              uploadFlowsFromFolders(formData).then(() => {
-                  get()
+                get()
-                    .getFoldersApi(true)
+                  .getFoldersApi(true)
-                    .then(() => {
+                  .then(() => {
-                      resolve();
+                    resolve();
-                    });
+                  });
-                });
+              });
-              }
             }
-          };
+          });
         }
       };
       input.click();

src/frontend/src/types/zustand/folders/index.ts

@@ -20,7 +20,7 @@ export type FoldersStoreType = {
   setFolderUrl: (folderUrl: string) => void;
   folderDragging: boolean;
   setFolderDragging: (set: boolean) => void;
-  uploadFolder: (folderId: string) => void;
+  uploadFolder: (folderId: string) => Promise<void>;
   folderIdDragging: string;
   setFolderIdDragging: (id: string) => void;
   starterProjectId: string;