use `change` event for `bind:files` (#3226)

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -26,7 +26,7 @@ const events = [
 		event_names: ['input'],
 		filter: (node: Element, _name: string) =>
 			node.name === 'textarea' ||
-			node.name === 'input' && !/radio|checkbox|range/.test(node.get_static_attribute_value('type') as string)
+			node.name === 'input' && !/radio|checkbox|range|file/.test(node.get_static_attribute_value('type') as string)
 	},
 	{
 		event_names: ['input'],
@@ -38,7 +38,7 @@ const events = [
 		event_names: ['change'],
 		filter: (node: Element, _name: string) =>
 			node.name === 'select' ||
-			node.name === 'input' && /radio|checkbox/.test(node.get_static_attribute_value('type') as string)
+			node.name === 'input' && /radio|checkbox|file/.test(node.get_static_attribute_value('type') as string)
 	},
 	{
 		event_names: ['change', 'input'],

test/js/samples/input-files/expected.js

@@ -19,7 +19,7 @@ function create_fragment(ctx) {
 			input = element("input");
 			attr(input, "type", "file");
 			input.multiple = true;
-			dispose = listen(input, "input", ctx.input_input_handler);
+			dispose = listen(input, "change", ctx.input_change_handler);
 		},
 
 		m(target, anchor) {
@@ -43,7 +43,7 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let { files } = $$props;
 
-	function input_input_handler() {
+	function input_change_handler() {
 		files = this.files;
 		$$invalidate('files', files);
 	}
@@ -52,7 +52,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ('files' in $$props) $$invalidate('files', files = $$props.files);
 	};
 
-	return { files, input_input_handler };
+	return { files, input_change_handler };
 }
 
 class Component extends SvelteComponent {