Cannot set `form` field and immediately submit

[hyunbinseo]

Describe the bug

Invalid type: Expected File but received undefined

[[1,2],{"file":-1},{}] # Request Payload

<script lang="ts">
  import { uploadBinary } from './upload.remote';

  let submit: HTMLButtonElement;
</script>

<form {...uploadBinary} enctype="multipart/form-data">
  <input {...uploadBinary.fields.file.as('file')} hidden />
  <button bind:this={submit} hidden>Submit</button>
</form>

<button
  type="button"
  onclick={() => {
  uploadBinary.fields.set({ file: new File([], 'file.txt') });
  submit.click();
  }}>Set Fields and Immediately Submit</button
>

<ul>
  {#each uploadBinary.fields.allIssues() as issue}
  <li>{issue.message}</li>
  {/each}
</ul>

Reproduction

https://github.com/hyunbinseo/svelte-kit-15009

System Info

System:
  OS: Windows 11 10.0.26200
  CPU: (8) x64 Intel(R) Core(TM) Ultra 7 258V
  Memory: 2.27 GB / 31.48 GB
Binaries:
  Node: 24.11.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\14828_1764471146040\node.EXE
  Yarn: 1.22.22 - C:\Users\hyunb\AppData\Local\fnm_multishells\14828_1764471146040\yarn.CMD
  npm: 11.6.1 - C:\Users\hyunb\AppData\Local\fnm_multishells\14828_1764471146040\npm.CMD
  pnpm: 10.24.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\14828_1764471146040\pnpm.CMD
  Deno: 2.4.0 - C:\Users\hyunb\.deno\bin\deno.EXE
Browsers:
  Chrome: 142.0.7444.176
  Edge: Chromium (140.0.3485.54)
  Firefox: 145.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
npmPackages:
  @sveltejs/adapter-auto: ^7.0.0 => 7.0.0
  @sveltejs/kit: ^2.48.5 => 2.49.0
  @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
  svelte: ^5.43.8 => 5.45.2
  vite: ^7.2.2 => 7.2.4

Severity

annoyance

Additional Information

No response

[sillvva]

Adding an await tick() between setting the field and submitting the form seems to work. Probably because the form field needs to be updated in the UI before the form is submitted.

https://stackblitz.com/edit/sveltekit-308957-8ktcalyf-eqzteeza?file=src%2Froutes%2Ftest.remote.ts,src%2Froutes%2F%2Bpage.svelte

[hyunbinseo]

That seems to be the answer.

• await settled() was a bit flaky
• await tick() seems stable

Maybe I should update the issue title.

This happens on non-multipart/form-data form with a single text input as well.

Is await tick() then clicking on a submitter the advised way of doing programmatic form submit as-of-now?

[sillvva]

I would assume so. Without tick(), you've updated the internal $state, but the UI has not yet updated. If the form input's value has not yet been updated when the form is submitted, then the value submitted will be empty.

[hyunbinseo]

I guess my vanilla JavaScript habits are haunting me.

A tick() should be waited for the Svelte form fields to be updated.

I have updated the title and will close this issue, since to be an expected behavior.