Warn when using v-model with input[type=file] (#3791)

Author: posva

src/platforms/web/compiler/directives/model.js

@@ -108,6 +108,16 @@ function genDefaultModel (
   if (isNative && needCompositionGuard) {
     code = `if($event.target.composing)return;${code}`
   }
+  // inputs with type="file" are read only and setting the input's
+  // value will throw an error.
+  if (process.env.NODE_ENV !== 'production' &&
+      type === 'file') {
+    warn(
+      `<${el.tag} v-model="${value}" type="file">:\n` +
+      'File inputs are read only. You should use @change instead:\n' +
+      `<${el.tag} @change="${value} = $event.target.files" type="file">`
+    )
+  }
   addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
   addHandler(el, event, code, null, true)
   if (needCompositionGuard) {

test/unit/features/directives/model-file.spec.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+describe('Directive v-model file', () => {
+  it('warn to use @change instead', () => {
+    new Vue({
+      data: {
+        file: ''
+      },
+      template: '<input v-model="file" type="file">'
+    }).$mount()
+    expect('use @change instead').toHaveBeenWarned()
+  })
+})