CODEWITHSUNDEEP
javascriptjquerydropzone.js
Todd
Todd

Reputation: 1953

Dropzone.js init function() not being called

I have this HTML:

<div id='drop_zone'>
  <div class="close_button" id="removeAllImages">Remove All</div>
  <form action="PHP/uploads.php" class="dropzone" id='fbDropZone'></form>
</div>

and this Javascript in the $(document).ready(function() {}

window.Dropzone;
Dropzone.autoDiscover = false;
$('#fbDropZone').dropzone = {
    init: function() {
     fbDropZone = this;
     $("#removeAllImages").click(function(){fbDropZone.removeAllFiles();})
    },
    paramName: "file",
    maxFilesize: 5,
    maxFiles : 1,
    autoProcessQueue : false,
};

But the init:function() isn't being executed. I can turn autoProcessQueue to false or true and that works so I know the fbDropZone id is correct - but the maxFiles is ignored as well. Have I done a daft syntax error somewhere..? I'm running Safari 7.

Upvotes: 11

Views: 23648

Answers (3)

Juls
Juls

Reputation: 688

Check that you have to Dropzone.autoDiscover = false outside of your $(document).ready(...).

Wrong:

$(document).ready(function(){
  Dropzone.autoDiscover = false;
  $("#mydropzone").dropzone({
    init: function() {...}
   );
});

Right:

Dropzone.autoDiscover = false;

$(document).ready(function(){
  $("#mydropzone").dropzone({
    init: function() {...}
   );
});

Upvotes: 5

Breith
Breith

Reputation: 2298

Try:

Dropzone.autoDiscover = false;
$("#mydropzone").dropzone({
    init: function() {
        var $this = this;
        $("button#clear-dropzone").click(function() {
            $this.removeAllFiles(true);
        });
    },
    paramName: "file",
    maxFilesize: 5,
    maxFiles : 1,
    autoProcessQueue : false
});

Upvotes: 2

Todd
Todd

Reputation: 1953

It turns out that the code position is crucial: the dropzone calls have to be placed outside of the document loaded or ready function (I guess you'd call it inline).

Upvotes: 12

Related Questions