Configure multi-file human input fields

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

@@ -57,6 +57,7 @@ vi.mock('@/app/components/workflow/nodes/_base/components/file-upload-setting',
     allowed_file_extensions: string[]
     allowed_file_types: string[]
     allowed_file_upload_methods: string[]
+    max_length?: number
   }) => void }) => (
     <button
       type="button"
@@ -64,6 +65,7 @@ vi.mock('@/app/components/workflow/nodes/_base/components/file-upload-setting',
         allowed_file_extensions: ['.pdf'],
         allowed_file_types: ['document'],
         allowed_file_upload_methods: ['local_file'],
+        max_length: 4,
       })}
     >
       file-upload-setting
@@ -519,4 +521,33 @@ describe('InputField', () => {
       allowed_file_upload_methods: ['local_file'],
     })
   })
+
+  it('should save file-list upload settings and max upload count', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(
+      <InputField
+        nodeId="node-14"
+        isEdit={false}
+        payload={createPayload()}
+        onChange={onChange}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'select-file-list' }))
+    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.multiFiles,
+      output_variable_name: 'valid_name',
+      allowed_file_extensions: ['.pdf'],
+      allowed_file_types: ['document'],
+      allowed_file_upload_methods: ['local_file'],
+      max_upload_count: 4,
+    })
+  })
 })

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

@@ -16,6 +16,7 @@ import {
   createDefaultFormInputByType,
   createDefaultParagraphFormInput,
   isFileFormInput,
+  isFileListFormInput,
   isParagraphFormInput,
   isSelectFormInput,
 } from '@/app/components/workflow/nodes/human-input/types'
@@ -167,6 +168,25 @@ const InputField: React.FC<InputFieldProps> = ({
       }
     })
   }, [])
+  const handleFileListPayloadChange = useCallback((payload: {
+    allowed_file_extensions: string[]
+    allowed_file_types: string[]
+    allowed_file_upload_methods: string[]
+    max_length?: number
+  }) => {
+    setTempPayload((prev) => {
+      if (!isFileListFormInput(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,
+        max_upload_count: payload.max_length,
+      }
+    })
+  }, [])
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -282,6 +302,18 @@ const InputField: React.FC<InputFieldProps> = ({
           />
         </div>
       )}
+      {isFileListFormInput(tempPayload) && (
+        <div className="mt-4">
+          <FileUploadSetting
+            payload={{
+              ...tempPayload,
+              max_length: tempPayload.max_upload_count,
+            }}
+            isMultiple
+            onChange={handleFileListPayloadChange}
+          />
+        </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