Configure single-file human input fields

web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx

@@ -51,6 +51,26 @@ vi.mock('@/app/components/app/configuration/config-var/config-select', () => ({
   ),
 }))
 
+vi.mock('@/app/components/workflow/nodes/_base/components/file-upload-setting', () => ({
+  __esModule: true,
+  default: ({ onChange }: { onChange: (payload: {
+    allowed_file_extensions: string[]
+    allowed_file_types: string[]
+    allowed_file_upload_methods: string[]
+  }) => void }) => (
+    <button
+      type="button"
+      onClick={() => onChange({
+        allowed_file_extensions: ['.pdf'],
+        allowed_file_types: ['document'],
+        allowed_file_upload_methods: ['local_file'],
+      })}
+    >
+      file-upload-setting
+    </button>
+  ),
+}))
+
 const createPayload = (overrides?: Partial<FormInputItem>): FormInputItem => ({
   type: InputVarType.paragraph,
   output_variable_name: 'valid_name',
@@ -471,4 +491,32 @@ describe('InputField', () => {
     expect(onChange).toHaveBeenCalledTimes(1)
     expect(onChange.mock.calls[0]![0]).not.toHaveProperty('default')
   })
+
+  it('should save single file upload settings', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(
+      <InputField
+        nodeId="node-13"
+        isEdit={false}
+        payload={createPayload()}
+        onChange={onChange}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'select-file' }))
+    await user.click(screen.getByRole('button', { name: 'file-upload-setting' }))
+    await user.click(screen.getByRole('button', { name: /workflow\.nodes\.humanInput\.insertInputField\.insert/i }))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange.mock.calls[0]![0]).toEqual({
+      type: InputVarType.singleFile,
+      output_variable_name: 'valid_name',
+      allowed_file_extensions: ['.pdf'],
+      allowed_file_types: ['document'],
+      allowed_file_upload_methods: ['local_file'],
+    })
+  })
 })

web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx

@@ -10,10 +10,12 @@ import { useTranslation } from 'react-i18next'
 import TypeSelector from '@/app/components/app/configuration/config-var/config-modal/type-select'
 import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
 import Input from '@/app/components/base/input'
+import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import {
   createDefaultFormInputByType,
   createDefaultParagraphFormInput,
+  isFileFormInput,
   isParagraphFormInput,
   isSelectFormInput,
 } from '@/app/components/workflow/nodes/human-input/types'
@@ -148,6 +150,23 @@ const InputField: React.FC<InputFieldProps> = ({
       }
     })
   }, [])
+  const handleFilePayloadChange = useCallback((payload: {
+    allowed_file_extensions: string[]
+    allowed_file_types: string[]
+    allowed_file_upload_methods: string[]
+  }) => {
+    setTempPayload((prev) => {
+      if (!isFileFormInput(prev))
+        return prev
+
+      return {
+        ...prev,
+        allowed_file_extensions: payload.allowed_file_extensions,
+        allowed_file_types: payload.allowed_file_types,
+        allowed_file_upload_methods: payload.allowed_file_upload_methods,
+      }
+    })
+  }, [])
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -254,6 +273,15 @@ const InputField: React.FC<InputFieldProps> = ({
               )}
         </div>
       )}
+      {isFileFormInput(tempPayload) && (
+        <div className="mt-4">
+          <FileUploadSetting
+            payload={tempPayload}
+            isMultiple={false}
+            onChange={handleFilePayloadChange}
+          />
+        </div>
+      )}
       <div className="mt-4 flex justify-end space-x-2">
         <Button data-testid="hitl-input-cancel-btn" onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
         {isEdit