Select the same file on Vuetify component v-file-input

0
votes

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 enter image description here 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?

1
vue.jsfrontendnuxt.jsvuetify.js

1 Answers

0
votes

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 = []
    },
}