7 Mar

Limit Number of files upload using Dropzonejs Options – Part 1

In previous post we learn how to upload a files using DropZoneJs in ASP.NET MVC you can check the article here  Dropzone Upload. In this post we will learn how  to limit a number of files to be uploaded using Dropzonejs options..

Implementation

You need to specify the   maxFiles property. It represents number of files to uploaded. If maxFiles : 2 then it will accept only two files only

//File Upload response from the server
    Dropzone.options.dropzoneForm = {
        maxFiles: 2,
        init: function () {
            this.on("complete", function (data) {
                var res = eval('(' + data.xhr.responseText + ')');
            });
        }
    };

If you want to apply the style after limit exceeded you can use the css

.dz-max-files-reached {

        background-color: red;
    }
Output
limit number of files uploaded in dropzone js

limit number of files uploaded in dropzone js

Source Code

You can download the source from the Github

2 thoughts on “Limit Number of files upload using Dropzonejs Options – Part 1

  1. Hi
    I love your Work, but I get a JavaScript error when exceeded limitation : “responseText cant be collected for reference. undefined or null.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>