From 286398bed7633910bf11bdea9250691645e28ddc Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Sat, 16 Mar 2024 22:19:15 +0100 Subject: [PATCH] bind:files --- .../phases/3-transform/client/visitors/template.js | 4 ++++ packages/svelte/src/compiler/phases/bindings.js | 2 -- .../internal/client/dom/elements/bindings/input.js | 14 ++++++++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index e5302a3a7c..b211dd50af 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -2841,6 +2841,10 @@ export const template_visitors = { break; } + case 'files': + call_expr = b.call(`$.bind_files`, state.node, getter, setter); + break; + case 'this': call_expr = serialize_bind_this(node.expression, context, state.node); break; diff --git a/packages/svelte/src/compiler/phases/bindings.js b/packages/svelte/src/compiler/phases/bindings.js index 820c66d886..e3fdd7eb8c 100644 --- a/packages/svelte/src/compiler/phases/bindings.js +++ b/packages/svelte/src/compiler/phases/bindings.js @@ -182,8 +182,6 @@ export const binding_properties = { valid_elements: ['input', 'textarea', 'select'] }, files: { - event: 'change', - type: 'set', valid_elements: ['input'], omit_in_ssr: true } diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js index f16124b363..c642d557eb 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js @@ -175,3 +175,17 @@ function is_numberlike_input(input) { function to_number(value) { return value === '' ? null : +value; } + +/** + * @param {HTMLInputElement} input + * @param {() => FileList | null} get_value + * @param {(value: FileList | null) => void} update + */ +export function bind_files(input, get_value, update) { + listen_to_event_and_reset_event(input, 'change', () => { + update(input.files); + }); + render_effect(() => { + input.files = get_value(); + }); +}