CODEWITHSUNDEEP
javascriptvue.js
LJP
LJP

Reputation: 1951

Error when using v-model on file input

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

Upvotes: 7

Views: 14354

Answers (3)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

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();

Upvotes: 2

Ixoy Well
Ixoy Well

Reputation: 15

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

Upvotes: -1

LJP
LJP

Reputation: 1951

Solved it using the ref attribute,

this.$refs.fileInput.value = null;

Upvotes: 3

Related Questions