dropzone.js maxfilesexceeded event not firing

Question

I have been looking around and playing for a little while now with the dropzone.js library and cannot get the maxfilesexceeded event to fire. I have looked at the How to limit the number of dropzone.js files uploaded? post for info and have updated to the latest version of the library but the event still wont fire.

I am initialising the listener in the init() function as suggested in the post above. I am able to catch the maxfilesreached event but not the maxfilesexceeded event

$scope.fileUploadConfig = {
    options: {
        url: uploadFileURL,
        maxThumbnailFilesize: 200,
        maxFiles: 5,
        uploadMultiple: false,
        acceptedFiles: "application/vnd.oasis.opendocument.text,application/rtf,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.xls,.xlsx,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,.ppt,.pptx,image/*,.mp3,.m4a,.ogg,.wav,.wma",
        addRemoveLinks: true,
        paramName: "file",
        dictRemoveFile: "Remove",
        clickable: true,
        previewTemplate: $("#dropzone-preview-template").html(),
        init: function() {
            var instance = this,
                selectedPageId = 0;

            instance.on("success", function(event, data) {
                /* ... */
            });

            instance.on("addedfile", function() {
                /* ... */ 
            });

            instance.on("removedfile", function(file) {
                /* ... */
            });

            instance.on("maxfilesreached", function(file) {
                alert("MAX_FILES_REACHED");
            });

            instance.on("maxfilesexceeded", function(file) {
                alert("MAX_FILES_EXCEEDED");
            });
        }
    }
};

All the code is working as expected except for the maxfilesexceeded event.

Bowen Li · Accepted Answer · 2016-07-13T04:15:18.290

I create this test case bellow:

Dropzone.autoDiscover = true;
Dropzone.options.fbDropZone = {
    init: function () {
        instance = this;
        instance.on("maxfilesreached", function(file) {
                alert("MAX_FILES_REACHED");
        });
        instance.on("maxfilesexceeded", function(file) {
                alert("MAX_FILES_EXCEEDED");
        });
    },
    previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div><img data-dz-thumbnail /></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-success-mark"><span>✔</span></div><div class="dz-error-mark"><span>✘</span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>',
    paramName: "file",
    maxFiles: 1,
    autoProcessQueue: false
};

#drop_zone {
    width: 50%;
    border: 2px dashed #BBB;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    color: #BBB;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<div id='drop_zone'>
    <form action="/uploads.php" class='dropzone' id='fbDropZone'></form>
</div>

When you hook dropzonejs with angularjs, you better create a directive for dropzonejs

Hi Bowen, this works for the maxfilesreached event but have you been able to run it with the maxfilesexceeded event. In my questions I wrote that this event works fine but not the maxfilesexceeded. Also as the directive works and all other events are fired ok, I dont see the benefit in adding it to a directive. — SM3RKY, Jul 13 '16 at 03:44
@SM3RKY, i just added "maxfilesExceeded" event, it fires when the second file is to be uploaded. — Bowen Li, Jul 13 '16 at 04:18
Thanks for your help man, I will look into it a bit further when I get a chance but for now will up-vote your answer. Unfortunately it'll only counter whoever just down voted it — SM3RKY, Jul 13 '16 at 04:41
Was anyone ever able to make this work? This doesn't fire for maxfilesexceeded for me either (works correctly for maxfilesreached though). — Kris, Jul 17 '19 at 17:47

dropzone.js maxfilesexceeded event not firing

1 Answers1