CODEWITHSUNDEEP
vue.jsvuejs2vue-componentdropzone.js
celerius
celerius

Reputation: 115

Adding custom parameter in vue2-dropzone event

I'm using vue2-dropzone which exposes a list of events E.g. For when the file transfer is complete.

In my SFC (single file component), I use 2 of these dropzone components to differentiate different uploads. I use the event

vdropzone-upload-progress(file, progress, bytesSent)

to display progress for each dropzone separately outside the dropzone.

<vue-dropzone @vdropzone-upload-progress="progress($event, 'from_dz1')" ref="myVueDropzone" id="dz1" :options="dropzoneOptions"></vue-dropzone>
<vue-dropzone @vdropzone-upload-progress="progress($event, 'from_dz2')" ref="myVueDropzone" id="dz2" :options="dropzoneOptions"></vue-dropzone>

When I do that, in my progress method I am only able to get the file object and my custom parameter from_dz1 and from_dz2 because it matches the first position of the original.

Is there anyway I can do @vdropzone-upload-progress="progress(file, progress, bytesSent, 'from_dz1')" and in my progress method, I do

progress: function (file, progress, bytesSent, origin) {
  console.log(file.name, 'from', origin, progress, '% done')
}

and be able to get all 4 arguments?

A workaround I thought of was to have 3 methods, progress, progress1, and progress2 where both progress1 and 2 would call progress with the additional 'from_dz1' string but it doesn't seem like a scalable idea. If I used more than 1 event I'll end up with many more methods and likewise if I have more dropzones I'll end up with even more methods.

Upvotes: 1

Views: 3005

Answers (1)

Tuan Pham
Tuan Pham

Reputation: 1110

You should be able to do

<vue-dropzone @vdropzone-upload-progress="(file, progress, bytesSent) => progress(file, progress, bytesSent, 'from_dz1')" ref="myVueDropzone" id="dz1" :options="dropzoneOptions"></vue-dropzone>

Upvotes: 2

Related Questions