My form allows users to upload an image, and everything was functioning properly until I encountered an issue. When I remove an image and try to upload the same image again, the @change function is not triggered. I am unable to reset the file value to null.
I attempted changing this.$refs.fileInput.type when removing the image, setting the ref files to null, and even trying to set the value to null.
<template>
<div>
<v-layout>
<v-container style="margin:0px">
<v-form>
<v-badge right v-if="certificateImage" color="red" class="close-btn">
<span slot="badge" @click="removeImage">X</span>
<img :src="certificateImage" height="150px"
@click="onPickFile">
</v-badge>
<img v-if="!certificateImage"
src="https://imgplaceholder.com/640x360" height="150px" @click="onPickFile">
<input type="file" style="display:none"
ref="fileInput" id="fileInput" accept="image/*" @change="onFilePicked">
</v-form>
</container>
</layout>
/div>
</template>
<script>
data(){
return{
certificateImage:"",
}
},
methods:{
onPickFile(){
this.$refs.fileInput.click()
},
onFilePicked(event){
console.log(this.$refs.fileInput.type,"sdfds");
const files=event.target.files;
let filename =files[0].name;
if(filename.lastIndexOf('.')<=0){
return alert('Please enter a valid image')
}
const fileReader=new FileReader();
fileReader.addEventListener('load',()=>{
this.certificateImage=fileReader.result;
console.log(this.certificateImage,"image url");
})
fileReader.readAsDataURL(files[0])
this.image=files[0]
// Create a root reference
},
}
removeImage: function (e) {
console.log('removed')
this.certificateImage = '';
this.$refs.fileInput.type='text';
this.$refs.fileInput.type='file';
},
</script>
<style scoped>
.image1{
padding-top:5px;
width:35px
}
.image2{
width:80px;
}
.remove{
width: 12px;
border-radius: 50%;
background: red;
color:white;
}
input[type=file] {
cursor: pointer;
width: 159px;
height: 34px;
overflow: hidden;
}
input[type=file]:before {
width: 158px;
height: 32px;
font-size: 16px;
line-height: 32px;
content: 'Select your file';
display: inline-block;
background: #808080;
color:white;
border: 1px solid #0000002e;
padding: 0 10px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
input[type=file]::-webkit-file-upload-button {
visibility: hidden;
}
.selectImage{
color: #00000085;
padding-left: 5px;
float: left;
padding-right: 10px;
padding-top: 4px;
}
.selectIcon{
color: #00000085;
padding-left: 5px;
float: left;
padding-right: 10px;
padding-top: 4px;
}
.close-btn:hover{
cursor:pointer;
}
</style>
After attempting to reupload an image that was previously removed, I need the function to run upon changing the input type file.