Vue Dropzone: Sending files from multiple instances in one POST

Question

I am using Vue Dropzone (https://github.com/rowanwins/vue-dropzone) and one of my page's has multiple instances of dropzone for different sections of the same page. I turned off autoProcessQueue so that they don't upload automatically after adding them to the dropzone. I gave each instance a ref so that I can call processQueue manually but is there a way I can send them over in POST rather than 3 individual calls?

<vue-drop-zone ref="myVueDropzone1" id="dropzone" :options="dropzoneOptions">
</vue-drop-zone>

<vue-drop-zone ref="myVueDropzone2" id="dropzone" :options="dropzoneOptions" >
</vue-drop-zone>

<vue-drop-zone ref="myVueDropzone3" id="dropzone" :options="dropzoneOptions" >
</vue-drop-zone>


data() {
   return {
       dropzoneOptions: {
                    url: '/url/post',
                    thumbnailWidth: 180,
                    maxFilesize: 2, // MB
                    maxFiles: 1,
                    autoProcessQueue: false,       
        },
   }
}

methods: {
    processBtn: function() {
          this.$refs.myVueDropzone1.processQueue();
          this.$refs.myVueDropzone2.processQueue();
          this.$refs.myVueDropzone3.processQueue();
    } 
}

Answer 1

You'd have to call getAcceptedFiles() on each component to get the files and then process them yourself (XHR post), then call removeAllFiles().