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?

After I have removed the image and try to immediately upload the same image, it still won't upload. Every other scenario works, only this one doesn't. — Ludwig
– Ludwig, Commented Oct 20, 2016 at 10:04
Will you be able to create a working JSfiddle for the problem? — Mat J
– Mat J, Commented Oct 20, 2016 at 10:19

Community · Accepted Answer · 2017-05-23 11:48:31Z

39

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.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Oct 20, 2016 at 10:27

Mani Jagadeesan

24.3k6 gold badges70 silver badges54 bronze badges

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

6 Comments

Ludwig Over a year ago

Yes, thank you, that works! But then I have another problem which is after I remove the image and try to immediately upload the same image, it still won't upload. Every other scenario works, only this one doesn't.

Mani Jagadeesan Over a year ago

Yes, I could reproduce your problem locally. I copied your code into a local file, and added console.log("Got new image"); as the first line of previewThumbnail() function. In this, I can verify that the second attempt is not working as expected. Will get back if I can find a solution.

Mani Jagadeesan Over a year ago

From what I can see, the old file is still kept as "chosen", and the first file name is displayed. What we need is a way to clear the form after reading the image as data URL.

Ludwig Over a year ago

Yes, I am not sure how to do that, I am unfortunately not that good with javascript. If you have any solution for it, I would be very thankful! Thanks in any case!

Mani Jagadeesan Over a year ago

This looks very interesting... I am allowed to upload a totally different image and it works normally. After uploading image1.png, I can remove and upload image2.png. After removing image2.png, I can go back to image1.png without any issues. It is only the same image that is not getting uploaded, probably because that file is already in a chosen state. Still debugging as this is going to affect my app also later, I will get back if I can find a way.

|

Collectives™ on Stack Overflow

Vue - button on click submits a form

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related