Dropzone is not defined

Question

I am quite new at JavaScript and this is driving me crazy.

I want to use Dropzone.js so I downloaded the file dropzone.js from here and included it in my view like this:

<script src="<?php echo JS_DIRECTORY; ?>/dropzone.js"></script>

Then I created the form like that:

<form action="http://localhost/project/uploadTest/upload" class="dropzone">
</form>

And it works fine. It points it to php function and I handle upload on server site.

The problem is when I want to access the dropzone object in JS to configure it. When I do

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

I get

Uncaught ReferenceError: Dropzone is not defined

Any help will be appreciated, thanks

trincot · Accepted Answer · 2016-08-10T08:31:49.863

16

Your code might run too soon. Wrap it in:

window.onload = function() {
    // access Dropzone here
};

or, better (runs sooner than above code):

document.addEventListener("DOMContentLoaded", function() {
    // access Dropzone here
});

or, if you use jQuery:

$(function() {
    // access Dropzone here
});

edited Aug 10 '16 at 08:31

answered Nov 20 '15 at 21:17

trincot

317,000
35
244
286

I've been using dropzone in my project for a couple years now without using $(function() {}); but today I encountered this error and $(function() {}); is not helping at all.. I wonder why? – dapidmini Apr 12 '19 at 03:47
There can be many reasons. Check (1) order of the ` – trincot Apr 12 '19 at 07:51
only `document.addEventListener("DOMContentLoaded", function()` worked for me, otherwise it was saying that Dropzone is already attached – Laurent Aug 14 '19 at 10:44

Rana_S · Answer 2 · 2015-11-20T22:19:14.727

Follow this:

Your HTML file:

<form action="your url" class="dropzone" id="dropzone-form">
</form>

Your JS file:

window.onload = function() {
    // dropzoneFormis the configuration for the element that has an id attribute
    // with the value dropzone-form (or dropzoneForm)
    //initialize the dropzone;
    Dropzone.options.dropzoneForm = {
            autoProcessQueue: 'your value',
            acceptedFiles: 'your value',
            maxFilesize: 'your value',
            ....and so on.
            init: function() {
               myDropzone = this;

               this.on('addedfile', function(file) {
                   //todo...something...
               }
               //catch other events here...
            }
    };
};

Dropzone is not defined

2 Answers2

Linked