Merge branch 'inputFile' of https://github.com/logspace-ai/langflow into toolkits

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

@@ -11,6 +11,7 @@ import { ParameterComponentType } from "../../../../types/components";
 import FloatComponent from "../../../../components/floatComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
 
 export default function ParameterComponent({
 	left,
@@ -54,7 +55,12 @@ export default function ParameterComponent({
 					{title}
 					<span className="text-red-600">{required ? " *" : ""}</span>
 				</div>
-				{left && (type === "str" || type === "bool" || type === "float"||type=="code") ? (
+				{left &&
+				(type === "str" ||
+					type === "bool" ||
+					type === "float" ||
+					type === "code" ||
+					type === "file") ? (
 					<></>
 				) : (
 					<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
@@ -148,6 +154,16 @@ export default function ParameterComponent({
 							data.node.template[name].value = t;
 						}}
 					/>
+				) : (left === true && type === "file")||data.type==="JsonSpec" ? (
+					<InputFileComponent
+						disabled={disabled}
+						value={data.node.template[name]?.value ?? ""}
+						onChange={(t: string) => {
+							if(data.node.template[name]?.value){
+								data.node.template[name].value = t;
+							}
+						}}
+					></InputFileComponent>
 				) : (
 					<></>
 				)}

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -23,7 +23,7 @@ export default function CodeAreaComponent({
 			<div className="w-full flex items-center gap-3">
 				<span
 					className={
-						"truncate block max-w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
 						(disabled ? " bg-gray-200" : "")
 					}
 				>

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

@@ -0,0 +1,72 @@
+import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useContext, useEffect, useState } from "react";
+import { alertContext } from "../../contexts/alertContext";
+import { TextAreaComponentType } from "../../types/components";
+
+export default function InputFileComponent({
+	value,
+	onChange,
+	disabled,
+}: TextAreaComponentType) {
+	const [myValue, setMyValue] = useState(value);
+	const { setErrorData } = useContext(alertContext);
+	useEffect(() => {
+		if (disabled) {
+			setMyValue("");
+			onChange("");
+		}
+	}, [disabled, onChange]);
+
+	function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
+		fileReadEvent.preventDefault();
+		const file = fileReadEvent.target.result;
+		console.log(file);
+	}
+
+	const handleButtonClick = () => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = ".json";
+		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")) {
+				fileData.readAsDataURL(file);
+				setMyValue(file.name);
+				onChange(file.name);
+			} else {
+				setErrorData({
+					title:
+						"Please select a valid file. Only files this files are allowed:",
+					list: ["*.json"],
+				});
+			}
+		};
+		input.click();
+	};
+
+	return (
+		<div
+			className={
+				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+			}
+		>
+			<div className="w-full flex items-center gap-3">
+				<span
+					className={
+						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+						(disabled ? " bg-gray-200" : "")
+					}
+				>
+					{myValue !== "" ? myValue : "No file"}
+				</span>
+				<button onClick={handleButtonClick}>
+					<DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
+				</button>
+			</div>
+		</div>
+	);
+}

src/frontend/src/contexts/tabsContext.tsx

@@ -16,7 +16,7 @@ const TabsContextInitialValue: TabsContextType = {
 	uploadFlow: () => {},
 	lockChat: false,
 	setLockChat:(prevState:boolean)=>{},
-	hardReset:()=>{}
+	hardReset:()=>{},
 };
 
 export const TabsContext = createContext<TabsContextType>(