diff --git a/documentation/docs/02-template-syntax/08-bindings.md b/documentation/docs/02-template-syntax/08-bindings.md index 08559115997b..cabbc4596948 100644 --- a/documentation/docs/02-template-syntax/08-bindings.md +++ b/documentation/docs/02-template-syntax/08-bindings.md @@ -1,4 +1,4 @@ ---- +--- title: Bindings --- @@ -42,14 +42,14 @@ Numeric input values are coerced; even though `input.value` is a string as far a ``` -On `` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. +On `` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. Currently `FileList` objects cannot be constructed directly, so you need to create a new [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object and get `files` from there. ```svelte @@ -58,6 +58,10 @@ On `` elements with `type="file"`, you can use `bind:files` to get the [` ``` +`FileList` objects also cannot be modified, so if you want to e.g. delete a single file from the list, you need to create a new `DataTransfer` object and add the files you want to keep. + +> `DataTransfer` may not be available in server-side JS runtimes. Leaving the state that is bound to `files` uninitialized prevents potential errors if components are server-side rendered. + If you're using `bind:` directives together with `on` event attributes, the binding will always fire before the event attribute. ```svelte