Change Dropzone maxFiles Dynamically

Question

I'm trying to dynamically update the MaxFiles property each time a new image is uploaded/deleted. By using the following code its not allowing any image to upload instead of limitize it to maxFiles. And it is not taking the value of the variable maxFile, but when i remove maxFile variable And put a number then it works fine. got source code idea from this Answer.

!function ($) {
"use strict";
var Onyx = Onyx || {};


Onyx = {
    init: function() {
        var self = this,
            obj;

        for (obj in self) {
            if ( self.hasOwnProperty(obj)) {
                var _method =  self[obj];
                if ( _method.selector !== undefined && _method.init !== undefined ) {
                    if ( $(_method.selector).length > 0 ) {
                        _method.init();
                    }
                }
            }
        }
    },

    userFilesDropzone: {
        selector: 'form.dropzone',
        init: function() {
            var base = this,
                container = $(base.selector);

            base.initFileUploader(base, 'form.dropzone');
        },
        initFileUploader: function(base, target) {

            var maxFile = $('.dropzone').attr('data-count');

            var onyxDropzone = new Dropzone(target, {
                url: ($(target).attr("action")) ? $(target).attr("action") : "data.php", // Check that our form has an action attr and if not, set one here
                maxFiles: maxFile, 
                maxFilesize: 5,
                acceptedFiles: ".JPG,.PNG,.JPEG",
            //  previewTemplate: previewTemplate,
            //  previewsContainer: "#previews",
                clickable: true,
                uploadMultiple: false,

            });

            onyxDropzone.on("success", function(file, response) {
                let parsedResponse = JSON.parse(response);
                file.upload_ticket = parsedResponse.file_link;
                var imagecount = $('.dropzone').attr('data-count');
                    imagecount = imagecount - 1;
                    $('.dropzone').attr('data-count', imagecount);
            });
        },
    }
  }
}// JavaScript Document

function openImagePopup(id = null) {
   $(".upload-images").show();
    $.ajax({
        url: 'fetch.php',
        type: 'post',
        data: {id: id},
        dataType: 'json',
        success:function(response) {
            var imagecount = response.counts;
            $('.dropzone').attr('data-count', imagecount);
    }
 });
}  

HTML

<form action="data.php" class="dropzone files-container" data-count="">
   <div class="fallback">
       <input name="file" type="file" multiple />
   </div>
   <input type="hidden" id="imageId" name="imageId">
</form>

Answer 1

UPDATED ANSWER

Once instanciated, the Dropzone plugin will remains with the same options unless you change the instance inner options directly.

To change options of a Dropzone, you can do this with the following line:

$('.dropzone')[0].dropzone.options.maxFiles = newValue;

$('.dropzone')[0] returns the first dropzone DOM element

.dropzone.options return the underlying plugin instance options of the Dropzone. You can now change any options directly on this object.

In you case, you will have to change the function that initiate the popup like follow

function openImagePopup(id = null) {
   $(".upload-images").show();
    $.ajax({
        url: 'fetch.php',
        type: 'post',
        data: {id: id},
        dataType: 'json',
        success:function(response) {
            var imagecount = response.counts;
            $('.dropzone')[0].dropzone.options.maxFiles = imagecount;
    }
 });
}

And change the dropzone onSuccess event like this:

onyxDropzone.on("success", function(file, response) {
    let parsedResponse = JSON.parse(response);
    file.upload_ticket = parsedResponse.file_link;
    var imagecount = $('.dropzone')[0].dropzone.options.maxFiles - 1;
    $('.dropzone')[0].dropzone.options.maxFiles = imagecount;
});

As you can see, You can also remove the data-count="" attribute on you element and reuse the value from the plugin instance options.maxFiles