CODEWITHSUNDEEP
angulartypescriptdropzone.js
boddah
boddah

Reputation: 146

Dropzone already attached in Angular 2 or Typescript

I have a programmatically created Dropzone inside an Angular 2 Component which I would like to have attached to the body so my entire website is the "dropzone" for uploading.

Every time the component is instantiated it will try to attach the dropzone.

this.dropzone = new Dropzone('body', this.createOptions());

First time I execute this it works, but as soon as I re-navigate to the component I get the Dropzone already attached. error.

When searching for a solution I noticed the option to use Dropzone.autoDiscover = false

But when trying this I get a compilation error of Typescript: Left-hand side of assignment expression cannot be a constant or a read-only property.

So my question is: how can I detach the drop zone from the body and re-attach it when necessary? Or how should I proceed to have this functionality?

I am using typings @types/dropzone from https://www.npmjs.com/package/@types/dropzone version 4.3.34

Thanks

Upvotes: 0

Views: 1887

Answers (2)

Taku
Taku

Reputation: 5937

I've used ngx-dropzone-wrapper and you can bind your dropzone like this

<div class="upload-area"
     #dz=dz
     [dropzone]="dzImageConfig"
     (error)="onUploadError($event)"
     (success)="onUploadSuccess($event)"
     (sending)="onSending($event)"
     (removedFile)="onRemovedFile($event)">

</div>

You should not have to bind to a variable using this library but you can.

Edit: Make sure callbacks are camel case. E.g. "removedFile" not "removedfile" https://github.com/zefoy/ngx-dropzone-wrapper/blob/master/README.md "Event names are in camel case (not lower case)."

Upvotes: 2

uddhab
uddhab

Reputation: 338

Dropzone.instances have dropzone attatched instances. You can check them.

Upvotes: 0

Related Questions