allow setting files (#9463)

sveltejs · Nov 16, 2023 · 37f2493 · 37f2493 · vercel · Nov 16, 2023
1 parent 755fe33
commit 37f2493
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 0 deletions.
diff --git a/.changeset/soft-geese-learn.md b/.changeset/soft-geese-learn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow setting files binding for `<input type="file" />`
diff --git a/packages/svelte/src/compiler/phases/bindings.js b/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
 	}

diff --git a/packages/svelte/tests/runtime-browser/samples/binding-files/_config.js b/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);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/binding-files/main.svelte b/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>