How to reset/clear file Input - file

Question

I am stuck with this problem from resetting an image file from input type=file. This is the scenario,
I set an image and then I clicked the 'Cancel' button (which means it was reset), and then I will set again the same image, it will not set. I do not know why but I think it is a bug.
Here is my code for resetting the image/form.
resetImage() {
this.$refs.addImageForm.reset()
this.dialog = ''
this.imgSrc = ''
this.fileName = ''
this.imgUrl = ''
this.file = ''
}
I am using Vue.js and Vuetify if that helps. I hope you can help me. I am stuck with this problem
HERE IS THE HTML
<template>
<v-dialog
persistent
v-model="dialog"
width="600"
>
<template v-slot:activator="{ on }">
<v-btn depressed color="primary" v-on="on">
<v-icon class="pr-2">check</v-icon>Approve
</v-btn>
</template>
<v-card>
<div class="px-4 pt-3">
<span class="subheading font-weight-bold">Approve Details</span>
<input
ref="image"
type="file"
name="image"
accept="image/*"
style="display: none;"
#change="setImage"
/>
<v-layout row wrap align-center>
<v-flex xs12 class="pa-0">
<div class="text-xs-center">
<v-img :src="imgUrl" contain/>
</div>
<VueCropper
:dragMode="'none'"
:viewMode="1"
:autoCrop="false"
:zoomOnWheel="false"
:background="false"
:src="imgSrc"
v-show="false"
ref="cropper"
/>
<v-form ref="addImageForm" lazy-validation>
<v-layout row wrap class="pt-2">
<v-flex xs12>
<v-text-field
outline
readonly
:label="imgSrc ? 'Click here to change the image' : 'Click here to upload image'"
append-icon='attach_file'
:rules="imageRule"
v-model='fileName'
#click='launchFilePicker'
></v-text-field>
</v-flex>
</v-layout>
</v-form>
</v-flex>
</v-layout>
</div>
<v-divider></v-divider>
<v-card-actions class="px-4">
<v-btn
large
flat
#click="resetImage()"
>Cancel</v-btn>
<v-spacer></v-spacer>
<v-btn
large
depressed
color="primary"
#click="approveCashout"
:loading="isUploading"
>Approve</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>

Answer 1

You can use ref to reset the file uploader value.
this.$refs.fileupload.value = null;
codepen - https://codepen.io/Pratik__007/pen/MWYVjqP?editors=1010

Answer 2

To reset the input, I let vue rerender it. Just add a key to the input and change the value of the key whenever you want the file input to be cleared.
Like so:
window.app = new Vue({
el: '#app',
data: {
fileInputKey: 0
},
methods:{
inputChange() {
console.log('files chosen');
},
clear() {
this.fileInputKey++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="file" #change="inputChange($event)" :key="fileInputKey"/>
<button #click="clear">Clear</button>
</div>

Answer 3

I tried several suggestions I found on Stackoverflow, but in my project there were several errors.
What solved my problem was:
<input type="file" ref="inputFile"/>
this.$refs.inputFile.reset();
This code above resets the field values.

Answer 4

I also came to this problem and could not reset the value. after going through the code of all previous projects and modifying them I got a lot of methods through which a file input could be reset.
one of the way is do is to capture the event object if you want to perform it after handling some code. another way is to change the type of the input element and change it back again.
<div id="app">
<input type="file" #change="onFilePicked" ref="file">
<button #click="clear()">Cancel</button>
</div>
var v = new Vue({
el:'#app',
data:{},
methods:{
clear() {
this.$refs.file.type='text';
this.$refs.file.type='file';
},
onFilePicked(event){
//if you directly want to clear the file input after handling
//some code........
event.target.value=null;
//OR
event.target.value='';
}
},
});

Answer 5

For Composition api
<input type="file"
class="custom-file-input"
id="customFileLang"
lang="en"
accept="image/*"
:class="{ 'is-invalid': errors && errors.images }"
#change="previewImg" multiple
>
Inside setup function:
const imgInput = ref(null) // for input type file
const previewImg = (event) => {
imgInput.value = event
// rest of code to preview img
}
const uploadImage = () => {
//on success
imgInput.value.target.value = null //reset input type file
}

Answer 6

I try mutilpe ways on vue, the best way is:
define this method:
removePic(inp) {
if (this.$refs[inp].files.length === 0) return
this.$refs[inp].files = []
delete this.body[inp]
this.$refs[`${inp}_preview`].src = ''
},
in the template use as this:
<b-form-file
ref="pic"
name="pic"
accept="image/jpeg, image/png, image/gif"
/>
<feather-icon
icon="XIcon"
size="18"
class="text-primary stroke-current"
#click="removePic('pic')"
/>
<div>
<img ref="pic_preview" src="#" alt="select" />
</div>