How to display Vue-Dropzone response on browser?

Question

I need to render vue-dropzone response to my users. How do i do that?

The file uploads well, i only need to show to notify the user it is uploaded via an alert box or message.

<template>
    <div class="container">
        <div class="eight wide field">

                <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" vdropzone-success=""></vue-dropzone>

        </div>
    </div>
</template>

<script>
    import vue2Dropzone from 'vue2-dropzone';
    import 'vue2-dropzone/dist/vue2Dropzone.min.css';

    export default {
      name: 'app',
      components: {
        vueDropzone: vue2Dropzone
      },
      data: function () {
        return {
          dropzoneOptions: {
              url: '/formsubmit',
              thumbnailWidth: 150,
              maxFilesize: 0.5,
              addRemoveLinks: true,
              removeFile:true,
              headers: { "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content }
          }
        }
      }
    };

</script>

Answer 1

You can add a listener handler to listen the vdropzone-success event of vue-dropzone component.

This code should be working.

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions" 
    v-on:vdropzone-success="uploadSuccess"></vue-dropzone>

methods: {
   uploadSuccess: function(file, response) {
      your_function(file, response);
   }
}

Hope this helps to you.