Cannot upload `File` using `command` remote function

[hyunbinseo]

Describe the bug

When trying to upload File using the remote function's command() API, the following error message is thrown:

DevalueError: Cannot stringify arbitrary non-POJOs

I wasn't expecting this because devalue is only mentioned in the query section.

This is expected since the page (layout) server load has the same restriction.

However:

• The form API supports file (and even streaming of it)
• The command API does not emphasize the difference from above

I guess I was expecting the command API to use multipart/form-data for the POST request.

Because our form contains a file input, we’ve added an enctype="multipart/form-data" attribute.

I would at prefer a better error message. (e.g. command does not support arbitrary non-POJOs)

Reproduction

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

<button
  type="button"
  onclick={async () => {
    await uploadBinary({ file: new File([], 'blank.txt') });
  }}>Upload Text</button
>

<button
  type="button"
  onclick={async () => {
    await uploadString({ string: 'Hello, World!' });
  }}>Upload String</button
>

import { command } from '$app/server';
import { file, object, string } from 'valibot';

export const uploadBinary = command(
  object({ file: file() }), //
  (obj) => console.log(obj)
);

export const uploadString = command(
  object({ string: string() }), //
  (obj) => console.log(obj)
);

Logs

System Info

System:
  OS: Windows 11 10.0.26200
  CPU: (8) x64 Intel(R) Core(TM) Ultra 7 258V
  Memory: 4.37 GB / 31.48 GB
Binaries:
  Node: 24.11.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\31224_1764425282727\node.EXE
  npm: 11.6.1 - C:\Users\hyunb\AppData\Local\fnm_multishells\31224_1764425282727\npm.CMD
  pnpm: 10.23.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\31224_1764425282727\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.43.15
  vite: ^7.2.2 => 7.2.4

Severity

annoyance

Additional Information

No response

[hyunbinseo]

Same Devalue error is thrown when trying to set an input value to File:

DevalueError: Cannot stringify arbitrary non-POJOs

uploadBinary.fields.set({ file: new File([], 'file.txt') });

Workaround: use onMount and only run the logic in the browser

[hyunbinseo]

Workaround

Use the form remote function. Programmatically set the fields and then submit it.

Note that

• the input type="file" should be placed inside the <form> even though its programmatic
• the form should not be submitted using form.submit() - use button.click() instead

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

  let btn: HTMLButtonElement;

  onMount(() => {
    uploadBinary.fields.set({ file: new File([], 'file.txt') });
    setTimeout(() => btn.click(), 2000);
  });
</script>

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

Currently, the form cannot be submitted right after setting the fields:

• Cannot set form field and immediately submit #15009