Adding 3rd-party Javascript Library (dropzone.js) To Aurelia

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 aurel

Solution 1:

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 optionvar myDropzone = newDropzone("div#myId", { url: "/file/post"});

Therefore, your view-model might look like this:

file-upload.js

exportclassFileUpload {

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

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

}

file-upload.html

<template><formref="dz"action="/file-upload"class="dropzone"><divclass="fallback"><inputname="file"type="file"multiple /></div></form></template>

Solution 2:

Try adding import 'dropzone'; to your view-model.

Solution 3:

Try using dropzone-amd-module.min. Like this:

{"name":"dropzone","path":"../node_modules/dropzone/dist/min","main":"dropzone-amd-module.min","resources":["dropzone.min.css"],"deps":["jquery"]}

Then, import Dropzone from 'dropzone'; like in the other answer