Skip to content

useActionState with form containing file input receives missmatched FormData #93822

@DarkendHall

Description

@DarkendHall

Link to the code that reproduces this issue

https://github.com/DarkendHall/next_16.2.6_file_input_form_issues

To Reproduce

  1. Run npm run dev
  2. Navigate to http://localhost:3000
  3. Type something into the textarea
  4. Select a file
  5. Open the console
  6. Submit the form, all looks good, FormData matches.
  7. Resubmit the form and the formdata on the client side and the server side will be different

Current vs. Expected behavior

I expect the FormData that reaches the server to match the one on the client side and also be back to the client.
Instead every other time the form is submitted only the attachments field seems to reach the server while being present on the client side.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32401
  Available CPU cores: 20
Binaries:
  Node: 24.15.0
  npm: 11.12.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.3.0-canary.19 // Latest available version is detected (16.3.0-canary.19).
  eslint-config-next: N/A
  react: 19.2.6
  react-dom: 19.2.6
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Server Actions

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Working as expected in:

  • 16.2.4
  • 16.3.0-canary.11

Not working as expected in:

  • 16.2.5
  • 16.2.6
  • 16.3.0-canary.12 (seems this is the version where it broke)

Noticed CI tests failing when dependabot tried bumping the next version to 16.2.6 from 16.2.4

Tested with Chrome 148.0.7778.168 64-bit

Metadata

Metadata

Assignees

Labels

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions