Dropzone: wrong values of totaluploadprogress

[m00nk]

I have an issue with the big files uploading. I have used these settings:
uploadMultiple = false
parallelUploads = 1

When I try to upload a several files (each is about 100Mb), my handler of totaluploadprogress got values:
5% => 37% => 93% => 17% => 55% => ...

Looks like the calculation of the progress percents is wrong.

[sytron]

+1
I'm also get this bug

[mirzabusatlic]

+1

[Indiana-]

Hi
I have had something like this.

When you send a lot of files and you don't want to use parallelUploads, progressBar take wrongs values
When an upload is over, dropzone update how many files need to be send but it forget how many files is already be sent

I have fix it but i have only tried it for my case, I don't know if this modification can broke something else !
https://github.com/Indiana-/Dropzone/blob/master/lib/dropzone.js

[vinhtq]

I also had the same problem

[Liko2127]

+1 in 4.0.0 :(

[Liko2127]

A quick and dirty fix : (version 4)

line 1 : declare

var deja_envoye = 0;

line 686 : replace by

Dropzone.prototype.updateTotalUploadProgress = function() {
var activeFiles, file, totalBytes, totalBytesSent, totalUploadProgress, _i, _len, _ref;
totalBytesSent = 0;
totalBytes = 0;
activeFiles = this.getActiveFiles();

  var tt_files = this.files;
  var size_totale = 0;
  for (_i_tt = 0; _i_tt < tt_files.length; _i_tt++) {
      size_totale += tt_files[_i_tt].upload.total;
  }

  if (activeFiles.length) {
    _ref = this.getActiveFiles();
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      file = _ref[_i];
      deja_envoye += file.upload.bytesSent;
    }
    totalUploadProgress = 100 * deja_envoye / size_totale;
  } else {
    totalUploadProgress = 100;
  }
  return this.emit("totaluploadprogress", totalUploadProgress, size_totale, deja_envoye);
};

[RomainGoncalves]

Has anything been done about it? I get the same varying values.

[BrownSim]

Hi @RomainGoncalves, I send a fix one year ago, you can find it on my repo.
https://github.com/Indiana-/Dropzone/blob/master/lib/dropzone.js

You will find my update for the Dropzone.prototype.updateTotalUploadProgress function.

[nkelemen18]

Hy!

I added a few lines to the updateTotalUploadProgress function.
You can see these between the two "Bugfix" lines.
But it doesn't work perfectly, if the server responses an error.
If you set the accepted extensions correctly and the back-end code works good this fix should work good enough.

Dropzone.prototype.updateTotalUploadProgress = function() {
      var activeFiles, file, totalBytes, totalBytesSent, totalUploadProgress, _i, _len, _ref;
      totalBytesSent = 0;
      totalBytes = 0;
      activeFiles = this.getActiveFiles();
      if (activeFiles.length) {
    //Bugfix
        var sentFiles = this.getFilesWithStatus(Dropzone.SUCCESS);
        for (var _i_sent = 0; _i_sent < sentFiles.length; _i_sent++) {
            totalBytesSent += sentFiles[_i_sent].upload.bytesSent;
            totalBytes += sentFiles[_i_sent].upload.total;
            }
        //Bugfix end
        _ref = this.getActiveFiles();
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          file = _ref[_i];
          totalBytesSent += file.upload.bytesSent;
          totalBytes += file.upload.total;
        }
        totalUploadProgress = 100 * totalBytesSent / totalBytes;
      } else {
        totalUploadProgress = 100;
      }
      return this.emit("totaluploadprogress", totalUploadProgress, totalBytes, totalBytesSent);
    };

[zhiru]

Hmmm i fixed and is simple, sorry for my english :0

first on Dropzone.prototype.init, after:
this.URL = (_ref = window.URL) != null ? _ref : window.webkitURL;
Add:
this.allfiles = ''; //bug fix 690

second on Dropzone.prototype.enqueueFiles before the return null:
this.allfiles = this.getQueuedFiles(); //bug fix 690
retun null;

third, i changed on Dropzone.prototype.updateTotalUploadProgress
_ref = this.getActiveFiles();
to
_ref = this.allfiles; // bug fix 690

[bruestle]

zhiru --- I carefully made these changes and am now getting NaN for uploadProgress in the totaluploadprogress event.

[zhiru]

Hmmm.. Strange for me works, send me your file or try to see mine :) anything is just call

[zhiru]

Here is on mine, see if works: https://github.com/zhiru/dropzone/blob/master/dist/dropzone.js

[zhiru]

i've made on coffe but didn't pull yet

[bruestle]

Thanks, but that didn't help. I still get a progress percentage when using the current dist and a Nan for the percentage when I use you modified version. My code is very simple:

<script type="text/javascript" src="inc/dropzone.js"></script>

<div class="bfform">    
    <h1>File Uploader</h1>

    <div id="dropzone">
        <div class="dz-message needsclick">Drop files here or click to upload.</div>
    </div>      
</div>

<script language="javascript">
    Dropzone.autoDiscover = false;

    $(document).ready(function() {
        var myDropzone = new Dropzone("div#dropzone", { url: "folder_itemupload.asp?<%=csfld.QS%>"});

        myDropzone.on("totaluploadprogress", function(progress) {
            $('#progress').html(Date()+ '    ' +progress);
        });
    })

