docs: document `bind:files` (#5141)

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
 <input type="range" bind:value={num}>
 ```
 
+---
+
+On `<input>` 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
+<label for="avatar">Upload a picture:</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
+```
+
 
 ##### Binding `<select>` value
 

site/content/examples/05-bindings/05-file-inputs/App.svelte

@@ -0,0 +1,37 @@
+<script>
+	let files;
+
+	$: if (files) {
+		// Note that `files` is of type `FileList`, not an Array:
+		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+		console.log(files);
+
+		for (const file of files) {
+			console.log(`${file.name}: ${file.size} bytes`);
+		}
+	}
+</script>
+
+<label for="avatar">Upload a picture:</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
+
+<label for="many">Upload multiple files of any type:</label>
+<input
+	bind:files
+	id="many"
+	multiple
+	type="file"
+/>
+
+{#if files}
+	<h2>Selected files:</h2>
+	{#each Array.from(files) as file}
+		<p>{file.name} ({file.size} bytes) </p>
+	{/each}
+{/if}

site/content/examples/05-bindings/05-file-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "File inputs"
+}