Load Dropzone.js with Require.js‏

Question

I'd like to use Dropzone.js in application which is built with Backbone and Require.JS, but I have no idea how to implement it.

Should I use require()?

What is the most skillful way to manage it?

Edit:

I've treid to use dropzone-amd-module in on of my backbone view module like this:

define([
  'jquery',
  'underscore',
  'backbone',
  'dropzone'
  ], function($, _, Backbone, Dropzone){

var NewProduct = Backbone.View.extend({
  el: $('.products'),
  render: function(){

      $(this).empty();
      require(['text!templates/product_new.html'], function(product_new){
        var product_new = _.template(product_new);
        $('.products').html(product_new);
      }); 

      Dropzone.forElement("#my-awesome-dropzone").on("addedfile", function(file) {
        console.log("uploaded");
      });

    }
  });

return NewProduct;
});

Using this HTML in template:

<form action="/upload'" class="dropzone" id="my-awesome-dropzone" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" />
  </form>

But nothing happened.

Answer 1

Just a quick follow up on @romaricdrigon great answer.

import * as Dropzone from 'dropzone';

Will import dropzone.js (un-minified version). We can clearly see this from the package.json file.

"license": "MIT",
  "main": "./dist/dropzone.js",
  "maintainers": [
    {
      "name": "Matias Meno",

Ideally we would want the "main" field to look like this:

"main": "./dist/min/dropzone.min.js",

Therefore, if you want to use dropzone(<=5.72) and es6 in production, this is the line you should use.

import * as Dropzone from "dropzone/dist/min/dropzone.min.js";

Answer 2

My issue is that when I put the .dropzone class on my element, it is initialized. But in my define() module, I'm setting options that are never picked up by the application. I'm using the dropzone-amd-module. I'm not sure what's going on.

**HTML**
<form action="/vendor/uploadProductImage" class="dropzone" id="product-image-drop">
    <div class="dz-default dz-message"></div>
<input type="hidden" name="productId" value=${productInstance.id}>
</form>



**JS**
Dropzone.options.productImageDrop = {
        url : '/vendor/uploadProductImage',
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 5, // MB
        acceptedFiles: ".jpg, .png, .jpeg",
        createImageThumbnails: true,
        maxThumbnailFilesize: 15, // MB,
        thumbnailWidth: "50px",
        thumbnailHeight: "50px"
    };

Answer 3

I have been struggling with the same issue recently, and the solution may still be useful to some (tested with Dropzone v5 and webpack).
Dropzone will define empty options (globals) at the beginning of the provided amd-module, so the trick is to import all globals from the module, then redefine the options.

In code:

import * as Dropzone from 'dropzone';

// If you want to disable autodiscover, do:
//Dropzone.autoDiscover = false;

// Or if you want to configure a specific form, just replace formId below with your form ID:
Dropzone.options.formId = {
    // ....
};