From 368cb21a02e4129f3024926bd1e0d6c9ac083cb4 Mon Sep 17 00:00:00 2001 From: Luca Bonavita Date: Mon, 13 Jul 2020 20:35:41 +0100 Subject: [PATCH] Add docs and example for `bind:files` Closes #4386 --- site/content/docs/02-template-syntax.md | 17 ++++++++ .../05-bindings/12-file-inputs/App.svelte | 40 ++++++++++++++++++ .../05-bindings/12-file-inputs/meta.json | 3 ++ .../examples/thumbnails/file-inputs.jpg | Bin 0 -> 13168 bytes 4 files changed, 60 insertions(+) create mode 100644 site/content/examples/05-bindings/12-file-inputs/App.svelte create mode 100644 site/content/examples/05-bindings/12-file-inputs/meta.json create mode 100644 site/static/examples/thumbnails/file-inputs.jpg diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 070dc46687..63bc9f19e7 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -544,6 +544,23 @@ Numeric input values are coerced; even though `input.value` is a string as far a ``` +##### File input bindings + +--- + +On `` elements with `type="file"`, you can use `bind:files` to get the [list of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). + +```sv + + +``` + ##### Binding ` + + + + +{#if files} +

Selected files:

+{#each Array.from(files) as file} +

{file.name} ({file.size} bytes)

+{/each} +{/if} + + diff --git a/site/content/examples/05-bindings/12-file-inputs/meta.json b/site/content/examples/05-bindings/12-file-inputs/meta.json new file mode 100644 index 0000000000..92d0587e87 --- /dev/null +++ b/site/content/examples/05-bindings/12-file-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "File inputs" +} diff --git a/site/static/examples/thumbnails/file-inputs.jpg b/site/static/examples/thumbnails/file-inputs.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5996347885cc246aafb4739e97199cacfaa60e3d GIT binary patch literal 13168 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 E4`fB@0{{R3 literal 0 HcmV?d00001