diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 653248763..782c22f6e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/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>
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 1a7f93ae5..724dfdac4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/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
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 8b998c731..89969fc06 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/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();
   };
 
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 1d7ad43d5..bf053f232 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/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 = "";
               }
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 172b37733..008a8872a 100644
--- a/src/frontend/vite.config.ts
+++ b/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/*",