LazyFile not usable with zod z.file() validator in remote "form" function data

[mattismoel]

Describe the bug

I am testing out remote funcions 'form' function with an input zod schema for validating the form data like this:

//auth.ts
export const registerForm = z
	.object({
		email: z.email(),
		firstName: z.string().nonempty(),
		lastName: z.string().nonempty(),
		password: z.string().min(MINIMUM_PASSWORD_LENGTH).max(MAXIMUM_PASSWORD_LENGTH),
		passwordConfirm: z.string(),
		avatar: z.file().max(5_000_000).mime(["image/png", "image/jpeg"])
	})
	.refine((data) => data.password === data.passwordConfirm, "Passwords do not match");

Which is used like this:

//auth.remote.ts
import { form, getRequestEvent, query } from "$app/server";
import { registerForm, userSchema } from "./auth";
import { id } from "$lib/model";

export const register = form(registerForm, async (form) => {
	const { locals } = getRequestEvent();
	await locals.pb.collection("users").create(form);
});

<!-- page.svelte -->
<script lang="ts">
	import FormField from "$lib/components/FormField.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import { register } from "$lib/features/auth.remote";

	const { avatar, ...rest } = register.fields;
</script>

<main class="flex min-h-svh items-center justify-center">
	<form {...register} enctype="multipart/form-data">
    	        <FormField issues={avatar.issues()}>
    		        <Input {...avatar.as("file")} />
    	        </FormField>
                <Button>Submit</Button>
	</form>
</main>

However this results in the following zod error: "Invalid input: expected file, received LazyFile"

I can see in the SvelteKit source code that this class LazyFile is not exported either, so i would not even be able to do something like avatar: z.instanceof(LazyFile).

If I instead type it as avatar: z.any() (which I don't like), the resulting form data property in the form function, is still LazyFile, which stuff like PocketBase unfortunatly also errors on, giving me errors like:

{
  "data": {
    "avatar": "Invalid new files: [[object Object]]."
  },
  "raw": "avatar: Invalid new files: [[object Object]].."
}

Would love to have this fixed, or someone guide me in another direction, cause these remote functions are actually awesome!

Any temporary workarounds?

Reproduction

• Create a zod schema with a z.file() field
• Use that schema in a remote form function as the form data schema
• Success - validation errors for the input file...

Logs

System Info

System:
    OS: Linux 6.17 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 4.00 GB / 15.56 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    bun: 1.2.21 - /usr/local/bin/bun
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.0 => 7.0.0 
    @sveltejs/kit: ^2.49.1 => 2.49.1 
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1 
    svelte: ^5.45.4 => 5.45.4 
    vite: ^7.2.6 => 7.2.6

Severity

annoyance

Additional Information

No response

[Rich-Harris]

I can't reproduce this, it works fine for me. The thing that's passed into the validator isn't actually a LazyFile, but a Proxy whose target is a LazyFile, and which implements getPrototypeOf such that thing instanceof File passes. Please provide a repro

[mattismoel]

Hi Rich! That's super weird. If I initialise a new svelte project I cannot reproduce it either, but the bug keeps showing up in the project I am working on on any form I do with a file input.

It works flawlessly in a new project, and I am using all the same package versions and svelte.config.js configuration:

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter(),
		experimental: {
			remoteFunctions: true
		},
	},
	compilerOptions: {
		experimental: {
			async: true
		}
	}
};

export default config;

In other words I can reproduce it as many times as I like in my actual project, but not in a new one.

The only difference, as far as I can see, is that my actual project is dockerized behind a caddy reverse proxy like so:

localhost:443 {
	tls internal
	reverse_proxy frontend:5173
}

In the following docker compose setup:

services:
  frontend:
    image: oven/bun:1
    working_dir: /app
    volumes:
      - ./frontend:/app
      - /app/node_modules
    command: sh -c "bun install && bun run dev -- --host 0.0.0.0"
    ports:
      - 5173:5173
    environment:
      - NODE_ENV=development
  caddy:
    image: caddy:latest
    ports:
      - 80:80
      - 443:443
      - 443:443/udp
    volumes:
      - ./Caddyfile.dev:/etc/caddy/Caddyfile
    depends_on:
      - frontend
      - backend

volumes:
  node_modules:

But I cannot imagine that has anything to do with it?

If I can do anything remotely helpful (no pun intended), please let me know, and sorry for not being able to provide a repro!

[mattismoel]

For what it's worth, I also attempted with Valibot, and got similar issues, but of course a slighty different default error message. Something like "expected file, got Blob" if I recall...

[mattismoel]

Interestingly I just attempted to run the svelte project outside of docker/HTTPS on standard HTTP localhost, where the issue seems to be gone. I don't know what to say really...

[Rich-Harris]

Super weird. The only thing I can think of is that somehow a polyfill is getting involved somewhere, such that SvelteKit and Zod/Valibot have a different version of File for the instanceof check? But it's hard to imagine how that could only appear under the conditions you describe. We might have to wait for someone else to come along and report the same thing...

[mattismoel]

Right. I also find it interesting if this is the first time this has occurred - it seems that the LazyFile implementation has been around for quite some time, and I would assume many do containerised svelte seupts.

Also worth noting: Even when just exposing the containers' host ports to localhost (ie. 0.0.0.0:5173 to localhost:5173), the issue still persists when hitting the svelte project on http://localhost:5173 (no HTTPS). Only when completely going outside of Docker (manually doing npm run dev in terminal), does it bug out.

Tested on both my Linux machine and my M1 MacBook.