From 93945d603ef9255a51ea892018ec744f767b68bc Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 22 Apr 2026 07:42:20 +0800
Subject: [PATCH] Show typed human input outputs in panel

---
 .../human-input/__tests__/panel.spec.tsx      | 29 +++++++++++++++++++
 .../workflow/nodes/human-input/panel.tsx      | 14 +++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
index 53664bee74..b4c3530a6a 100644
--- a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
@@ -383,4 +383,33 @@ describe('human-input/panel', () => {
     expect(screen.getByRole('button', { name: 'timeout:readonly' })).toBeInTheDocument()
     expect(screen.queryByText('form-preview')).not.toBeInTheDocument()
   })
+
+  it('renders file outputs with file-aware types', () => {
+    mockUseConfig.mockReturnValue(createConfigResult({
+      inputs: createData({
+        inputs: [
+          {
+            type: InputVarType.singleFile,
+            output_variable_name: 'attachment',
+            allowed_file_extensions: [],
+            allowed_file_types: [],
+            allowed_file_upload_methods: [],
+          },
+          {
+            type: InputVarType.multiFiles,
+            output_variable_name: 'attachments',
+            allowed_file_extensions: [],
+            allowed_file_types: [],
+            allowed_file_upload_methods: [],
+            max_upload_count: 3,
+          },
+        ],
+      }),
+    }))
+
+    renderPanel()
+
+    expect(screen.getByText('attachment:file:Form input value')).toBeInTheDocument()
+    expect(screen.getByText('attachments:array[file]:Form input value')).toBeInTheDocument()
+  })
 })
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index b7b65e7de8..8cb4a505fb 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import type { HumanInputNodeType } from './types'
+import type { FormInputItem, HumanInputNodeType } from './types'
 import type { NodePanelProps, Var } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
@@ -34,6 +34,16 @@ import { UserActionButtonType } from './types'
 
 const i18nPrefix = 'nodes.humanInput'
 
+const getOutputVarType = (input: FormInputItem): VarType => {
+  if (input.type === 'file')
+    return VarType.file
+
+  if (input.type === 'file-list')
+    return VarType.arrayFile
+
+  return VarType.string
+}
+
 const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
   id,
   data,
@@ -219,7 +229,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
             <VarItem
               key={input.output_variable_name}
               name={input.output_variable_name}
-              type={VarType.string}
+              type={getOutputVarType(input)}
               description="Form input value"
             />
           ))