Vue - button on click submits a form

Question

I have a component where a user can upload an image, and I would like to also add a feature of removing an image. I have added a button which removes the current image, but the problem with it is that the form is getting submitted as well, and I would like to avoid that. I just need to remove the current image if it exists. This is the script:

<template>
    <div class="Image-input">
        <div class="Image-input__input-wrapper">
            <h2>+</h2>
            <input @change="previewThumbnail" class="Image-input__input" name="image" type="file">
        </div>

        <div class="Image-input__image-wrapper">
            <i v-show="! imageSrc" class="icon fa fa-picture-o"></i>
            <img v-show="imageSrc" class="Image-input__image" :src="imageSrc">
            <button v-show="imageSrc" @click="removeImage">Remove image</button>
        </div>
    </div>
</template>
<script>
export default {

  props: ['imageSrc'],

  methods: {
    previewThumbnail: function(event) {
      var input = event.target;

      if (input.files && input.files[0]) {
        var reader = new FileReader();

        var vm = this;

        reader.onload = function(e) {
          vm.imageSrc = e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
      }
    },
    removeImage: function removeImage(e) {
        this.imageSrc = '';
    }
  }
}
</script>

I have tried with placing event.preventDefault() in the removeImage method, but then, if I after removing image try to upload the same one again it won't upload. Not sure what to do about it?

Answer 1

If you have a button inside a form, it has a default type of "submit". To prevent that from happening, you will have to set type="button" as follows:

<button type="button" v-show="imageSrc" @click="removeImage">Remove image</button>

Reference: Can I make a <button> not submit a form?

Edit: Solution for the second problem mentioned in comments #1 to #5

Please modify your reader.onload function as follows:

reader.onload = function(e) {
    vm.imageSrc = e.target.result;
    console.log("Clearing file input");
    document.querySelectorAll('input[type=file]').forEach(element => {
        element.value = "";
    });
}

As you can see, I am printing out a console log for debugging (which you can remove), then proceeding to select all file inputs and resetting its value. This clears the selected file.

Note: This clearing function happens after the file is read into memory. If you want it on remove function, you can do as follows:

removeImage: function removeImage(e) {
    this.imageSrc = "";
    console.log("Clearing file input");
    document.querySelectorAll('input[type=file]').forEach(element => {
        element.value = "";
    });
}

The choice is yours, whether you want to clear the file name after reading into memory or if you want to keep it on screen. Let me know if it works!

Another note: If you have any other <input type="file"> in your app, even that will get cleared. But I assume you would have read it into memory and kept it in some local variables. To avoid this, you need to modify the document.querySelectorAll function to target only the relevant input by giving it a class or id.