setting a vue variable within a JS function for Dropzone

Question

I have a page (in Laravel) where I"m using Vue for the overall function of the page and the ultimate axios post for form submission, but I've run into a tricky situation.

I have a standard dropzone (using the plain JS dropzone code) where I'm dropping images for upload. When I drop the image, I have the console logging the file name, which is working perfectly fine. The issue is that I need to take that filename and push it into a variable, object in my vue code.

The dropzone code is like so:

Dropzone.options.imageWithZones = {
        init: function() {
            this.on("addedfile", 
                function(file) { 
                    console.log(file.name);
            });
        }           
    };

But my vue code is here, and I need to set ImageZoneName with the file name from the previous function

new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#commonDiv",
      data() {
        return{
            ImageZoneName: [],
            
        }

      },
........

What is the best way to simply take the file name (when a file is added to dropzone) and set the vue ImageZoneName object to ahve a value of that file name?

Answer 1

Two ways:

1. Move the dropzone event configuration and put it inside of the Vue mounted lifecycle method. Then you can easily access the Vue instance to set the variables.

 new Vue({ el: "#app", data: { imageZoneNames: [], }, mounted() { const vm = this; Dropzone.options.imageWithZones = { init: function() { this.on("addedfile", function(file) { vm.imageZoneNames.push(file.name); } ); } }; } // end mounted })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> Files: <ul> <li v-for="fileName in imageZoneNames":key="fileName"> {{ fileName }} </li> </ul> <form action="/file-upload" class="dropzone" id="imageWithZones"></form> </div>

2. Assign the instance to a variable and access the data through that

 const vm = new Vue({ el: "#app", data: { imageZoneNames: [], }, }) Dropzone.options.imageWithZones = { init: function() { this.on("addedfile", function(file) { vm.imageZoneNames.push(file.name) } ); } };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> Files: <ul> <li v-for="fileName in imageZoneNames":key="fileName"> {{ fileName }} </li> </ul> <form action="/file-upload" class="dropzone" id="imageWithZones"></form> </div>