vue-dropzone totaluploadprogress does not work properly

Question

I 'm using https://rowanwins.github.io/vue-dropzone/docs/dist Vue2-Dropzone to work on uploading file. Everything works fine except calculation of total-upload-progress value goes to 100% and then start from 0% on every file uploads.

I have tried to fix it with this.$refs.myVueDropzone.updateTotalUploadProgress() adding on file added event

. But does not work as expected. Any solution would be highly appreciated.

Answer 1

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