Dropzone.js Maxfilesexceeded Event Not Firing

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

Solution 1:

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;
}

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

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