Init Dropzone with files doesn't impose the limit of maxFiles

Question

When I initialize the Dropzone with a file in it, knowing that the maxFiles is set to 1, I'm still able to add 1 additional file to the dropzone, before I get the maxfilesexceeded error.

Here's a sample of the dropzone initialization:

<div id="pdfs-dz" class="dropzone">
    <div class="dz-default dz-message">Drop PDFs here</div>
</div>

<script>
pdf_files = ['afile.pdf']

Dropzone.autoDiscover = false;

$('#pdfs-dz').dropzone({
    url: '/add-file/pdfs/',
    acceptedFiles: 'application/pdf',
    maxFilesize: 5,
    maxFiles: 1,
    error: function (file, response) {
        console.log('Upload failed');
        console.log(response);
        this.removeFile(file);
        $(file['previewElement']).remove();
    },
    init: function () {
        dz = this;
        pdf_files.forEach(function (val, index) {
            mockFile = {name: val, uploaded_name: val};
            dz.emit('addedfile', mockFile);
            dz.emit('complete', mockFile);
            $(dz.element).find('.dz-size').remove();
            dz.files.push(mockFile);
        });
    }
});
</script>

I'm using jQuery there of course. The list of files in pdf_files is generated from the backend, and I changed the maxFiles limit to 1 to make it easier to explain the issue.

Dropzone generally works perfectly well for me, it's only this maxFiles limit, doesn't get enforced unless the user dropped the file, but not using this initialization.

So am I missing something, or is it a bug?

Answer 1

I had the same problem and I solved it by adding accepted: true to the mockFile.

mockFile = {name: val, uploaded_name: val, accepted: true};