feat(input-format): upload files in file fields via the file uploader

The file field in the start-block input format only offered a raw JSON
editor expecting hand-written base64 objects, which users routinely
filled with junk (local paths, raw text, leftover placeholders) and
which never actually fed a run.

Reuse the existing FileUpload component for file-typed fields:
- Add an opt-in controlled mode (value/onValueChange) to FileUpload so it
  can be embedded where the value lives outside a subblock; store-bound
  consumers (stt/vision/agent) are unchanged.
- Render the uploader for file fields, with a toggle to fall back to the
  raw JSON editor for power users / legacy values.
- Detect file fields by normalized type (file[]/files/file/image) so
  copilot/API-authored variants render correctly too.
- Wire editor-attached files (already uploaded, run-ready) into manual
  runs via the executor's files channel; chat/API runs still override.

Backwards compatible: the inputFormat array shape is unchanged (file
values are stored as a JSON string of run-ready file objects); legacy
free-form values open in JSON mode so nothing is lost.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx

@@ -39,9 +39,17 @@ interface FileUploadProps {
   isPreview?: boolean
   previewValue?: any | null
   disabled?: boolean
+  /**
+   * Controlled value. When `onValueChange` is provided the component reads from
+   * this prop and writes through `onValueChange` instead of the subblock store,
+   * letting it be embedded where the value lives outside a subblock (e.g. a
+   * single field inside the input-format editor).
+   */
+  value?: UploadedFile | UploadedFile[] | null
+  onValueChange?: (value: UploadedFile | UploadedFile[] | null) => void
 }
 
