Dropzone-Implementierung in Aurelia funktioniert nicht in Komponente

Question

Ich versuche, Dropzone zu einem Aurelia-Projekt hinzuzufügen. Ich folgte der example von Jeremy Danyow.

Alles funktioniert gut, wenn ich das Projekt wie sein Beispielprojekt aufstelle. Aber ich möchte nicht alles in die main.js und main.html setzen.

Also habe ich versucht, die Dropzone-Funktionalität in eine wiederverwendbare Komponente zu kapseln und diese Komponente der main.html Ansicht hinzufügen.

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> 

hinzugefügt Abhängigkeits

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

aurelia.json

Leider funktioniert das nicht mehr.

Was fehlt in meinem Code?

See the project in my git account

Vielen Dank für alle Vorschläge.

Answer 1

Die vom dropzone Modul exportierte Klasse heißt 10 (siehe Kommentar unten). In diesem Fall müssen Sie Ihren eigenen Klassennamen ändern. Ich würde empfehlen DropzoneCustomElement. Lassen Sie mich wissen, ob das funktioniert:

main.html

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

Komponenten/dropzone.js

import Dropzone from 'dropzone'; 

export class DropzoneCustomElement { 

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

Komponenten/dropzone.html

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