Dropzonoe limit the number of files upload at a single time, and show error message

Question

Here is my code for dropzone options. Suppose I want to upload 2 files at a time, and all total 5 files, I have achieved the maxfileexceeded error message for uploading more than 5 files in that dropzone. What I require is, if user tries to upload more than 2 files at a single time, a message should show, and remove the other files.

Dropzone.options.dropzone =
         {
            maxFilesize: 2,
            maxFiles: 5,
            autoProcessQueue: true,
            parallelUploads: 2,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf",
            addRemoveLinks: false,
            timeout: 300000,
            error: function(file, response)
            {
               return response;
            },
            init: function() {
                this.on("maxfilesexceeded", function(file){
                    this.removeFile(file);
                    showAlert("File Limit exceeded!","error");
                });
            }
        };

My Dropzone

<form method="post" action="{{url('/saveEventFile')}}" enctype="multipart/form-data" 
                    class="dropzone" id="dropzone">
                @csrf
        </form> 

Answer 1

maybe this works for you set autoQueue to false then add event on addedfile

Dropzone.options.dropzone =
             {
                maxFilesize: 2,
                maxFiles: 5,
                autoQueue:false,
                autoProcessQueue: true,
                parallelUploads: 2,
                renameFile: function(file) {
                    var dt = new Date();
                    var time = dt.getTime();
                   return time+file.name;
                },
                acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf",
                addRemoveLinks: false,
                timeout: 300000,
                error: function(file, response)
                {
                   return response;
                },
                init: function() {
                    this.on("maxfilesexceeded", function(file){
                        this.removeFile(file);
                        showAlert("File Limit exceeded!","error");
                    });
        this.on("addedfile", function(file) { if(this.files.length<=2){enqueueFile(file);} this.processQueue();});


                }
            };