diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 203907ff1..ab4ae8dca 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -154,10 +154,10 @@ export default function ParameterComponent({
 							data.node.template[name].value = t;
 						}}
 					/>
-				) : left === true && type === "file" ? (
+				) : (left === true && type === "file")||data.type==="JsonSpec" ? (
 					<InputFileComponent
 						disabled={disabled}
-						value={data.node.template[name].value ?? ""}
+						value={data.node.template[name]?.value ?? ""}
 						onChange={(t: string) => {
 							data.node.template[name].value = t;
 						}}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 6e3aa6e67..368b3c2ed 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -22,6 +22,7 @@ export default function GenericNode({
 	const showError = useRef(true);
 	const { types, deleteNode } = useContext(typesContext);
 	const Icon = nodeIcons[types[data.type]];
+	console.log(data)
 	if (!Icon) {
 		if (showError.current) {
 			setErrorData({
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 95aa720b0..756296970 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/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" : "")
 					}
 				>
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index c1dfae10c..f8a9f942e 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -1,5 +1,6 @@
 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({
@@ -8,6 +9,7 @@ export default function InputFileComponent({
 	disabled,
 }: TextAreaComponentType) {
 	const [myValue, setMyValue] = useState(value);
+	const { setErrorData } = useContext(alertContext);
 	useEffect(() => {
 		if (disabled) {
 			setMyValue("");
@@ -18,15 +20,20 @@ export default function InputFileComponent({
 	const handleButtonClick = () => {
 		const input = document.createElement("input");
 		input.type = "file";
-		// input.accept = ".yaml";
+		input.accept = ".json";
 		input.style.display = "none";
+		input.multiple = false;
 		input.onchange = (e: Event) => {
 			const file = (e.target as HTMLInputElement).files?.[0];
-			//check file type
-            // file.name.endsWith(".yaml")
-            if (file) {
+			if (file && file.name.endsWith(".json")) {
 				setMyValue(file.name);
 				onChange(file.name);
+			} else {
+				setErrorData({
+					title:
+						"Please select a valid file. Only files this files are allowed:",
+					list: ["*.json"],
+				});
 			}
 		};
 		input.click();
@@ -41,16 +48,14 @@ export default function InputFileComponent({
 			<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" : "")
 					}
 				>
 					{myValue !== "" ? myValue : "No file"}
 				</span>
-				<button
-                onClick={handleButtonClick}
-                >
-					<DocumentMagnifyingGlassIcon className="w-6 h-6 hover:text-blue-600" />
+				<button onClick={handleButtonClick}>
+					<DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
 				</button>
 			</div>
 		</div>