From 37f249350c414d9a75635bf2993b08f888191ce5 Mon Sep 17 00:00:00 2001
From: Tee Ming <chewteeming01@gmail.com>
Date: Thu, 16 Nov 2023 22:49:08 +0800
Subject: [PATCH] allow setting files (#9463)

---
 .changeset/soft-geese-learn.md                   |  5 +++++
 packages/svelte/src/compiler/phases/bindings.js  |  1 +
 .../samples/binding-files/_config.js             | 12 ++++++++++++
 .../samples/binding-files/main.svelte            | 16 ++++++++++++++++
 4 files changed, 34 insertions(+)
 create mode 100644 .changeset/soft-geese-learn.md
 create mode 100644 packages/svelte/tests/runtime-browser/samples/binding-files/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/binding-files/main.svelte

diff --git a/.changeset/soft-geese-learn.md b/.changeset/soft-geese-learn.md
new file mode 100644
index 0000000000..15216a3b09
--- /dev/null
+++ 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
index 2f891827cc..d8f04e1732 100644
--- 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
new file mode 100644
index 0000000000..9103dbb639
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..0e80e5a13d
--- /dev/null
+++ 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>