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";