Adding 3rd-party JavaScript library (dropzone.js) to Aurelia

Question

I'm having a lot of trouble figuring out how to add a 3rd-party JavaScript library to Aurelia (in this case dropzone.js).

I've installed dropzone via npm and configured it in aurelia.json:

{
  "name": "dropzone",
  "path": "../node_modules/dropzone/dist/min",
  "main": "dropzone.min",
  "resources": [
    "dropzone.min.css"
  ]
}

And added the require statement for the CSS to my app.html:

<require from="dropzone/dropzone.min.css"></require>

However, when I try to do a simple test like just putting the HTML directly in my template, the functionality does not work.

<template>
  <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
</template>

I've also tried this solution but couldn't get it working as well: Dropzone implementation in Aurelia not working in Component

Are you getting any errors? The answer you've posted should have worked — Fabio Luz
No I'm not getting any errors. When I try to drag an image into the box that displays, the browser just opens the image. I think the problem is that the .dropzone element is not getting initialized by the JavaScript. Also, if I click on the box nothing happens whereas with the example from the dropzone.js site, the file uploader box should appear. — user7286765
I've tried import Dropzone from 'dropzone';, import {Dropzone} from 'dropzone'; and import * from 'dropzone'; — user7286765

LStarky LStarky · Accepted Answer · 2016-12-12T19:54:34

It won't work according to your example simply because the dropzone.js library code is loaded before your view-model is activated, and Aurelia won't re-trigger it. You'll need to manually activate dropzone.js within your attached() method in your viewmodel, like this:

// JQuery option
$("div#myId").dropzone({ url: "/file/post" });

// Non-JQuery option
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

Therefore, your view-model might look like this:

file-upload.js

export class FileUpload {

  attached() {
    // activate dropzone.js element
    this.zone = new Dropzone(this.dz, { url: "/file/post"});
  }

  detached() {
    // deactivate the element
    this.zone.destroy();
  }

}

file-upload.html

<template>
  <form ref="dz" action="/file-upload" class="dropzone">
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
  </form>
</template>

Adding 3rd-party JavaScript library (dropzone.js) to Aurelia

3 Answers