How to reset/clear file Input

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