[Vuejs]-Vue-dropzone totaluploadprogress does not work properly

by

0👍

✅

An old question, but facing the same issue I was forced to find a solution and here it is for everyone interested. I apologize for the long property names 🙂

I’m listening to the following 2 events of the vue2-dropzone: vdropzone-upload-progress and vdropzone-file-added 

<div v-html="'Progress: '+ uploadProgress"></div>

<dropzone id="upload_dropzone" ref="upload_dropzone" :options="dropzoneOptions"
  @vdropzone-success="dropzoneOnSuccess"
  @vdropzone-upload-progress="dropzoneUploadProgress" 
  @vdropzone-file-added="dropzoneFileAdded"></dropzone>

I have 3 additional properties in my data object:

data: ()=>{
   ....
   dropzoneTotalFilesize:0,
   dropzoneUploadedFilesize:0,
   dropzoneCurrentUpload:0
 }
},

I got one computed property:

computed:{
  uploadProgress(){
    return Math.round((this.dropzoneUploadedFilesize + this.dropzoneCurrentUpload) / this.dropzoneTotalFilesize * 100);
  }
 },

And then my event listeners, that are called in my template above

methods:{
  dropzoneFileAdded(file){
    this.dropzoneTotalFilesize += file.size;
  },
  dropzoneUploadProgress(file, totalBytes, totalBytesSent){
    this.dropzoneCurrentUpload = totalBytesSent; // write totalBytes to dropzoneCurrentUpload
    if(file.size <= totalBytesSent){
        this.dropzoneCurrentUpload = 0; // reset current upload bytes counter
        this.dropzoneUploadedFilesize += totalBytesSent; // add finished file to total upload
    },
    .........
},

Maybe it’s possible to accomplish the same with abit less code, but this def works for single file upload as well as for multiple file upload.

I hope I could help someone with this, and help to keep VueJS competetive

Leave a comment