fix: add support for upload flows to a folder (#2844)

* ✨ (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

@@ -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)

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);
     });

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")) {

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;
+  }
+}