CODEWITHSUNDEEP
javascriptjqueryhtmldropzone.js
Darrell
Darrell

Reputation: 37

Programmatically create dropzone instance with jQuery not working?

I have a bit of an issue with getting Dropzone to work with jQuery. I was wondering if anyone could help.

I've tried both jQuery version 1.11.1 and 2.1.1 and neither seems to work. I've made it to work with straightforward Javascript but, I was planning on doing some major scripting and want dropzone to work with jQuery to save a few variables from being created to transfer data.

The Dropzone documentation mentions a jQuery plugin. But, I can't find it anywhere in the source and it's only mentioned here: http://www.dropzonejs.com/#toc_4 With no information as to where it actually is.

I'm planning on using Dropzone with a div rather than a form and with no server code involved. It's a static one-off-use web page. For the time being I'm just following the documentation.

Here's some of my code:

HTML

    <link href="css/dropzone.css" type="text/css" rel="stylesheet" />
    <script src="dropzone.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
</head>

<body>
    <div id="dropthat" class="dropzone"></div>
    <script src="script.js"></script>

jQuery

$(document).ready(function() {
    $("div#dropthat").dropzone({ url: "/file/post" });
    //Below is my older, working Javascript code, still here for comparison.
    //var myDropzone = new Dropzone("div#dropthat", { url: "/file/post" });
});

I'm sure I've either missed something really small or it is indeed a problem with the lack of the jQuery plugin file. Does anyone know about the jQuery plugin file and it's name? I've run a search for jQuery in the source files for dropzone but can't find anything. It seems like Dropzone was made as a jQuery plugin first and has only recently become a standalone. Or maybe it's my version of jQuery.

If worst comes to worst, I can always grab variables using JavaScript event listeners rather than jQuery.

Upvotes: 0

Views: 2438

Answers (1)

user2844991
user2844991

Reputation:

I'm not entirely sure what are you asking for, but if you want to know about the relationship between your library and JQuery, just look inside the source code:

if (typeof jQuery !== "undefined" && jQuery !== null) {
    jQuery.fn.dropzone = function(options) {
      return this.each(function() {
        return new Dropzone(this, options);
      });
    };
  }

First it checks if jQuery is already loaded on your page and if it does, then it attaches itself as a plugin, which means: in order to use the jQuery plugin you need to ensure that your jQuery library script runs before Dropzone.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="dropzone.js"></script>

Notes:
- I looked inside the source code provided in the INSTALLATION section from here
- Git wiki (maybe it will help you during development)

Upvotes: 2

Related Questions