Svelte 5: bind files no work

[zhihengGet]

Describe the bug

<script>
		let de =  $state([])
</script>


<input type="file" bind:files={de}/>

give error Failed to set the 'files' property on 'HTMLInputElement': Failed to convert value to 'FileList'.

Reproduction

https://svelte-5-preview-ajextqbos-svelte.vercel.app/#H4sIAAAAAAAACo2RwWrDMAyGX0WIHRoWmm3HLA6MvUJvdQ-u44BZLJtYHgyTdx92WAvbZQcfLKH___Qr42wXE7E_ZyTlDPb4FgK2yF-hfOKnWdhgi9GnVZfKEPVqA4-SJC-GQftEDAIeIis2h6fmtXSsC35lyJOZVVoYVITTBvPqHUg8du_eBU-G-OW4O0gsU-XNiTRbT2BJr8YZ4kMDuXZ593oU8FxNNklDd8eh4QTdKGm4JmZP4EkvVn-IfFPaKnWtxh5ylasi-8SILTo_2dmaCXtek9naWyx35P-ms-ejQMBPOOdL8wtZ0mApJIaiKGS9hkS4Wpr6ehmR1VaW-ot22b4B2RVNjb0BAAA=

Logs

No response

System Info

-

Severity

annoyance

[Prinzhorn]

The error message is very clear. Try using $state(null) as "empty" instead of an [] / Array (which is not a FileList).

[brunnerh]

You can also use new DataTransfer().files which returns an empty FileList.

DataTransfer is also how you can clear or modify the files. FileList objects are unfortunately read-only and do not have an accessible constructor. Setting the value to null or undefined does not affect the input.

Example

[zhihengGet]

oh ok, this used to work with v4 and i think datatransfer does not work w ith SSR

[brunnerh]

I would recommend initializing to undefined or null when using SSR.

Of course you then have to be more careful when accessing the variable, e.g. use a fallback on iteration or guard with #if.

{#each files ?? [] as file}...