JQuery

How to set limits for file upload in dropzone.js ?

How to set limits for file upload in dropzone.js ?, someone asked me to explain?

The jQuery file upload plugin Dropzone.js supports maxFiles option. You can set simply desired number for file upload like this maxFiles:1. If you set one, then it will allow one file at a time. Further, you can call maxfilesexceeded function. It will delete the preview of the first file and add the new one.

Dropzon.js example:

<script type="text/javascript">
    $(function () {
        Dropzone.autoDiscover = false;
        $("#dZUpload").dropzone({
            url: "/PageUpload.ashx",
            addRemoveLinks: true,
            maxFiles: 1,
            init: function () {
                this.on("maxfilesexceeded", function (file) {
                    this.removeAllFiles();
                    this.addFile(file);
                });
            },
            success: function (file, response) {
                var fileName = response;
               file.previewElement.classList.add("dz-success");
                console.log("Successfully uploaded :" + fileName);
                           },
            error: function (file, response) {
               file.previewElement.classList.add("dz-error");
            }
        });
    });
</script>  
<div id="dZUpload" class="dropzone">
<div class="dz-defaultdz-message"></div>
</div>

Description: When user drag and drop the file, it will show an image preview about the file on the div class “dz-success”. You can hover on the image and view the file name and size. Here, I have returned the dropzone response file name using console.log, after saving the file into the server.

dropzone options

Post your comments / questions