file input change event is ignored when same filename is uploaded

Question

I'm my Vue.js app I'm using Vuetify's v-file-input component. The uploaded file is bound to formData.file and I validate the uploaded file via the rules prop.

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
/>

If I upload a file /tmp/foo.txt everything works as expected, However, if I change the content of this file and upload it again, fileValidationRules is not called.

Apparently the reason for is because Chrome does not trigger the change event if the file name is the same. Is there some way I can workaround this to ensure that every file selected by the user is bound to formData.file and calls fileValidationRules?

Answer 1

Set the value of the input to null on each onclick event. This will reset the input's value and trigger the onchange event even if the same path is selected.

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

Answer 2

You can set the value of the file input as null.

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
  ref="file"
/>

onClick() {
   this.$refs.file.value = null;
}