From 96b35e084344515738f2e2b46212cb5f0459fdaa Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 29 Jul 2025 15:05:35 -0300
Subject: [PATCH] feat: add InputFile customization (#9233)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (frontend): introduce CustomInputFileComponent to customize file input component in parameter render component for better flexibility and customization. Remove InputFileComponent from parameter render component and replace it with CustomInputFileComponent.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../core/parameterRenderComponent/index.tsx   |  5 ++-
 .../components/custom-input-file.tsx          | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/customization/components/custom-input-file.tsx

diff --git a/src/frontend/src/components/core/parameterRenderComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/index.tsx
index e6bc612dc..e82f2b302 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/index.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import type { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
 import CodeAreaComponent from "@/components/core/parameterRenderComponent/components/codeAreaComponent";
 import SliderComponent from "@/components/core/parameterRenderComponent/components/sliderComponent";
@@ -6,12 +5,12 @@ import TableNodeComponent from "@/components/core/parameterRenderComponent/compo
 import TabComponent from "@/components/core/parameterRenderComponent/components/tabComponent";
 import { TEXT_FIELD_TYPES } from "@/constants/constants";
 import CustomConnectionComponent from "@/customization/components/custom-connectionComponent";
+import CustomInputFileComponent from "@/customization/components/custom-input-file";
 import CustomLinkComponent from "@/customization/components/custom-linkComponent";
 import type { APIClassType, InputFieldType } from "@/types/api";
 import DictComponent from "./components/dictComponent";
 import { EmptyParameterComponent } from "./components/emptyParameterComponent";
 import FloatComponent from "./components/floatComponent";
-import InputFileComponent from "./components/inputFileComponent";
 import InputListComponent from "./components/inputListComponent";
 import IntComponent from "./components/intComponent";
 import KeypairListComponent from "./components/keypairListComponent";
@@ -171,7 +170,7 @@ export function ParameterRenderComponent({
         );
       case "file":
         return (
-          <InputFileComponent
+          <CustomInputFileComponent
             {...baseInputProps}
             fileTypes={templateData.fileTypes}
             file_path={templateData.file_path}
diff --git a/src/frontend/src/customization/components/custom-input-file.tsx b/src/frontend/src/customization/components/custom-input-file.tsx
new file mode 100644
index 000000000..dfc257df9
--- /dev/null
+++ b/src/frontend/src/customization/components/custom-input-file.tsx
@@ -0,0 +1,31 @@
+import InputFileComponent from "@/components/core/parameterRenderComponent/components/inputFileComponent";
+import type {
+  FileComponentType,
+  InputProps,
+} from "@/components/core/parameterRenderComponent/types";
+
+export default function CustomInputFileComponent({
+  value,
+  file_path,
+  handleOnNewValue,
+  disabled,
+  fileTypes,
+  isList,
+  tempFile = true,
+  editNode = false,
+  id,
+}: InputProps<string, FileComponentType>): JSX.Element {
+  return (
+    <InputFileComponent
+      value={value}
+      file_path={file_path}
+      handleOnNewValue={handleOnNewValue}
+      disabled={disabled}
+      fileTypes={fileTypes}
+      isList={isList}
+      tempFile={tempFile}
+      editNode={editNode}
+      id={`inputfile_${id}`}
+    />
+  );
+}