</script>

Simply and only changing the src for the first script include causes the problem.

[bruestle]

zhiru --- It seems that the problem is that my code doesn't use enqueueFIles, so this.allfiles is never set.

[zhiru]

@bruestle i'll try to simulate and fix

[mtbsomi]

Same problem here still in v4.3.0.

As queuecomplete works successfully, I only needed this little workaround to prevent flickering:

var oldprogress = 0;
jQuery('.dropzone').dropzone({
        ...
    totaluploadprogress:function(progress) {
        if (progress > oldprogress) {
            jQuery('.progress .progress-bar').css('width',progress+'%');
            oldprogress = progress;
        }
    },
        ...
});

[dnsnx]

+1
@mtbsomi: Your solution works fine, but the progress values are still wrong.
The last upload file makes almost 50%, while the others are too small.

[mtbsomi]

@dnsnx Sure. This does nothing with the calculation, just fixes the visual flickering, which annoy the visitors.

[dnsnx]

@mtbsomi Yes, I know. Is there also a workaround / fix for that issue available?

[mtbsomi]

@dnsnx This topic was started in 2014, and the latest version of DZ was released in 2016, so don't think so.

http://img.memecdn.com/stuck-at-99_o_1189043.jpg

If you know what I mean :)

(In case not: 10 seconds to 99% then 5 minutes to the rest. If Windows can do it, then a webpage can, too :P)

[bacanu]

The problem is that totaluploadprogress is calculated using only active files (uploading and queued).
So when a file finishes uploading, it is removed from the list of active files and the progress is recalculated using only the remaining files.

So if you had 3 active files with 100% / 0% / 0% with a combined progress of 33%, removing the 100% file from the list leaves you with 2 active files with 0% / 0% with a combined progress of 0%.

[dnsnx]

Maybe someone helps this. For my case it worked this way:

totaluploadprogress:function(progress) {
    var allProgress = 0;
    var allFilesBytes = 0;
    var allSentBytes = 0;
    for(var a=0;a<this.files.length;a++) {
        allFilesBytes = allFilesBytes + this.files[a].size;
        allSentBytes = allSentBytes + this.files[a].upload.bytesSent;
        allProgress = (allSentBytes / allFilesBytes) * 100;
    }
    $('#totaluploadprogress').find(".progress-bar").css('width',allProgress + "%");
}

[ozette]

There's also a wrong totaluploadprogress value when using parallelUpload!

updateTotalUploadProgress (line 1383 in version 5.4.0) does something like:

 totalBytesSent += file.upload.bytesSent
 totalBytes += file.upload.total

Now I didn't bother to look too much in what the source code, but I found that this += in the loop goes wrong with parallel enabled. It just continuously adds the total uplaod size on itself for every file in the dropzone. Replacing the += with simply = fixes the problem

[scangroup]

Using the code provided by @dnsnx worked pretty well for me except with parallelUploads. Based on my testing, I am getting better results with the change below that takes number of files uploading into account.

Changed
allProgress = (allSentBytes / allFilesBytes) * 100;

To
allProgress = (allSentBytes / allFilesBytes) * 100 / this.getUploadingFiles().length;

[joebenson]

Comments above sent me in the right direction, but ultimately still wasn't too accurate for my scenario. I found a solution and thought I'd share in case it helps someone else. The concept is to calculate the maximum progress attainable as totalFilesBeingUploaded * 100 and then adding the % complete of remaining active files to the current overall progress, ex: totalFilesFinished * 100 + percCompleteOfEachRemainingActiveFile.

So let's say you are uploading 5 files, 3 of which are 100% complete, 1 of which is 25% complete and another is 50% complete.

completedUploads = 3;
...
currentProgress = (completedUploads * 100) + 25 + 50; // => 375
maxProgress = (completedUploads + remainingUploads) * 100; // => 500
progressBarWidth = (currentProgress / maxProgress) * 100; // => 75% complete!

EXAMPLE IMPLEMENTATION:

The key is setting a variable for filesCompleted (the total number of files finished uploading). The most obvious spot to increment this value is in the success method. Here is an example (untested, because my app uses VueDropzone and has a few extra quirks so it didn't make sense to show here, but this should work.)

Defined outside of Dropzone's scope, but available inside of Dropzone event callbacks:

filesCompleted = 0;

Then, add the following event methods to your Dropzone instance:

success: (file) {
  filesCompleted = filesCompleted + 1;
},
totaluploadprogress: function(progress) {
  let activeFiles = this.getActiveFiles();
  let currentProgress = filesCompleted * 100;
  let remainingProgress = activeFiles.length * 100;
  let maxProgress = remainingProgress + currentProgress;

  if (activeFiles.length) {

    for(var a = 0; a < activeFiles.length; a++) {
      currentProgress   = currentProgress + (activeFiles[a].upload.bytesSent / activeFiles[a].size) * 100;
    }

    $('.progress-bar').width( ((currentProgress / maxProgress) * 100) + "%");

  }

},
queuecomplete: function() {
  filesCompleted = 0;
}

Hope this helps!

[ghost]

+1
How is this not fixed in the current version? This has been reported almost 5 years ago

[deathcat05]

So, this is not fixed yet? Sometimes it works, and other times it doesn't.