-interface UploadedFile {
+export interface UploadedFile {
   name: string
   path: string
   key?: string
@@ -165,9 +173,25 @@ export function FileUpload({
   isPreview = false,
   previewValue,
   disabled = false,
+  value: controlledValue,
+  onValueChange,
 }: FileUploadProps) {
   const activeSearchTarget = useActiveSearchTarget()
   const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId)
+  const isControlled = onValueChange !== undefined
+
+  /**
+   * Persists a new value. In controlled mode the caller owns persistence; in
+   * store mode we write through the subblock store and notify collaborators.
+   */
+  const commitValue = (next: UploadedFile | UploadedFile[] | null) => {
+    if (isControlled) {
+      onValueChange(next)
+      return
+    }
+    setStoreValue(next)
+    useWorkflowStore.getState().triggerUpdate()
+  }
   const [modelValue] = useSubBlockValue(blockId, 'model')
   const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([])
   const [uploadProgress, setUploadProgress] = useState(0)
@@ -191,7 +215,7 @@ export function FileUpload({
   const uploadFileMutation = useUploadWorkspaceFile()
   const queryClient = useQueryClient()
 
-  const value = isPreview ? previewValue : storeValue
+  const value = isControlled ? controlledValue : isPreview ? previewValue : storeValue
 
   const maxSizeInBytes = useMemo(() => {
     const fallback = maxSize * 1024 * 1024
@@ -413,11 +437,9 @@ export function FileUpload({
 
         const newFiles = Array.from(uniqueFiles.values())
 
-        setStoreValue(newFiles)
-        useWorkflowStore.getState().triggerUpdate()
+        commitValue(newFiles)
       } else {
-        setStoreValue(uploadedFiles[0] || null)
-        useWorkflowStore.getState().triggerUpdate()
+        commitValue(uploadedFiles[0] || null)
       }
     } catch (error) {
       logger.error(getErrorMessage(error, 'Failed to upload file(s)'), activeWorkflowId)
@@ -459,12 +481,11 @@ export function FileUpload({
       uniqueFiles.set(uploadedFile.path, uploadedFile)
       const newFiles = Array.from(uniqueFiles.values())
 
-      setStoreValue(newFiles)
+      commitValue(newFiles)
     } else {
-      setStoreValue(uploadedFile)
+      commitValue(uploadedFile)
     }
 
-    useWorkflowStore.getState().triggerUpdate()
     logger.info(`Selected workspace file: ${selectedFile.name}`, activeWorkflowId)
   }
 
@@ -501,12 +522,10 @@ export function FileUpload({
       if (multiple) {
         const filesArray = Array.isArray(value) ? value : value ? [value] : []
         const updatedFiles = filesArray.filter((f) => f.path !== file.path)
-        setStoreValue(updatedFiles.length > 0 ? updatedFiles : null)
+        commitValue(updatedFiles.length > 0 ? updatedFiles : null)
       } else {
-        setStoreValue(null)
+        commitValue(null)
       }
-
-      useWorkflowStore.getState().triggerUpdate()
     } catch (error) {
       logger.error(getErrorMessage(error, 'Failed to remove file'), activeWorkflowId)
     } finally {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import {
   Badge,
   Button,
@@ -17,9 +17,19 @@ import {
   languages,
 } from '@sim/emcn'
 import { Trash } from '@sim/emcn/icons'
+import { generateId } from '@sim/utils/id'
 import { Plus } from 'lucide-react'
 import Editor from 'react-simple-code-editor'
-import { createDefaultInputFormatField } from '@/lib/workflows/input-format'
+import {
+  createDefaultInputFormatField,
+  type InputFormatFile,
+  isFileFieldType,
+  parseInputFormatFiles,
+} from '@/lib/workflows/input-format'
+import {
+  FileUpload,
+  type UploadedFile,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -80,6 +90,66 @@ const validateFieldName = (name: string): string => name.replace(/[\x00-\x1F"\\]
 
 const jsonHighlight = (code: string): string => highlight(code, languages.json, 'json')
 
+/**
+ * Maps stored run-ready file objects to the {@link FileUpload} value shape
+ * (which keys off `path`).
+ */
+const filesToControlValue = (files: InputFormatFile[]): UploadedFile[] =>
+  files.map((file) => ({
+    name: file.name,
+    path: file.url,
+    key: file.key,
+    size: file.size,
+    type: file.type,
+  }))
+
+/**
+ * Maps a {@link FileUpload} value back to stored run-ready file objects,
+ * preserving the stable `id` of files that were already present.
+ */
+const controlValueToFiles = (
+  value: UploadedFile | UploadedFile[] | null,
+  previous: InputFormatFile[]
+): InputFormatFile[] => {
+  const uploaded = Array.isArray(value) ? value : value ? [value] : []
+  return uploaded.map((file) => {
+    const existing = previous.find(
+      (prev) => (file.key && prev.key === file.key) || prev.url === file.path
+    )
+    return {
+      id: existing?.id ?? generateId(),
+      name: file.name,
+      url: file.path,
+      key: file.key,
+      size: file.size,
+      type: file.type,
+    }
+  })
+}
+
+/**
+ * Serializes run-ready file objects into a field value string (empty when none).
+ */
+const serializeInputFormatFiles = (files: InputFormatFile[]): string =>
+  files.length > 0 ? JSON.stringify(files, null, 2) : ''
+
+/**
+ * Default editor mode for a file field: the uploader, unless the stored value is
+ * legacy free-form content (raw text or a non-file array) that only the JSON
+ * editor can represent without data loss.
+ */
+const defaultFileFieldMode = (value: string | undefined): 'upload' | 'json' => {
+  if (!value || !value.trim()) return 'upload'
+  try {
+    const parsed = JSON.parse(value)
+    if (!Array.isArray(parsed)) return 'json'
+    if (parsed.length === 0) return 'upload'
+    return parseInputFormatFiles(value).length > 0 ? 'upload' : 'json'
+  } catch {
+    return 'json'
+  }
+}
+
 export function FieldFormat({
   blockId,
   subBlockId,
@@ -101,6 +171,7 @@ export function FieldFormat({
   const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
   const nameOverlayRefs = useRef<Record<string, HTMLDivElement>>({})
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+  const [fileFieldModes, setFileFieldModes] = useState<Record<string, 'upload' | 'json'>>({})
 
   const inputController = useSubBlockInput({
     blockId,
@@ -480,12 +551,14 @@ export function FieldFormat({
       )
     }
 
-    if (field.type === 'file[]') {
+    if (isFileFieldType(field.type)) {
+      const mode = fileFieldModes[field.id] ?? defaultFileFieldMode(field.value)
+      const currentFiles = parseInputFormatFiles(field.value)
       const lineCount = fieldValue.split('\n').length
       const gutterWidth = calculateGutterWidth(lineCount)
 
-      const renderLineNumbers = () => {
-        return Array.from({ length: lineCount }, (_, i) => (
+      const renderLineNumbers = () =>
+        Array.from({ length: lineCount }, (_, i) => (
           <div
             key={i}
             className='font-medium font-mono text-[var(--text-muted)] text-xs'
@@ -494,26 +567,60 @@ export function FieldFormat({
             {i + 1}
           </div>
         ))
-      }
 
       return (
-        <Code.Container className='min-h-[120px]'>
-          <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
-          <Code.Content paddingLeft={`${gutterWidth}px`}>
-            <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
-              {
-                '[\n  {\n    "data": "<base64>",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
+        <div className='flex flex-col gap-1.5'>
+          <div className='flex justify-end'>
+            <Button
+              type='button'
+              variant='ghost'
+              onClick={() =>
+                setFileFieldModes((prev) => ({
+                  ...prev,
+                  [field.id]: mode === 'upload' ? 'json' : 'upload',
+                }))
               }
-            </Code.Placeholder>
-            <Editor
-              value={fieldValue}
-              onValueChange={getEditorValueChangeHandler(field.id)}
-              highlight={jsonHighlight}
               disabled={isReadOnly}
-              {...getCodeEditorProps({ disabled: isReadOnly })}
+              className='h-auto p-0 text-[var(--text-muted)] text-xs hover-hover:text-[var(--text-body)]'
+            >
+              {mode === 'upload' ? 'Enter JSON manually' : 'Use file uploader'}
+            </Button>
+          </div>
+          {mode === 'upload' ? (
+            <FileUpload
+              blockId={blockId}
+              subBlockId={subBlockId}
+              multiple
+              disabled={isReadOnly}
+              value={filesToControlValue(currentFiles)}
+              onValueChange={(next) =>
+                updateField(
+                  field.id,
+                  'value',
+                  serializeInputFormatFiles(controlValueToFiles(next, currentFiles))
+                )
+              }
             />
-          </Code.Content>
-        </Code.Container>
+          ) : (
+            <Code.Container className='min-h-[120px]'>
+              <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+              <Code.Content paddingLeft={`${gutterWidth}px`}>
+                <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
+                  {
+                    '[\n  {\n    "data": "<base64>",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
+                  }
+                </Code.Placeholder>
+                <Editor
+                  value={fieldValue}
+                  onValueChange={getEditorValueChangeHandler(field.id)}
+                  highlight={jsonHighlight}
+                  disabled={isReadOnly}
+                  {...getCodeEditorProps({ disabled: isReadOnly })}
+                />
+              </Code.Content>
+            </Code.Container>
+          )}
+        </div>
       )
     }
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -13,6 +13,11 @@ import { buildTraceSpans } from '@/lib/logs/execution/trace-spans/trace-spans'
 import { processStreamingBlockLogs } from '@/lib/tokenization'
 import { DirectUploadError, runUploadStrategy } from '@/lib/uploads/client/direct-upload'
 import type { ExecutionPausedData } from '@/lib/workflows/executor/execution-events'
+import {
+  type InputFormatFile,
+  isFileFieldType,
+  parseInputFormatFiles,
+} from '@/lib/workflows/input-format'
 import {
   extractTriggerMockPayload,
   selectBestTrigger,
@@ -948,13 +953,23 @@ export function useWorkflowExecution() {
       selectedOutputs = chatStore.getState().getSelectedWorkflowOutput(activeWorkflowId)
     }
 
-    // Helper to extract test values from inputFormat subblock
+    /**
+     * Extracts test values from the inputFormat subblock. File fields are
+     * excluded here — they flow through the dedicated `files` channel (see
+     * extractFilesFromInputFormat) rather than as named structured inputs.
+     */
     const extractTestValuesFromInputFormat = (inputFormatValue: any): Record<string, any> => {
       const testInput: Record<string, any> = {}
 
       if (Array.isArray(inputFormatValue)) {
         inputFormatValue.forEach((field: any) => {
-          if (field && typeof field === 'object' && field.name && field.value !== undefined) {
+          if (
+            field &&
+            typeof field === 'object' &&
+            field.name &&
+            field.value !== undefined &&
+            !isFileFieldType(field.type)
+          ) {
             testInput[field.name] = coerceValue(field.type, field.value)
           }
         })
@@ -963,6 +978,20 @@ export function useWorkflowExecution() {
       return testInput
     }
 
+    /**
+     * Collects editor-attached files from file-typed inputFormat fields. These
+     * are already uploaded to workspace storage, so they pass straight to the
+     * executor's file channel (normalizeStartFile) without a re-upload.
+     */
+    const extractFilesFromInputFormat = (inputFormatValue: any): InputFormatFile[] => {
+      if (!Array.isArray(inputFormatValue)) return []
+      return inputFormatValue.flatMap((field: any) =>
+        field && typeof field === 'object' && isFileFieldType(field.type)
+          ? parseInputFormatFiles(field.value)
+          : []
+      )
+    }
+
     // Determine start block and workflow input based on execution type
     let startBlockId: string | undefined
     let finalWorkflowInput = workflowInput
@@ -1054,6 +1083,10 @@ export function useWorkflowExecution() {
       ) {
         const inputFormatValue = selectedTrigger.subBlocks?.inputFormat?.value
         const testInput = extractTestValuesFromInputFormat(inputFormatValue)
+        const inputFiles = extractFilesFromInputFormat(inputFormatValue)
+        if (inputFiles.length > 0) {
+          testInput.files = inputFiles
+        }
         if (Object.keys(testInput).length > 0) {
           finalWorkflowInput = testInput
         }