How to reset vuetify's v-input-file

Question

How can we reset vuetify's v-input-file? To clear the form input file after each upload?

        <v-file-input
          label="Upload"
          accept="image/*"
          @change="selectFile"
        >
        </v-file-input>

Answer 1

It's rather simple to do. First there is a prop clearable which allows the user to clear the input. Second if you set your data model to null then the input field is cleared as well.

<div id="app">
  <v-app id="inspire">
    <v-file-input
      v-model="filename"
      clearable="true" 
      label="File input"
      ></v-file-input>
    <v-row justify="center">    
     <v-btn dark
       color="secondary"
       @click="filename = null"
     >Clear</v-btn>
    </v-row>
  </v-app>       
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      filename: null,
    }
  },
})

Answer 2

Add an attribute :key="componentKey" and increment it in your code.

   <v-file-input
      label="Upload"
      accept="image/*"
      @change="selectFile"
      :key="componentKey"
    >
    </v-file-input>

In your javascript

   data() {
      return {
        componentKey: 0
      }
    },
    
    methods: {
      selectFile(event) {
        // your code to deal with event/file
        this.componentKey++;
      }
    }

Answer 3

I know it's too late but here is an answer without getting any errors in the console: this.$refs.fileupload.reset()

Answer 4

I think you can use ref for reset file after upload.

this.$refs.fileupload.value=null

<v-file-input
    ref="fileupload"
          label="Upload"
          accept="image/*"
          @change="selectFile"
        >
        </v-file-input>
        
  

Answer 5

reset() or .value = null did not work for me, but the following seems to call the same code that gets called when hitting the X clear button in the input:

  const fileUploader = (this.$refs.fileUpload as any)
  upload.clearableCallback()