VueJS: vue2-dropzone

Question

I built a dropzone with vue2-dropzone, and I want to display only the last error message. To get the error messages, I use the method getRejectedFiles(), which gives me an array of all the failed uploads. I'm then using a `v-for loop to go through this array, and display the last item (current error).

Issue: But as soon as another file is being uploaded (without errors), I want the previous error message to disappear. Currently it stays, since the array doesn't change after a successful upload. I figured I have to reset the main array collected by the method getRejectedFiles() to zero, without resetting the entire dropzone. Is there a way to do that?

Here's a simplified version of my code:

<dropzone [..] @vdropzone-error="collectErrors()"></dropzone>

the method collects the error with getRejectedFiles() like this:

method:{
    collectErrors:function(){
        this.DropzoneErrorMessages = this.$refs.dropzone.getRejectedFiles()
        // adding some text changes to the error here
    }
}

and in the template the error is displayed like this:

<p v-if="this.DropzoneErrorMessages.length > 0">  //not displayed if no errors
    <template v-for="(error,index) in this.DropzoneErrorMessages">
        <span v-if="index==this.DropzoneErrorMessages.length">{{error.message}}</span>
    </template>
</p>

Answer 1

There's a vdropzone-success event that occurs when a file is uploaded successfully. Your dropzone container could listen to that event, and clear the DropzoneErrorMessages array in its handler:

<template>
  <dropzone @vdropzone-success="uploadSuccess" />
</template>

<script>
export default {
  methods: {
    uploadSuccess(file) {
      this.DropzoneErrorMessages = []
    }
  }
}
</script>