I have a Vue 3 component that looks like this:
<template>
<input type="file" :class="inputClass" accept=".pdf" @input="onFileSelect" ref="fileInput">
</template>
<script>
import {ref} from "vue";
export default {
name: "FileInput",
props: {
inputClass: String
},
setup(props, {emit}) {
const fileInput = ref(null)
const onFileSelect = () => {
const input = fileInput.value;
const files = input.files;
if(files && files[0]) {
const reader = new FileReader;
reader.onload = e => {
emit('input', e.target.result);
}
reader.readAsDataURL(files[0]);
}
}
return {fileInput, onFileSelect}
}
}
</script>
and in the component where I use it:
<file-input input-class="form-control form-control-sm" v-model="document.doc_file" @input="getBase64File"/>
setup() {
const getBase64File = (file) => {
document.value.doc_file = file
}
const document = ref({
// ... other fields
doc_file: null,
})
const resetDocumentModel = () => {
for(let field in document.value) {
document.value[field] = null
}
}
}
After submitting the form, the input file field still shows the filename and does not allow uploading the same file again.
How can I clear the input filename?