Dropzone implementation in Aurelia not working in

Question

I am trying to add dropzone to an Aurelia project. I followed the example of Jeremy Danyow.

It all works fine when I'm setting up the project like his example project. But I don't want to put everything into the main.js and main.html.

So I tried to encapsulate the dropzone functionality into a reusable component and adding this component to the main.html view.

main.html

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

components/dropzone.js

import dropzone from 'dropzone';

export class Dropzone {

  attached() {
    this.zone = new Dropzone(this.targetElement, { url: "/file/post"});
  }
}

components/dropzone.html

<template>
  <h2>Dropzone from components/dropzone.js</h2>
  <form class="dropzone" ref="targetElement"></form>
</template>

added dependency to aurelia.json

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

Unfortunately this isn't working anymore.

What is missing in my code?

See the project in my git account

Thanks for any suggestions.

Answer 1

The class exported by the dropzone module is named Dropzone (per your comment below). Given this, you'll need to change your own class name. I'd recommend DropzoneCustomElement. Let me know if this works:

main.html

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

components/dropzone.js

import Dropzone from 'dropzone';

export class DropzoneCustomElement {

  attached() {
    this.zone = new Dropzone(this.targetElement, { url: "/file/post"});
  }
}

components/dropzone.html

<template>
  <h2>Dropzone from components/dropzone.js</h2>
  <form class="dropzone" ref="targetElement"></form>
</template>