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>
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++;
}
}
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,
}
},
})
I had to go into the input component and clear the value
this.$refs.fileupload.$refs.input.value = null
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>
I know it's too late but here is an answer without getting any errors in the console: this.$refs.fileupload.reset()
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()