custom events for dropzone including server side rendering & max files upload limit

dropzone.js

$(function () {
            // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
            var previewNode = document.querySelector("#referenceTemplate");
            previewNode.id = "";
            var previewTemplate = previewNode.parentNode.innerHTML;
            previewNode.parentNode.removeChild(previewNode);
            Dropzone.autoDiscover = false;

            var myDropzone = new Dropzone(".uploadReference", {// Make the whole body a dropzone       
                url: "ajax/upload-file.php", // Set the url
                thumbnailWidth: 40,
                thumbnailHeight: 40,
                parallelUploads: 1,
                //maxFiles: 0,               
                previewTemplate: previewTemplate,
                autoQueue: true, // Make sure the files aren't queued until manually added
                previewsContainer: "#referencePreviews", // Define the container to display the previews
                clickable: ".uploadReference", // Define the element that should be used as click trigger to select files.
                acceptedFiles: ".jpg,.jpeg,.png,.pdf,.txt,.docx,.xlsx",
                filesizeBase: 1024,
                params: {
                    nominationId: <?= $id ?>,
                    media: 'evaluation_files'
                },
                accept: function (file, done) {
                    if (file.size > 1048576) {
                        done('File size exceeded limit of 1 MB');
                    } else {
                        done();
                    }
                },
                init: function () {
                    var thisDropzone = this;

                    //Call the action method to load the images from the server
                    $.getJSON("ajax/get-file.php?nominationId=<?= $id ?>&media=evaluation_files").done(function (data) {
                        $.each(data, function (index, item) {
                            // Create the mock file:
                            var mockFile = {
                                name: item.name,
                                size: item.size,
                                type: item.ext,
                                viewLink: "uploads/" + item.file,
                                nominationId: item.nominationId,
                                id: item.id,
                                media: "evaluation_files"
                            };

                            // Call the default addedfile event handler
                            thisDropzone.emit("addedfile", mockFile);

                            // CREATE THUMBNAIL IF THE FILE TYPE IS IMAGE
                            if (item.ext == "jpg" || item.ext == "jpeg" || item.ext == "png") {
                                thisDropzone.emit("thumbnail", mockFile, "timthumb.php?src=uploads/" + item.file + "&w=40&h=40");
                            }
                            thisDropzone.emit("complete", mockFile);
                        });
                    });

                    this.on("addedfile", function (file) {
                        if (file.size > 1048576) {
                            var removeButton = Dropzone.createElement("<div class='column'><span class='btn btn-danger btn-xs pull-right cancel'><i class='fa fa-times'></i> Remove File</span></div>");
                        } else {
                            var removeButton = Dropzone.createElement("<div class='column'><span data-dz-remove class='btn btn-danger btn-xs pull-right delete'><i class='fa fa-trash-o'></i> Delete</span></div>");
                        }
                        file.previewElement.appendChild(removeButton);

                        var viewButton = Dropzone.createElement("<div class='column'><span class='btn btn-primary btn-xs pull-right view'>view</span></div>");
                        file.previewElement.appendChild(viewButton);

                        // Capture the Dropzone instance as closure.
                        var self = this;

                        // Listen to the remove button click event
                        removeButton.addEventListener("click", function (e) {
                            if (file.size > 1048576) {
                                self.removeFile(file);
                            } else if (window.confirm('Are you sure you want to delete ?')) {
                                $.post("ajax/delete-file.php?nominationId=" + file.nominationId + "&id=" + file.id + "&media=" + file.media, function () {
                                    self.removeFile(file);
                                });
                            }
                        });

                        // Listen to the view button click event
                        viewButton.addEventListener("click", function (e) {
                            window.open(file.viewLink, '_blank');
                        });

                        // CUSTOM THUMBNAIL FOR FLES OTHER THAN IMAGE TYPE
                        if (file.type == "application/pdf" || file.type == "pdf") {
                            file.previewElement.querySelector("[data-dz-thumbnail]").src = "images/pdf-icon.png";
                        } else if (file.type == "text/plain" || file.type == "txt") {
                            file.previewElement.querySelector("[data-dz-thumbnail]").src = "images/txt-icon.png";
                        } else if (file.type == "application/msword" || file.type == "docx" || file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
                            file.previewElement.querySelector("[data-dz-thumbnail]").src = "images/docx-icon.png";
                        } else if (file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type == "xlsx") {
                            file.previewElement.querySelector("[data-dz-thumbnail]").src = "images/xlsx-icon.png";
                        }
                        //console.log(file);
                    });

//                    this.on("maxfilesexceeded", function (file) {
//                        this.removeAllFiles();
//                        alert("Soory, You can't upload more than 5 files");
//                    });
                }
            });

            myDropzone.on("processing", function (file) {
                $("#submitEvaluation").attr("disabled", true);
            });

            myDropzone.on("success", function (file, response) {
                response = JSON.parse(response);
                file.nominationId = response.nominationId;
                file.id = response.id;
                file.media = response.media;
                file.viewLink = response.viewLink;
            });

            myDropzone.on("removedfile", function (file) {
                if (!file.id) {
                    return;// The file hasn't been uploaded
                } else {
                    $.post("ajax/delete-file.php?nominationId=" + file.nominationId + "&id=" + file.id + "&media=" + file.media);
                }
            });

            myDropzone.on("queuecomplete", function (file) {
                $("#submitEvaluation").attr("disabled", false);
            });
        });

mhhm