input file component working

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

@@ -12,6 +12,8 @@ import FloatComponent from "../../../../components/floatComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import IntComponent from "../../../../components/intComponent";
 
 export default function ParameterComponent({
 	left,
@@ -44,6 +46,7 @@ export default function ParameterComponent({
 	const { reactFlowInstance } = useContext(typesContext);
 	let disabled =
 		reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
+	const { save } = useContext(TabsContext);
 
 	return (
 		<div
@@ -98,6 +101,7 @@ export default function ParameterComponent({
 								}
 								onChange={(t: string[]) => {
 									data.node.template[name].value = t;
+									save();
 								}}
 							/>
 						) : data.node.template[name].multiline ? (
@@ -106,6 +110,7 @@ export default function ParameterComponent({
 								value={data.node.template[name].value ?? ""}
 								onChange={(t: string) => {
 									data.node.template[name].value = t;
+									save();
 								}}
 							/>
 						) : (
@@ -115,6 +120,7 @@ export default function ParameterComponent({
 								value={data.node.template[name].value ?? ""}
 								onChange={(t) => {
 									data.node.template[name].value = t;
+									save();
 								}}
 							/>
 						)}
@@ -127,6 +133,7 @@ export default function ParameterComponent({
 							setEnabled={(t) => {
 								data.node.template[name].value = t;
 								setEnabled(t);
+								save();
 							}}
 						/>
 					</div>
@@ -136,6 +143,7 @@ export default function ParameterComponent({
 						value={data.node.template[name].value ?? ""}
 						onChange={(t) => {
 							data.node.template[name].value = t;
+							save();
 						}}
 					/>
 				) : left === true &&
@@ -152,18 +160,32 @@ export default function ParameterComponent({
 						value={data.node.template[name].value ?? ""}
 						onChange={(t: string) => {
 							data.node.template[name].value = t;
+							save();
 						}}
 					/>
-				) : (left === true && type === "file")||data.type==="JsonSpec" ? (
+				) : left === true && type === "file" ? (
 					<InputFileComponent
 						disabled={disabled}
-						value={data.node.template[name]?.value ?? ""}
+						value={data.node.template[name].value ?? ""}
 						onChange={(t: string) => {
-							if(data.node.template[name]?.value){
+							data.node.template[name].value = t;
-								data.node.template[name].value = t;
+						}}
-							}
+						fileTypes={data.node.template[name].fileTypes}
+						suffixes={data.node.template[name].suffixes}
+						onFileChange={(t: string) => {
+							data.node.template[name].content = t;
+							save();
 						}}
 					></InputFileComponent>
+				) : left === true && type === "int" ? (
+					<IntComponent
+						disabled={disabled}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t) => {
+							data.node.template[name].value = t;
+							save();
+						}}
+					/>
 				) : (
 					<></>
 				)}

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

@@ -1,39 +1,52 @@
 import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { TextAreaComponentType } from "../../types/components";
+import { FileComponentType } from "../../types/components";
 
 export default function InputFileComponent({
 	value,
 	onChange,
 	disabled,
-}: TextAreaComponentType) {
+	suffixes,
+	fileTypes,
+	onFileChange
+}: FileComponentType) {
 	const [myValue, setMyValue] = useState(value);
 	const { setErrorData } = useContext(alertContext);
 	useEffect(() => {
 		if (disabled) {
 			setMyValue("");
 			onChange("");
+			onFileChange("")
 		}
 	}, [disabled, onChange]);
 
 	function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
 		fileReadEvent.preventDefault();
 		const file = fileReadEvent.target.result;
-		console.log(file);
+		onFileChange(file as string)
+	}
+
+	function checkFileType(fileName:string):boolean{
+		for (let index = 0; index < suffixes.length; index++) {
+			if(fileName.endsWith(suffixes[index])){
+				return true
+			}
+		}
+		return false
 	}
 
 	const handleButtonClick = () => {
 		const input = document.createElement("input");
 		input.type = "file";
-		input.accept = ".json";
+		input.accept = suffixes.join(",");
 		input.style.display = "none";
 		input.multiple = false;
 		input.onchange = (e: Event) => {
 			const file = (e.target as HTMLInputElement).files?.[0];
 			const fileData = new FileReader();
 			fileData.onload = attachFile;
-			if (file && file.name.endsWith(".json")) {
+			if (file && checkFileType(file.name)) {
 				fileData.readAsDataURL(file);
 				setMyValue(file.name);
 				onChange(file.name);
@@ -41,7 +54,7 @@ export default function InputFileComponent({
 				setErrorData({
 					title:
 						"Please select a valid file. Only files this files are allowed:",
-					list: ["*.json"],
+					list: fileTypes,
 				});
 			}
 		};

src/frontend/src/contexts/tabsContext.tsx

@@ -5,6 +5,7 @@ import { normalCaseToSnakeCase } from "../utils";
 import { alertContext } from "./alertContext";
 
 const TabsContextInitialValue: TabsContextType = {
+	save:()=>{},
 	tabIndex: 0,
 	setTabIndex: (index: number) => {},
 	flows: [],
@@ -35,15 +36,20 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 		newNodeId.current = newNodeId.current + 1;
 		return newNodeId.current;
 	}
+	function save(){
+		if (flows.length !== 0)
+		window.localStorage.setItem(
+			"tabsData",
+			JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
+		);
+	}
 	useEffect(() => {
 		//save tabs locally
-		if (flows.length !== 0)
+		save()
-			window.localStorage.setItem(
-				"tabsData",
-				JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current })
-			);
 	}, [flows, id, tabIndex, newNodeId]);
 
+
+
 	useEffect(() => {
 		//get tabs locally saved
 		let cookie = window.localStorage.getItem("tabsData");
@@ -177,6 +183,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	return (
 		<TabsContext.Provider
 			value={{
+				save,
 				hardReset,
 				lockChat,
 				setLockChat,

src/frontend/src/types/components/index.ts

@@ -39,6 +39,15 @@ export type TextAreaComponentType = {
 	value: string;
 };
 
+export type FileComponentType = {
+	disabled: boolean;
+	onChange: (value: string[] | string) => void;
+	value: string;
+	suffixes:Array<string>;
+	fileTypes:Array<string>;
+	onFileChange:(value: string) => void;
+};
+
 export type DisclosureComponentType = {
 	children: ReactNode;
 	button: {

src/frontend/src/types/tabs/index.ts

@@ -1,6 +1,7 @@
 import { FlowType } from "../flow";
 
 export type TabsContextType = {
+	save:()=>void;
 	tabIndex: number;
 	setTabIndex: (index: number) => void;
 	flows: Array<FlowType>;