jQuery Failed to Reinitialised Dropzone.JS Object

I have this code :

<?php

$(document).ready(function(){

    var dropzone_maxfiles = '.$product_maxfiles.';

    $( ".product_imgfiles" ).click(function(event) {
        event.preventDefault();
        var img_file = $( this ).children( "img" ).attr( "src" );

        $.ajax({
            url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'&imgfile="+img_file+""
        });

        $( this ).parent( "div" ).remove();                 
        dropzone_maxfiles = dropzone_maxfiles + 1;

        var myDropzone = new Dropzone(".dropzone", { 
            url: "controller/ctrl.dropzonejs.php?token='.$product_token.'&key='.$secret_token.'",
            maxFilesize: 2,
            maxFiles: dropzone_maxfiles,
            acceptedFiles: ".jpeg, .jpg, .png, .gif"
        });
    });

    var myDropzone = new Dropzone(".dropzone", { 
        url: "controller/ctrl.dropzonejs.php?token='.$product_token.'&key='.$secret_token.'",
        maxFilesize: 2,
        maxFiles: '.$product_maxfiles.',
        acceptedFiles: ".jpeg, .jpg, .png, .gif"
    });

    myDropzone.on("complete", function() {
        var rejected = myDropzone.getRejectedFiles();

        if (rejected == "" ) {
            $(".btn-vendor-addnew").removeClass("disabled");
            $(".dropzone-error").css("display","none");
        } else {
            myDropzone.removeAllFiles(true);
            $(".btn-vendor-addnew").addClass("disabled");
            $(".dropzone-error").css("display","block");

            $.ajax({
                url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'"
            });
        }
    });

});

?>

the problem is, the myDropzone object always use var myDropzone = new Dropzone(".dropzone", {...} from $(document).ready(). even .product_imgfiles is clicked. this makes the maxFiles still use the old value. how to make myDropzone object use updated value everytime .product_imgfiles is clicked?

Answers 1

  • Try to set the value of the option value in myDropzone

    $(document).ready(function() {
    
      var dropzone_maxfiles = '.$product_maxfiles.';
    
      $(".product_imgfiles").click(function(event) {
        event.preventDefault();
        var img_file = $(this).children("img").attr("src");
    
        $.ajax({
          url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'&imgfile=" + img_file + ""
        });
    
        $(this).parent("div").remove();
        dropzone_maxfiles = dropzone_maxfiles + 1;
        myDropzone.options.maxFiles = dropzone_maxfiles;
    
      });
    
      var myDropzone = new Dropzone(".dropzone", {
        url: "controller/ctrl.dropzonejs.php?token='.$product_token.'&key='.$secret_token.'",
        maxFilesize: 2,
        maxFiles: '.$product_maxfiles.',
        acceptedFiles: ".jpeg, .jpg, .png, .gif"
      });
    
      myDropzone.on("complete", function() {
        var rejected = myDropzone.getRejectedFiles();
    
        if (rejected == "") {
          $(".btn-vendor-addnew").removeClass("disabled");
          $(".dropzone-error").css("display", "none");
        } else {
          myDropzone.removeAllFiles(true);
          $(".btn-vendor-addnew").addClass("disabled");
          $(".dropzone-error").css("display", "block");
    
          $.ajax({
            url: "controller/ctrl.dropzonejs-cleaner.php?token='.$product_token.'&key='.$secret_token.'"
          });
        }
      });
    
    });
    

Related Articles