Dropzone.js init function() not being called

Question

I have this HTML:

Click to copy

<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() {}

Click to copy

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.

Answer 1

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).

Answer 2

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

Wrong:

Click to copy

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

Right:

Click to copy

Dropzone.autoDiscover = false;

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

Answer 3

Try:

Click to copy

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
});