CODEWITHSUNDEEP
jquerydropzone.js
Saint Robson
Saint Robson

Reputation: 5525

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?

Upvotes: 1

Views: 35

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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.'"
      });
    }
  });

});

Upvotes: 2

Related Questions