clear input file in vue 3

I have this vue component in vue 3

<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 submit the form in the input file filed still remains the filename and if I try to upload the same file again it won't take it.

How to clear the input filename ?

calin.ionut

4 years ago

Level 5

No one have any ideas ?

I have created a test button in the file input component and when click

fileInput.value.value = ''

it seems to clear the input.

But how can I clear from the parent - from the component where I use it ?

calin.ionut

4 years ago

Level 5

I solved .... at least is working.

From the parent component I provide the file input model

provide('fileInputModel', computed(() => form.fileModel));

and in the FileInput component

const fileInputModel = inject('fileInputModel')
watch(fileInputModel, (value) => {
	if(value === null) {
		fileInput.value.value = ''
	}
})

and now when the file model is null it will update clear the input from the FileInput component.

mariefku

2 years ago

Level 1

I also experienced similar issue with Laravel Inertia with Vue 3. with vue 2 we can use $refs

this.$refs.fileupload.value = null;

however, $refs is no longer working.

I finally use this as a resolution after all these time. using standard JavaScript code. It runs perfectly.

document.getElementById('your_input_id').value = 0;

Please or to participate in this conversation.