search

sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.72k stars 4.23k forks source link

Svelte 5: input bind:files has visually no two-way-binding #13156

Closed dm-de closed 1 month ago

dm-de commented 1 month ago

Describe the bug

DOC: https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-bind-files-values-can-only-be-null-undefined-or-filelist

bind:files is now a two-way binding. As such, when setting a value, it needs to be either falsy (null or undefined) or of type FileList.

But... nothing happen visually if I set files to null Internally, here is elem.value = '' required, or something

Reproduction

Here is not working example: LINK

Here is working example with workaround: LINK

Logs

No response

System Info

5.0.0-next.244

Severity

annoyance

paoloricciuti commented 1 month ago

The problem is that doing

input.files = null;

doesn't error but also doesn't reset the files.

This either should be a documentation issue (we should specify that input.files = null doesn't actually empty the input or we could actually make this behaviour work.

paoloricciuti commented 1 month ago

And btw if you want you can also reset the files like this

<button onclick={() => files = new DataTransfer().files}>Reset</button>
brunnerh commented 1 month ago

we could actually make this behaviour work.

That would diverge from the default behavior defined in the spec. Not sure if it matters that much in this case, though.

Some examples in the docs on how to use DataTransfer would be nice, I could also potentially help with that.

paoloricciuti commented 1 month ago

That would diverge from the default behavior defined in the spec.

Yeah that's why i didn't open a PR for it...i feel like that would teach wrong JS and it feels wrong. Let me label this as documentation and open a PR for it and we can discuss there is we want the "kinda wrong" behaviour.

paoloricciuti commented 1 month ago

open a PR for it and we can discuss there is we want the "kinda wrong" behaviour.

Oh actually scratch this...the docs we have right now is just mention this in the breaking changes. I'll keep the issue open for when we write the docs for svelte 5 tho.

dm-de commented 1 week ago

https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode

bind:files values can only be null, undefined or FileList

As I understand, this is wrong

brunnerh commented 1 week ago

It's technically correct, according to the spec null just does nothing, though.

There previously was more documentation on how to use bind:files on the preview site docs, ideally those would be restored somewhere. (@dummdidumm?)