How to reset/clear file Input

You can use ref for reset file uploader value.

this.$refs.fileupload.value=null;

codepen - https://codepen.io/Pratik__007/pen/MWYVjqP?editors=1010

file vue.js input types reset

I tried several suggestions I found on Stackoverflow, but in my project there were several errors.What solved my problem was:

<input type="file" ref="inputFile"/>this.$refs.inputFile.reset();

This code above resets the field values.

file vue.js input types reset

To reset the input, I let vue rerender it. Just add a key to the input and change the value of the key whenever you want the file input to be cleared.

Like so:

window.app = new Vue({  el: '#app',  data: {    fileInputKey: 0  },  methods:{    inputChange() {      console.log('files chosen');    },    clear() {        this.fileInputKey++;    }  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <input type="file" @change="inputChange($event)" :key="fileInputKey"/>  <button @click="clear">Clear</button></div>

Expand snippet