An oversized file breaks successive files uploads if it is first photo processed for uploading (first dropped into the dropzone)

[pyhammond]

Issue Description

If the first image dropped into the dropzone happens to be too large when compared against the maxFilesize setting, the rest of the files will not properly upload and will not fire a success event because the queuecomplete event gets called too early.

To Reproduce

To reproduce the behavior:

1. Create event handlers for the success, error and queuecomplete events in your init function used by dropzone.js
2. Set break points at the top of the the success and error event handler code from step 1
3. Drop multiple files into the dropzone - make sure the oversized photo is the first one to process
4. Notice that once the error callback is called once, the success callback never fires for the photos that were not oversized

This does not happen if the oversized photo is 2nd or later in the group of photos to process. It only happens if it is the 1st one to process.

Expected behavior

It should behave the same way no matter where the oversized photo exists in the queue of files to upload.

Suggested Patch

I have tracked it down to the complete event handler code around line 8159 of the dropzone.js version 5.9.3. Here is the patch I implemented to fix this issue for us. Feel free to use this to fix the code in v5 of Dropzone.js.

*** dropzone.js	Thu Jan  9 11:34:04 2025
--- dropzone.js	Thu Jan  9 11:35:04 2025
***************
*** 8157,8167 ****
        }); // Emit a `queuecomplete` event if all files finished uploading.
  
        this.on("complete", function (file) {
!         if (_this2.getAddedFiles().length === 0 && _this2.getUploadingFiles().length === 0 && _this2.getQueuedFiles().length === 0) {
            // This needs to be deferred so that `queuecomplete` really triggers after `complete`
            return setTimeout(function () {
!             return _this2.emit("queuecomplete");
!           }, 0);
          }
        });
  
--- 8157,8170 ----
        }); // Emit a `queuecomplete` event if all files finished uploading.
  
        this.on("complete", function (file) {
!         const _queue_check = () => _this2.getAddedFiles().length === 0 && _this2.getUploadingFiles().length === 0 && _this2.getQueuedFiles().length === 0;
!         if (_queue_check()) {
            // This needs to be deferred so that `queuecomplete` really triggers after `complete`
            return setTimeout(function () {
!             if (_queue_check()) {
!                 return _this2.emit("queuecomplete");
!             }
!           }, 1000);
          }
        });
  

[NicolasCARPi]

Hello,

Would you like to submit a PR in the maintained fork repository so your patch can be credited properly?

[pyhammond]

sure. I'll do that.