Vue-dropzone: vdropzone-removed-file triggered on component destroy?

[marbuser]

So I setup a listener for vdropzone-removed-file, and it works flawlessly except for 1 thing.

When I submit my request and navigate the user to a different route, it executes vdropzone-removed-file anyway and causes my server to delete the image before displaying it to the user on the second route.

Hopefully that makes sense. I can add more details if required.

            <vue-dropzone
              id="dropzone"
              ref="myVueDropzone"
              :options="dropzoneOptions"
              @vdropzone-success="uploadSuccess"
              @vdropzone-removed-file="deleteImage"
            ></vue-dropzone>

    deleteImage(file, error, xhr) {
      const xhrJSON = JSON.parse(file.xhr.response);
      axios
        .delete('/uploads', {
          data: {
            imageName: xhrJSON.filename,
          },
        })
        .catch(err => {
          console.log(err);
        });
    },

[rowanwins]

Hi @marbuser

Can you try setting the destroyDropzone property to false?

Cheers

[marbuser]

destroyDropzone

Yep that appears to fix it. I think maybe that might we worth putting in the docs or smth. :)

[wmcmurray]

But that won't destroy the Dropzone instance at all :confused:

It happens because they remove all files in their destroy method : https://gitlab.com/meno/dropzone/blob/master/src/dropzone.js#L1210 which has a comment saying :
"Not fully tested yet" above it lol :man_shrugging:

I just created an issue on their repo to address this problem :crossed_fingers:

[wlkns]

This is still an issue, and an annoying one to debug (I thought it was my API at first) but alas destroyDropzone: true does fix this for me.

I can't help but think this may not be the best solution and is an actual issue, even so this probably needs to be documented?

Another fix from a user over at the Dropzone.js issue, identify that the dropzone instance is being destroyed in Vue before it is destroyed, and ignore the event, sample code —

<template>
   ...
   <vue-dropzone
     ref="myVueDropzone"
     id="dropzone"
     :options="dropzoneOptions"
     v-on:vdropzone-removed-file="removedFile"
   ></vue-dropzone>
   ...
</template>
<script>
  import vue2Dropzone from 'vue2-dropzone';
  export default {
    components: {
      vueDropzone: vue2Dropzone
    },
    data() {
      is_destroying: false,
    },
    beforeDestroy() {
      this.is_destroying = true;
    },
    destroyed() {
      this.is_destroying = false;
    },
    methods: {
      removedFile(file) {
        if (this.is_destroying) {
          return;
        }
        ...
      }
    }
</script>

[ricardogil]

This is still an issue, and an annoying one to debug (I thought it was my API at first) but alas destroyDropzone: true does fix this for me.

I can't help but think this may not be the best solution and is an actual issue, even so this probably needs to be documented?

Another fix from a user over at the Dropzone.js issue, identify that the dropzone instance is being destroyed in Vue before it is destroyed, and ignore the event, sample code —

<template>
   ...
   <vue-dropzone
     ref="myVueDropzone"
     id="dropzone"
     :options="dropzoneOptions"
     v-on:vdropzone-removed-file="removedFile"
   ></vue-dropzone>
   ...
</template>
<script>
  import vue2Dropzone from 'vue2-dropzone';
  export default {
    components: {
      vueDropzone: vue2Dropzone
    },
    data() {
      is_destroying: false,
    },
    beforeDestroy() {
      this.is_destroying = true;
    },
    destroyed() {
      this.is_destroying = false;
    },
    methods: {
      removedFile(file) {
        if (this.is_destroying) {
          return;
        }
        ...
      }
    }
</script>

this solution worked to me while the destroyDropzone = false doesn't

[wlkns]

I preferred the solution, and forgot to mention - I ended up using it and its working fine for me too.