Select the same file on Vuetify component v-file-input - vue.js

Question

I am building a web app using nuxt, vuetify 2.x, and typescript.
I want to upload file using v-file-input but have some issue upon selecting the same file.
For example, when I select some file and then close the dialog without saving it,
I cannot select the same file(i.e.#change is not firing)
what I have tried:
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetForm() {
(this.$refs.form as HTMLFormElement).reset();
},
resetImageUploader() {
(this.$refs.imageUploader as any).reset();
},
}
(resetForm() is called when dialog is closed)
I've tried resetting imageuploader when the input form is clicked, but it did not work.
I've tried (this.$refs.imageUploader as any).value = '' instead of reset() but it did not work.
Btw, When I select the file, clear icon appears like this
If I clear the form by clicking this icon, I can select the same file..
Does anyone have idea how I can solve this issue?

Answer 1

try to do like below to reset
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
:value="internalVal"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetImageUploader() {
this.internalVal = []
},
}