Error when using v-model on file input

Question

I have a file input and I need to clear it after file is uploaded. I tried setting null value to v-model, but it generated the following error

File inputs are read only. Use a v-on:change listener instead.

My code is

<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />

How can I clear the file input in vue.js after upload so that I can upload the same file multiple times continuously

Possible duplicate of [How can I clear an HTML file input with JavaScript?](https://stackoverflow.com/questions/1703228/how-can-i-clear-an-html-file-input-with-javascript) — str, Jun 05 '17 at 09:19

score 2 · Answer 1 · edited Oct 24 '22 at 10:46

You are using v-on:change="uploadFile" and guessing that your uploadFile has a success callback.

You can do the following:

Wrap your input in a form and add a ref attribute to your form:

<form ref="myFileInputForm">
      <input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
 </form>

In your successful callback uploadFile do this:

this.$refs.myFileInputForm.reset();

LJP · Accepted Answer · 2017-06-07T10:10:47.957

2

Solved it using the ref attribute,

this.$refs.fileInput.value = null;

edited Jun 07 '17 at 10:10

answered Jun 05 '17 at 09:31

LJP

score 0 · Answer 3 · answered Mar 09 '18 at 09:07

0

File inputs are read only. don't bind on element, remove v-model="file"

answered Mar 09 '18 at 09:07

Ixoy Well

4

All you did was restate the error. This doesn't provide a solution for when someone may need the effect of binding to a file input. – crash springfield Feb 06 '20 at 16:09

3 Answers3