From 41143b1e58e9da20935b81f7aee2019666399beb Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Mon, 22 Jul 2024 09:39:53 -0300
Subject: [PATCH] fix: add support for upload flows to a folder (#2844)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (flows.py): Add support for uploading flows to a specific folder by adding a folder_id parameter to the upload_file function and updating the flow object with the folder_id if provided
📝 (use-on-file-drop.tsx): Update import statements to include the new uploadFlowToFolder function and replace the usage of uploadFlowsFromFolders with uploadFlowToFolder
🔧 (use-drag-and-drop.tsx): Refactor the useDragAndDrop hook to remove unnecessary code related to file handling
⬆️ (index.ts): Add a new function uploadFlowToFolder to handle uploading flows to a specific folder in the MainPage services module

* ♻️ (flows.py): remove trailing whitespace to maintain code cleanliness and consistency
---
 src/backend/base/langflow/api/v1/flows.py     |  8 +++++++-
 .../hooks/use-on-file-drop.tsx                |  8 ++++++--
 .../chatInput/hooks/use-drag-and-drop.tsx     | 15 +--------------
 .../src/pages/MainPage/services/index.ts      | 19 +++++++++++++++++++
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/backend/base/langflow/api/v1/flows.py b/src/backend/base/langflow/api/v1/flows.py
index e01af05ac3bc..b66201fad351 100644
--- a/src/backend/base/langflow/api/v1/flows.py
+++ b/src/backend/base/langflow/api/v1/flows.py
@@ -293,10 +293,12 @@ async def upload_file(
     session: Session = Depends(get_session),
     file: UploadFile = File(...),
     current_user: User = Depends(get_current_active_user),
+    folder_id: UUID | None = None,
 ):
     """Upload flows from a file."""
     contents = await file.read()
     data = orjson.loads(contents)
+    response_list = []
     if "flows" in data:
         flow_list = FlowListCreate(**data)
     else:
@@ -304,8 +306,12 @@ async def upload_file(
     # Now we set the user_id for all flows
     for flow in flow_list.flows:
         flow.user_id = current_user.id
+        if folder_id:
+            flow.folder_id = folder_id
+        response = create_flow(session=session, flow=flow, current_user=current_user)
+        response_list.append(response)
 
-    return create_flows(session=session, flow_list=flow_list, current_user=current_user)
+    return response_list
 
 
 @router.get("/download/", response_model=FlowListRead, status_code=200)
diff --git a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
index 4dd87fc50d61..182e1d32583c 100644
--- a/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
+++ b/src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx
@@ -3,7 +3,10 @@ import {
   WRONG_FILE_ERROR_ALERT,
 } from "../../../constants/alerts_constants";
 import { updateFlowInDatabase } from "../../../controllers/API";
-import { uploadFlowsFromFolders } from "../../../pages/MainPage/services";
+import {
+  uploadFlowToFolder,
+  uploadFlowsFromFolders,
+} from "../../../pages/MainPage/services";
 import useAlertStore from "../../../stores/alertStore";
 import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 import { useFolderStore } from "../../../stores/foldersStore";
@@ -131,7 +134,8 @@ const useFileDrop = (
     formData.append("file", data);
     setFolderDragging(false);
     setFolderIdDragging("");
-    uploadFlowsFromFolders(formData).then(() => {
+
+    uploadFlowToFolder(formData, folderId).then(() => {
       refreshFolders();
       triggerFolderChange(folderId);
     });
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
index 36ba4803a186..e6a2af27aa94 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx
@@ -1,17 +1,4 @@
-import ShortUniqueId from "short-unique-id";
-import {
-  ALLOWED_IMAGE_INPUT_EXTENSIONS,
-  FS_ERROR_TEXT,
-  SN_ERROR_TEXT,
-} from "../../../../../../constants/constants";
-// import useFileUpload from "./use-file-upload";
-
-const useDragAndDrop = (
-  setIsDragging: (value: boolean) => void,
-  setFiles: (value: any) => void,
-  currentFlowId: string,
-  setErrorData: (value: any) => void,
-) => {
+const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
   const dragOver = (e) => {
     e.preventDefault();
     if (e.dataTransfer.types.some((type) => type === "Files")) {
diff --git a/src/frontend/src/pages/MainPage/services/index.ts b/src/frontend/src/pages/MainPage/services/index.ts
index 3e1286d5ef1b..f9750fe424e8 100644
--- a/src/frontend/src/pages/MainPage/services/index.ts
+++ b/src/frontend/src/pages/MainPage/services/index.ts
@@ -110,3 +110,22 @@ export async function moveFlowToFolder(
     throw error;
   }
 }
+
+export async function uploadFlowToFolder(
+  flows: FormData,
+  folderId: string,
+): Promise<FlowType[]> {
+  try {
+    const url = `${BASE_URL_API}flows/upload/?folder_id=${encodeURIComponent(folderId)}`;
+
+    const response = await api.post(url, flows);
+
+    if (response?.status !== 201) {
+      throw new Error(`HTTP error! status: ${response?.status}`);
+    }
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}