Vue / Vuetify - this.$refs.form.reset() error in file input - vue.js

Question

I was using this.$refs.form.reset() for my modal and all the fields are cleared not until I used the v-file-input field. The error produces Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
If I manually set the the value of the v-file-input into null, everything is working fine. How do I retain using this.$refs.form.reset() without this error?
<v-file-input
v-model="tableItem.photo"
accept="image/png, image/jpeg, image/bmp"
placeholder="Pick an avatar"
prepend-icon="mdi-camera"
label="Avatar"
#change="getImagePreviews()"
></v-file-input>
getImagePreviews() {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageURL = reader.result
})
reader.readAsDataURL(this.tableItem.photo)
},
closeModal() {
this.tableItem.photo = null // this is working but I need to remove this.$refs.form.reset()
this.$refs.form.reset()
this.$refs.form.resetValidation()
}

Answer 1

Since the readAsDataURL() function accepts only Blob data, you can check if the parameter is of Blob type:
getImagePreviews() {
if (this.tableItem.photo instanceof Blob){
this.reader.readAsDataURL(this.tableItem.photo)
}else{
this.imageURL = null
}
},
Also, you may want to initialize the reader in the mounted hook:
data: ()=>({
reader: null
}),
mounted(){
this.reader = new FileReader();
this.reader.addEventListener("load", () => {
this.imageURL = this.reader.result
})
}