diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index 002120e72172..a05214c6a550 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -145,6 +145,22 @@ export default function validateElement(
message: `'checked' binding can only be used with or `
});
}
+ } else if (name == 'files') {
+ if (node.name !== 'input') {
+ validator.error(attribute, {
+ code: `invalid-binding`,
+ message: `'files' binding acn only be used with `
+ });
+ }
+
+ const type = checkTypeAttribute(validator, node);
+
+ if (type !== 'file') {
+ validator.error(attribute, {
+ code: `invalid-binding`,
+ message: `'files' binding can only be used with `
+ });
+ }
} else if (
name === 'currentTime' ||
name === 'duration' ||
diff --git a/test/js/samples/input-files/expected-bundle.js b/test/js/samples/input-files/expected-bundle.js
new file mode 100644
index 000000000000..097dc9e1b589
--- /dev/null
+++ b/test/js/samples/input-files/expected-bundle.js
@@ -0,0 +1,199 @@
+function noop() {}
+
+function assign(tar, src) {
+ for (var k in src) tar[k] = src[k];
+ return tar;
+}
+
+function insertNode(node, target, anchor) {
+ target.insertBefore(node, anchor);
+}
+
+function detachNode(node) {
+ node.parentNode.removeChild(node);
+}
+
+function createElement(name) {
+ return document.createElement(name);
+}
+
+function addListener(node, event, handler) {
+ node.addEventListener(event, handler, false);
+}
+
+function removeListener(node, event, handler) {
+ node.removeEventListener(event, handler, false);
+}
+
+function setAttribute(node, attribute, value) {
+ node.setAttribute(attribute, value);
+}
+
+function blankObject() {
+ return Object.create(null);
+}
+
+function destroy(detach) {
+ this.destroy = noop;
+ this.fire('destroy');
+ this.set = noop;
+
+ this._fragment.d(detach !== false);
+ this._fragment = null;
+ this._state = {};
+}
+
+function _differs(a, b) {
+ return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+function fire(eventName, data) {
+ var handlers =
+ eventName in this._handlers && this._handlers[eventName].slice();
+ if (!handlers) return;
+
+ for (var i = 0; i < handlers.length; i += 1) {
+ var handler = handlers[i];
+
+ if (!handler.__calling) {
+ try {
+ handler.__calling = true;
+ handler.call(this, data);
+ } finally {
+ handler.__calling = false;
+ }
+ }
+ }
+}
+
+function get() {
+ return this._state;
+}
+
+function init(component, options) {
+ component._handlers = blankObject();
+ component._bind = options._bind;
+
+ component.options = options;
+ component.root = options.root || component;
+ component.store = options.store || component.root.store;
+}
+
+function on(eventName, handler) {
+ var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
+ handlers.push(handler);
+
+ return {
+ cancel: function() {
+ var index = handlers.indexOf(handler);
+ if (~index) handlers.splice(index, 1);
+ }
+ };
+}
+
+function set(newState) {
+ this._set(assign({}, newState));
+ if (this.root._lock) return;
+ this.root._lock = true;
+ callAll(this.root._beforecreate);
+ callAll(this.root._oncreate);
+ callAll(this.root._aftercreate);
+ this.root._lock = false;
+}
+
+function _set(newState) {
+ var oldState = this._state,
+ changed = {},
+ dirty = false;
+
+ for (var key in newState) {
+ if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
+ }
+ if (!dirty) return;
+
+ this._state = assign(assign({}, oldState), newState);
+ this._recompute(changed, this._state);
+ if (this._bind) this._bind(changed, this._state);
+
+ if (this._fragment) {
+ this.fire("state", { changed: changed, current: this._state, previous: oldState });
+ this._fragment.p(changed, this._state);
+ this.fire("update", { changed: changed, current: this._state, previous: oldState });
+ }
+}
+
+function callAll(fns) {
+ while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+ this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+var proto = {
+ destroy,
+ get,
+ fire,
+ on,
+ set,
+ _recompute: noop,
+ _set,
+ _mount,
+ _differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+ var input, input_updating = false;
+
+ function input_input_handler() {
+ input_updating = true;
+ component.set({ files: input.files });
+ input_updating = false;
+ }
+
+ return {
+ c() {
+ input = createElement("input");
+ addListener(input, "input", input_input_handler);
+ setAttribute(input, "type", "file");
+ input.multiple = true;
+ },
+
+ m(target, anchor) {
+ insertNode(input, target, anchor);
+
+ input.files = ctx.files;
+ },
+
+ p(changed, ctx) {
+ if (!input_updating) input.files = ctx.files;
+ },
+
+ d(detach) {
+ if (detach) {
+ detachNode(input);
+ }
+
+ removeListener(input, "input", input_input_handler);
+ }
+ };
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;
diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js
new file mode 100644
index 000000000000..b16c239ff5f0
--- /dev/null
+++ b/test/js/samples/input-files/expected.js
@@ -0,0 +1,55 @@
+/* generated by Svelte vX.Y.Z */
+import { addListener, assign, createElement, detachNode, init, insertNode, proto, removeListener, setAttribute } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+ var input, input_updating = false;
+
+ function input_input_handler() {
+ input_updating = true;
+ component.set({ files: input.files });
+ input_updating = false;
+ }
+
+ return {
+ c() {
+ input = createElement("input");
+ addListener(input, "input", input_input_handler);
+ setAttribute(input, "type", "file");
+ input.multiple = true;
+ },
+
+ m(target, anchor) {
+ insertNode(input, target, anchor);
+
+ input.files = ctx.files;
+ },
+
+ p(changed, ctx) {
+ if (!input_updating) input.files = ctx.files;
+ },
+
+ d(detach) {
+ if (detach) {
+ detachNode(input);
+ }
+
+ removeListener(input, "input", input_input_handler);
+ }
+ };
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;
diff --git a/test/js/samples/input-files/input.html b/test/js/samples/input-files/input.html
new file mode 100644
index 000000000000..7c078b488526
--- /dev/null
+++ b/test/js/samples/input-files/input.html
@@ -0,0 +1 @@
+
\ No newline at end of file