From f7671874f0f9be4ed675662b26029d52dc09f0b0 Mon Sep 17 00:00:00 2001 From: Gabriel Almeida Date: Tue, 30 May 2023 23:41:41 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20chang?= =?UTF-8?q?e=20content=20field=20to=20file=5Fpath=20to=20match=20backend?= =?UTF-8?q?=20API=20=E2=9C=A8=20feat(inputFileComponent):=20add=20file=20u?= =?UTF-8?q?pload=20functionality=20and=20update=20state=20and=20callback?= =?UTF-8?q?=20with=20the=20filename=20=F0=9F=94=A5=20chore(tabsContext):?= =?UTF-8?q?=20remove=20console.log=20statements=20=F0=9F=94=A7=20chore(vit?= =?UTF-8?q?e.config.ts):=20add=20upload=20route=20to=20apiRoutes=20The=20c?= =?UTF-8?q?ontent=20field=20in=20the=20parameterComponent=20was=20changed?= =?UTF-8?q?=20to=20file=5Fpath=20to=20match=20the=20backend=20API.=20The?= =?UTF-8?q?=20inputFileComponent=20now=20allows=20file=20uploads=20and=20u?= =?UTF-8?q?pdates=20the=20state=20and=20callback=20with=20the=20filename.?= =?UTF-8?q?=20The=20console.log=20statements=20were=20removed=20from=20the?= =?UTF-8?q?=20tabsContext.=20The=20upload=20route=20was=20added=20to=20the?= =?UTF-8?q?=20apiRoutes=20in=20the=20vite.config.ts=20file.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 2 +- .../src/CustomNodes/GenericNode/index.tsx | 2 +- .../components/inputFileComponent/index.tsx | 55 ++++++++++++++----- src/frontend/src/contexts/tabsContext.tsx | 6 +- src/frontend/vite.config.ts | 1 + 5 files changed, 46 insertions(+), 20 deletions(-) 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(); }} > 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 (
{ if (disabled) { setMyValue(""); @@ -21,12 +24,6 @@ export default function InputFileComponent({ } }, [disabled, onChange]); - function attachFile(fileReadEvent: ProgressEvent) { - 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/*",