How to make input type file null on removing image in vue?

Question

I have a form where i need to upload a image and every thing was working fine but the problem is when i remove the image and upload the same image again the file @change function is not getting triggered . i am not able to make the file value null

I have tried changing this.$refs.fileInput.type on remove image and making the ref files to null and even 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>
      </v-container>
</v-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>

So, after removing image and uploading the same image again i want to run function on change the input type file.

Solved i was using wrong ref, Now its working.

Srinath
– Srinath

2019-07-17 12:34:58 +00:00
Commented Jul 17, 2019 at 12:34 — Srinath
– Srinath, Commented Jul 17, 2019 at 12:34
post it as your own answer please

Mauricio Sipmann
– Mauricio Sipmann

2019-07-17 13:51:14 +00:00
Commented Jul 17, 2019 at 13:51 — Mauricio Sipmann
– Mauricio Sipmann, Commented Jul 17, 2019 at 13:51

Srinath · Accepted Answer · 2019-07-17 18:11:24Z

1

Solved i was using wrong ref, Now its working.

answered Jul 17, 2019 at 18:11

Srinath

2953 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamadou Hady Barry · Accepted Answer · 2019-07-19 06:36:26Z

0

Try this :

...
 methods: {
   removeImage () {
      document.querySelector('#fileInput').value = ''
   }
 }
...

answered Jul 19, 2019 at 6:36

Mamadou Hady Barry

6394 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to make input type file null on removing image in vue?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related