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

回答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 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>

回答2:

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

回答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

来源：https://stackoverflow.com/questions/41107830/adding-3rd-party-javascript-library-dropzone-js-to-aurelia

标签

javascript

aurelia

dropzone.js