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?

Initialize dropzone in one of the Vue lifecycle methods, probably mounted, and then in the dropzone function set the vue variable. — Steven B.
@StevenB. so to do that I would pretty much need to take my existing function and plug it into the mounted method instead of just a JS function? — Geoff_S

Steven B. Steven B. · Accepted Answer · 2020-07-07T00:58:14

Two ways:

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>

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>

setting a vue variable within a JS function for Dropzone

1 Answers