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>

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>

• javascript
• vuetify.js

8 Answers 8

I had to go into the input ponent and clear the value

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

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,
    }
  },
})

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

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

In your javascript

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

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

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>
        
  

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

For me, this worked out like a charm:

if (this.$refs.fileInput) {
   this.$refs.fileInput.reset() //console.log(this.$refs.fileInput)
}

And here I just have added the ref for the v-file-input:

<v-file-input
   ref="fileInput"
   small-chips
   label="File input w/ small chips"
   accept="image/png, image/jpeg"
   @change="handleChangeFileInput"
></v-file-input>

<v-file-input> expects an array so you can use the data ponent option to set the value for <v-file-input> to an empty array (or null) to reset it:

<template>
    <v-file-input
        label="File input"
        v-model="file">
    </v-file-input>
</template>

<script>
export default {
  data() {
    return {
      file: []
    }
  },
  methods: {
    resetFileInput() {
      this.file = []
    }
  }
}
</script>

You would still need a button and bind resetFileInput to the button using @click="resetFileInput" to trigger the reset, or you can just reset this.file in some other method so that a button is not necessary.