How to reset a v-input-file with vuetify?

user_18540155 0
Viewed 274

I'm trying to reset my v-input-file when i click on a button. But, i don't see any function to do that. I tried the following commands : (upload_json is the name of my v-input-file)

this.$refs.upload_json.files=[]
this.$refs.upload_json.files=null
this.$refs.upload_json.value=""
this.$refs.upload_json.reset()

For all the commands, I had the same following error :

Uncaught TypeError: proxy set handler returned false for property

vuetify.js vue.js
4 Answers

You can clear input by using this approach

<div id="app">
    <v-app id="inspire">
        <v-file-input
        v-model="files"
        accept="image/png, image/jpeg, image/bmp"
        placeholder="Pick an avatar"
        prepend-icon="mdi-camera"
        label="Avatar"
    ></v-file-input>
   <v-btn @click="restInput">Clear Input</v-btn>
 </v-app>
</div>

main.js

    new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    files:{},
  }),
  methods:{
    restInput(){
      this.files = {}
    }
  }
})
user_152610210

you can use this.$refs.upload_json.value=null

user_109763500

You can clear input this way:

this.$refs.upload_json.internalValue = this.multiple ? [] : null

I tested it and it works. If you look at the source of the v-file component, that is how Vuetify developers clear the input when you click on the clear icon.

user_72647990

Try the following

this.$refs.upload_json.$refs.input.value = null

With Vue2, there was no warning as well!

user_62496420
Related