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

Answer 1

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 succesa callback of uploadFile do this:

  this.$refs.myFileInputForm.reset();