🐛 fix(parameterComponent): change content field to file_path to match backend API

✨ feat(inputFileComponent): add file upload functionality and update state and callback with the filename
🔥 chore(tabsContext): remove console.log statements
🔧 chore(vite.config.ts): add upload route to apiRoutes
The content field in the parameterComponent was changed to file_path to match the backend API. The inputFileComponent now allows file uploads and updates the state and callback with the filename. The console.log statements were removed from the tabsContext. The upload route was added to the apiRoutes in the vite.config.ts file.

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -178,7 +178,7 @@ export default function ParameterComponent({
             fileTypes={data.node.template[name].fileTypes}
             suffixes={data.node.template[name].suffixes}
             onFileChange={(t: string) => {
-              data.node.template[name].content = t;
+              data.node.template[name].file_path = t;
               save();
             }}
           ></InputFileComponent>

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -97,7 +97,7 @@ export default function GenericNode({
     deleteNode(data.id);
     return;
   }
-  console.log(data);
+  // console.log(data);
 
   return (
     <div

src/frontend/src/components/inputFileComponent/index.tsx

@@ -2,6 +2,7 @@ import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function InputFileComponent({
   value,
@@ -13,6 +14,8 @@ export default function InputFileComponent({
 }: FileComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { setErrorData } = useContext(alertContext);
+  const { flows, tabIndex } = useContext(TabsContext);
+  const { id } = flows[tabIndex];
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -21,12 +24,6 @@ export default function InputFileComponent({
     }
   }, [disabled, onChange]);
 
-  function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
-    fileReadEvent.preventDefault();
-    const file = fileReadEvent.target.result;
-    onFileChange(file as string);
-  }
-
   function checkFileType(fileName: string): boolean {
     for (let index = 0; index < suffixes.length; index++) {
       if (fileName.endsWith(suffixes[index])) {
@@ -35,29 +32,57 @@ export default function InputFileComponent({
     }
     return false;
   }
-
   const handleButtonClick = () => {
+    // Create a file input element
     const input = document.createElement("input");
     input.type = "file";
     input.accept = suffixes.join(",");
-    input.style.display = "none";
-    input.multiple = false;
+    input.style.display = "none"; // Hidden from view
+    input.multiple = false; // Allow only one file selection
+
     input.onchange = (e: Event) => {
+      // Get the selected file
       const file = (e.target as HTMLInputElement).files?.[0];
-      const fileData = new FileReader();
-      fileData.onload = attachFile;
+
+      // Check if the file type is correct
       if (file && checkFileType(file.name)) {
-        fileData.readAsDataURL(file);
-        setMyValue(file.name);
-        onChange(file.name);
+        // Prepare the file for upload
+        const formData = new FormData();
+        formData.append("file", file);
+
+        // Upload the file
+        fetch(`/upload/${id}`, {
+          method: "POST",
+          body: formData,
+        })
+          .then((response) => response.json())
+          .then((data) => {
+            console.log("File uploaded successfully");
+            // Get the file name from the response
+            const { filename } = data;
+            console.log("File name:", filename);
+
+            // Update the state and callback with the name of the file
+            // sets the value to the user
+            setMyValue(file.name);
+            onChange(file.name);
+            // sets the value that goes to the backend
+            onFileChange(filename);
+          })
+          .catch(() => {
+            console.error("Error occurred while uploading file");
+          });
       } else {
+        // Show an error if the file type is not allowed
         setErrorData({
           title:
-            "Please select a valid file. Only files this files are allowed:",
+            "Please select a valid file. Only these file types are allowed:",
           list: fileTypes,
         });
       }
     };
+
+    // Trigger the file selection dialog
     input.click();
   };
 

src/frontend/src/contexts/tabsContext.tsx

@@ -65,12 +65,12 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       Saveflows.forEach((flow) => {
         if (flow.data && flow.data?.nodes)
           flow.data?.nodes.forEach((node) => {
-            console.log(node.data.type);
+            // console.log(node.data.type);
             //looking for file fields to prevent saving the content and breaking the flow for exceeding the the data limite for local storage
             Object.keys(node.data.node.template).forEach((key) => {
-              console.log(node.data.node.template[key].type);
+              // console.log(node.data.node.template[key].type);
               if (node.data.node.template[key].type === "file") {
-                console.log(node.data.node.template[key]);
+                // console.log(node.data.node.template[key]);
                 node.data.node.template[key].content = null;
                 node.data.node.template[key].value = "";
               }

src/frontend/vite.config.ts

@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
 const apiRoutes = [
   "/all",
+  "^/upload/*",
   "/predict",
   "^/validate/*",
   "^/chat/*",