when i use displayExistingFile function maxFiles does not seem to work

[tubbynl]

Describe the bug
when i use displayExistingFile to init the Dropzone widget with files already uploaded it does not seem to handle the maxFiles setting correctly.

To Reproduce

• set maxFiles to 10
• add 8 files displayExistingFile function
• upload 4 files
• all 4 files are accepted by the widget
• if no files are added using displayExistingFile and i upload 12 files it works (gives errors on the last 2 files)

Dropzone.options.productPhotoDropzone = {
            maxFiles: 10,
            init: function () {
                let thisDropzone = this;
                $.getJSON("/some/endpoint/producing/json/list/with/8/items", function (data) {
                    $.each(data, function (index, productImage) {
                        thisDropzone.displayExistingFile(productImage, productImage.dataURL);
                    });
                });
                thisDropzone.on('success', function (file,productImage) {
                    if(!thisDropzone.getQueuedFiles().length) {
                        location.reload();
                    }
                });
                thisDropzone.on('error', function (file) {
                    if(!thisDropzone.getQueuedFiles().length) {
                        location.reload();
                    }
                });
            }
        };

Expected behavior

• i expect errors for maxFiles reached

Browser / OS:

• OS & Device: MacOS on a MacBook Pro
• Browser FireFox
• Version 91.0.2 (64-bits)

Screenshots

scenario one; having 8 images loaded via displayExistingFile and uploading 4 (expect 2 to be rejected)

scenario two; having 0 images loaded via displayExistingFile and uploading 12 (2 are rejected )

Additional context

produced json response by /some/endpoint/producing/json/list/with/8/items uri

[
  {
    "type": "image/jpeg",
    "kind": "image",
    "accepted": true,
    "name": "image-from-ios-613a4a3583170969636064.jpg",
    "dataURL": "assets/product/63178/image-from-ios-613a4a3583170969636064.jpg",
    "size": 363732
  },
  ... 6 more items in this array ...
  {
    "type": "image/jpeg",
    "kind": "image",
    "accepted": true,
    "name": "image-from-ios-2-613a4a3782aea724275026.jpg",
    "dataURL": "assets/product/63178/image-from-ios-2-613a4a3782aea724275026.jpg",
    "size": 331934
  }
]

[applibs]

I can confirm that maxFiles is ignored when I add already uploaded files.
I see that only on one place is function which will add file into array: this.files.push(file); and its in function addFile(file) nowhere else.
It must be added into same array also when I list already uploaded files from server.

[tubbynl]

i think merging #2003 would fix this issue @enyo

[applibs]

Please merge it, I tested and it works.

[applibs]

I found a minor problem. When displayExistingFile() receive more than maxFiles it will add all of them except cut it to maxFiles count. More files that maxFiles should be ignored or if some parameter will be true then removed/deleted.

[Kcko]

Problem still alive or exists some workaround? I am dealing with the same thing in #2230