allow setting files (#9463)

.changeset/soft-geese-learn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow setting files binding for `<input type="file" />`

packages/svelte/src/compiler/phases/bindings.js

@@ -182,6 +182,7 @@ export const binding_properties = {
 	},
 	files: {
 		event: 'change',
+		type: 'set',
 		valid_elements: ['input'],
 		omit_in_ssr: true
 	}

packages/svelte/tests/runtime-browser/samples/binding-files/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../assert';
+
+export default test({
+	async test({ assert, window }) {
+		const input = window.document.querySelector('input');
+		await new Promise((r) => setTimeout(r, 100));
+		assert.equal(input?.files?.length, 1);
+		window.document.querySelector('button')?.click();
+		await new Promise((r) => setTimeout(r, 100));
+		assert.equal(input?.files?.length, 0);
+	}
+});

packages/svelte/tests/runtime-browser/samples/binding-files/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { onMount } from "svelte";
+
+  let files;
+
+  onMount(() => {
+		let list = new DataTransfer();
+		let file = new File(["content"], "filename.jpg");
+		list.items.add(file);
+		files = list.files;
+	})
+</script>
+
+<input type="file" bind:files />
+
+<button onclick={() => files = new DataTransfer().files}>Reset</button>