From 8f17d6c78c7de1af54b8eb5ccffc68c78708d26b Mon Sep 17 00:00:00 2001 From: Luca Bonavita Date: Wed, 12 Aug 2020 21:05:59 +0100 Subject: [PATCH] docs: document `bind:files` (#5141) --- site/content/docs/02-template-syntax.md | 15 +++++++ .../05-bindings/05-file-inputs/App.svelte | 37 ++++++++++++++++++ .../05-bindings/05-file-inputs/meta.json | 3 ++ .../App.svelte | 0 .../meta.json | 0 .../App.svelte | 0 .../meta.json | 0 .../App.svelte | 0 .../meta.json | 0 .../App.svelte | 0 .../meta.json | 0 .../App.svelte | 0 .../meta.json | 0 .../{10-bind-this => 11-bind-this}/App.svelte | 0 .../{10-bind-this => 11-bind-this}/meta.json | 0 .../App.svelte | 0 .../Keypad.svelte | 0 .../meta.json | 0 .../examples/thumbnails/file-inputs.jpg | Bin 0 -> 2751 bytes 19 files changed, 55 insertions(+) create mode 100644 site/content/examples/05-bindings/05-file-inputs/App.svelte create mode 100644 site/content/examples/05-bindings/05-file-inputs/meta.json rename site/content/examples/05-bindings/{05-select-bindings => 06-select-bindings}/App.svelte (100%) rename site/content/examples/05-bindings/{05-select-bindings => 06-select-bindings}/meta.json (100%) rename site/content/examples/05-bindings/{06-multiple-select-bindings => 07-multiple-select-bindings}/App.svelte (100%) rename site/content/examples/05-bindings/{06-multiple-select-bindings => 07-multiple-select-bindings}/meta.json (100%) rename site/content/examples/05-bindings/{07-each-block-bindings => 08-each-block-bindings}/App.svelte (100%) rename site/content/examples/05-bindings/{07-each-block-bindings => 08-each-block-bindings}/meta.json (100%) rename site/content/examples/05-bindings/{08-media-elements => 09-media-elements}/App.svelte (100%) rename site/content/examples/05-bindings/{08-media-elements => 09-media-elements}/meta.json (100%) rename site/content/examples/05-bindings/{09-dimensions => 10-dimensions}/App.svelte (100%) rename site/content/examples/05-bindings/{09-dimensions => 10-dimensions}/meta.json (100%) rename site/content/examples/05-bindings/{10-bind-this => 11-bind-this}/App.svelte (100%) rename site/content/examples/05-bindings/{10-bind-this => 11-bind-this}/meta.json (100%) rename site/content/examples/05-bindings/{11-component-bindings => 12-component-bindings}/App.svelte (100%) rename site/content/examples/05-bindings/{11-component-bindings => 12-component-bindings}/Keypad.svelte (100%) rename site/content/examples/05-bindings/{11-component-bindings => 12-component-bindings}/meta.json (100%) 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 6d0847eb41..cfc7d7ba7a 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -544,6 +544,21 @@ 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). + +```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/05-file-inputs/meta.json b/site/content/examples/05-bindings/05-file-inputs/meta.json new file mode 100644 index 0000000000..92d0587e87 --- /dev/null +++ b/site/content/examples/05-bindings/05-file-inputs/meta.json @@ -0,0 +1,3 @@ +{ + "title": "File inputs" +} diff --git a/site/content/examples/05-bindings/05-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte similarity index 100% rename from site/content/examples/05-bindings/05-select-bindings/App.svelte rename to site/content/examples/05-bindings/06-select-bindings/App.svelte diff --git a/site/content/examples/05-bindings/05-select-bindings/meta.json b/site/content/examples/05-bindings/06-select-bindings/meta.json similarity index 100% rename from site/content/examples/05-bindings/05-select-bindings/meta.json rename to site/content/examples/05-bindings/06-select-bindings/meta.json diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte similarity index 100% rename from site/content/examples/05-bindings/06-multiple-select-bindings/App.svelte rename to site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte diff --git a/site/content/examples/05-bindings/06-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/07-multiple-select-bindings/meta.json similarity index 100% rename from site/content/examples/05-bindings/06-multiple-select-bindings/meta.json rename to site/content/examples/05-bindings/07-multiple-select-bindings/meta.json diff --git a/site/content/examples/05-bindings/07-each-block-bindings/App.svelte b/site/content/examples/05-bindings/08-each-block-bindings/App.svelte similarity index 100% rename from site/content/examples/05-bindings/07-each-block-bindings/App.svelte rename to site/content/examples/05-bindings/08-each-block-bindings/App.svelte diff --git a/site/content/examples/05-bindings/07-each-block-bindings/meta.json b/site/content/examples/05-bindings/08-each-block-bindings/meta.json similarity index 100% rename from site/content/examples/05-bindings/07-each-block-bindings/meta.json rename to site/content/examples/05-bindings/08-each-block-bindings/meta.json diff --git a/site/content/examples/05-bindings/08-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte similarity index 100% rename from site/content/examples/05-bindings/08-media-elements/App.svelte rename to site/content/examples/05-bindings/09-media-elements/App.svelte diff --git a/site/content/examples/05-bindings/08-media-elements/meta.json b/site/content/examples/05-bindings/09-media-elements/meta.json similarity index 100% rename from site/content/examples/05-bindings/08-media-elements/meta.json rename to site/content/examples/05-bindings/09-media-elements/meta.json diff --git a/site/content/examples/05-bindings/09-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte similarity index 100% rename from site/content/examples/05-bindings/09-dimensions/App.svelte rename to site/content/examples/05-bindings/10-dimensions/App.svelte diff --git a/site/content/examples/05-bindings/09-dimensions/meta.json b/site/content/examples/05-bindings/10-dimensions/meta.json similarity index 100% rename from site/content/examples/05-bindings/09-dimensions/meta.json rename to site/content/examples/05-bindings/10-dimensions/meta.json diff --git a/site/content/examples/05-bindings/10-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte similarity index 100% rename from site/content/examples/05-bindings/10-bind-this/App.svelte rename to site/content/examples/05-bindings/11-bind-this/App.svelte diff --git a/site/content/examples/05-bindings/10-bind-this/meta.json b/site/content/examples/05-bindings/11-bind-this/meta.json similarity index 100% rename from site/content/examples/05-bindings/10-bind-this/meta.json rename to site/content/examples/05-bindings/11-bind-this/meta.json diff --git a/site/content/examples/05-bindings/11-component-bindings/App.svelte b/site/content/examples/05-bindings/12-component-bindings/App.svelte similarity index 100% rename from site/content/examples/05-bindings/11-component-bindings/App.svelte rename to site/content/examples/05-bindings/12-component-bindings/App.svelte diff --git a/site/content/examples/05-bindings/11-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte similarity index 100% rename from site/content/examples/05-bindings/11-component-bindings/Keypad.svelte rename to site/content/examples/05-bindings/12-component-bindings/Keypad.svelte diff --git a/site/content/examples/05-bindings/11-component-bindings/meta.json b/site/content/examples/05-bindings/12-component-bindings/meta.json similarity index 100% rename from site/content/examples/05-bindings/11-component-bindings/meta.json rename to site/content/examples/05-bindings/12-component-bindings/meta.json diff --git a/site/static/examples/thumbnails/file-inputs.jpg b/site/static/examples/thumbnails/file-inputs.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d302633f6b6fd370594d1d116dfb0b6a8adbd436 GIT binary patch literal 2751 zcmdT^XH?S(690z)O7jRIz*3Z@iBUkMgie+sC`DRm2`WtzB=jnRaCdMhf}*epxPS>I z2@s@{grdvAVp!>+1Oieep$SrS6#MnSvAAz*NI3O+Etq}T-cqjMkzJb_4Q~U7v zF#kAAK%n1mBp`@{gbYkZOIB9P&s^W!@BhZ(O8{~l=mC1bAPB$*0f8Z)!+!&E00;ns zjsScGm|s8;#CPn-X(0}Pz+gZ?h+l{gEcBlM5Z{p-A}9g<_5$oXCs$Mop>$AEN!RDt z#qfV*Kd-HOFQu)lg3vR!@QsYBf3V6q8W;kY0sCM3 z`70~J(r_{%N^+Y`*5Q$|Vzz^n0$h*lNo$U5t$|+9Vk+{mVyV52#tdYzrZ;(!4fcsx zyQ(=LCz2NwACo+eVYu`*2>!UpF7ht<6Ox418eOh%xx8pMEDVC-^enhC)ghQ94gBXB zb}|MK6qvNF-eu>O1zkotXQXCH_DMf?uUHW9O4KKMrFD8=b}^^E<)RrK#arNzmB_TQ z;K%Kk=r;M4w5QBPC+Mkk=%8y;(|zG`U9Z=~;PkAybn>Iqzb}^`1^vnXs>%l=H+?oW zk`4iuaNEqGzO9YDFR)3tFJHt-8Fe<0shr*apqoT67$n)FxQ}G30 zUD-bFu1z;_>L~^f6`B$-vLC*Dy1_+*$~jj59n>Q$Kaqvi*bhbVpy9 zAw7Pc{C9)d2vY;utXofhkQCL>Nqp7h>71qS4JO7moMlB9aK>3PyD3kIth^u-smFoC zLkXff{deFrcLVm6eE#eX9r%93TeWw2mK9N_KchxP%leS-h0~0Z2k>)pYX6$#l?SyY z7O2(fV9s(Vg~_GO-WqtVX8NSp2pYP6jLlAqjaC3%e6-Xr^Fj zpf|#-N{D|?p=5kIKn7payx>*+#Lf2M`^oi2ciFxrq(Lv|^d)u^d0cz! z)$f(UU0Im0)D_w3qR8@Q-vkfyYFg6~wgYURy4P~Grnt1dF&4RiHb;&U?IEs!y4C~`8c_l zC5t00)GA5-d4;VzRe{I%2ubkDtOanyCN_ZCtJ;Jp)0WS?ROy)$r0W#^paLm{-)`>; zEiW4z8@C+asm%;l(@s|RSiOubpj(k9RWSu0M_856dIFa5p&3Y;81xPoK^ z#`Ah?&Er|)IFG?MonGY5;sFt9jx2tN3g-op)mMD&RI2P2O>sG&j*bvYqLA<3;*4Hd zvZMtY(yROX<75&0Co9_O5T@3zoc^}E6ezXdrWjymd8^V*f4%uN1^1LTK|D|W>~2~T zeZEt{_*|NlvT`PAv{7H_G@wX#+DdIAJjB&cUhu4WFmI-Krqh1{%beIJ8r&OPi#9~X z&YPJ&QcTKR!4f?7Yh(_A%=$y17|nafNS7+F9Y%ThG@{@=Jw!i=OXZYB@;@WOU&<5@ zA#}=jRfdGxGGrMhMf=yXjLn{c2@Py+wdA?dGOH0QCT$AS$}92a`++exrbXYU@GX;i zbLrMpnG9u=dm0J~puq#b|M{;H{1WcPIu+5<)71;}3xbC+l@`Q=-rgsuX5CaCZ)FOc zG;i7om1{#rz?v)LI6Uy9>Na%uhNFBco;QuSoxE^1)NPY7a_n35?dHts5(D8$R%^%( msK;%(dOntP;!jWJ+ZMOFDq$@GdEnsBhx|I_Usy3aocI;?`dRb< literal 0 HcmV?d00001