How do file input fields work in react with tan stack form?

[jonathan-hildebrandt]

Hi,

I'm currently trying to implement a form in react using shadcn/ui with tanstack form.

Can't really find docs for this use case. Any ideas?

[apoorva-01]

File inputs are the one case where you don't bind value. The browser won't let you set a file input's value programmatically (security), so it's read-only from the DOM side. That means one-way binding: you grab the files in onChange and never pass value back in.

const form = useForm({
  defaultValues: { avatar: null as File | null },
})

<form.Field
  name="avatar"
  children={(field) => (
    <input
      type="file"
      onChange={(e) => field.handleChange(e.target.files?.[0] ?? null)}
    />
  )}
/>

The bits that trip people up:

• No value prop on the input. That's the whole gotcha.
• e.target.files?.[0] for a single file, or store the whole e.target.files (a FileList) if you set multiple.
• Your validators receive the File object, so size/type checks live there like any other field.

With shadcn's <Input type="file" /> it's identical, since that's just a styled native input. Wire onChange the same way and leave value off.

There's an older thread with the same pattern for the Angular adapter if you want another angle: #679

[MILLERMARRU]

There's genuinely no dedicated example for this in the docs today, so worth spelling out the full pattern. The one hard constraint (this is a browser thing, not a TanStack Form limitation): a file input's value can only ever be set by the user through the native file picker, the DOM will simply ignore any attempt to set it programmatically. So the field needs to be treated as one-way, read from e.target.files, never bound back through value.

<form.Field name="avatar">
  {(field) => (
    <input
      type="file"
      accept="image/*"
      onBlur={field.handleBlur}
      onChange={(e) => field.handleChange(e.target.files?.[0])}
    />
  )}
</form.Field>

For multiple files, field.handleChange(Array.from(e.target.files ?? [])) works the same way, just storing an array instead of a single File.

The other thing this pattern runs into: clearing the field in code (on form.reset(), or after a successful upload) doesn't clear what the browser visually shows in the file input, since there's still no way to set value back to empty programmatically either. The common workaround is keying the input so React remounts a fresh one whenever it needs to visually reset:

const [inputKey, setInputKey] = useState(0)

// ...

<input
  key={inputKey}
  type="file"
  onChange={(e) => field.handleChange(e.target.files?.[0])}
/>

// wherever the reset happens:
form.reset()
setInputKey((k) => k + 1)