allow setting files (#9463)

Author: teemingc

.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>