CODEWITHSUNDEEP
javascripthtmldropzone.js
xtrom0rt
xtrom0rt

Reputation: 323

Creating a custom dropzone

I'm using enyo's dropzone.js for image uploading functionality on a web site I'm in the process of creating. I want to initiate my own Dropzone object and override the previewTemplate and some of the event listeners and so on, but I'm a bit at a loss.

I have included dropzone.js and the js-file for my own customizations just before the closing HTML body tag as follows: (the funky format is Django template tags)

<script src="{% static 'js/dropzone.js' %}"></script>   
<script src="{% static 'js/wm_dropzone.js' %}"></script>

and in my wm_dropzone.js I have the following for the time being:

var wm_dropzone;
wm_dropzone = Dropzone(document.getElementById("wm_dropzone"), {
    url: "upload/",
});

I also have a div block higher up in the HTML defined as follows:

    <div class="row">
        <div class="col-xs-12" id="wm_dropzone">

        </div>
    </div>

This keeps giving me the following error in Firebug console:

TypeError: this.defaultOptions is undefined
dropzone.js (line 424, col 7)

Is there something I'm not doing quite right here? JavaScript world is still quite strange and unexplored to me, so I'm trying to poke my nose here and there and learn some in the process.

I've been trying to follow this tutorial right here and also the dropzone.js official docs, but I've been stuck at this point for quite some time :D

Upvotes: 0

Views: 919

Answers (1)

Luka Kvavilashvili
Luka Kvavilashvili

Reputation: 1389

I'm not sure, but from the error, I guess that you are not using the 'new' keyword for a constructor.

Try using

var wm_dropzone = new Dropzone(document.getElementById("wm_dropzone"), {
    url: "upload/",
});

Upvotes: 1

Related Questions