zefoy / ngx-dropzone-wrapper Goto Github PK

View Code? Open in Web Editor NEW

172.0 172.0 53.0 9.18 MB

Angular wrapper library for Dropzone

License: MIT License

HTML 12.65% CSS 17.96% TypeScript 68.85% JavaScript 0.54%

ngx-dropzone-wrapper's People

Contributors

Stargazers

Watchers

Forkers

tvblomberg justgoscha phixme govorov tplessis topa benny2009 saaksin mshahin364 baha2jo anoxy sgotre seangwright jeffersonbraga pripateluk rachoor adrianabreu minuz msalah85 fbatiga kwakuzigah saldi viktor-bredihin segaz2002 jzahoor justfathi devx00 shivkumarsaini ioxua bryansummers14 kinmy khawajaasim engpetershaker wtospit lolibai ingeduardocomp krutik-dhameliya eyobyb jobzmall-inc yogen-darji-hs siamskoi dcg90 abuakkar rqman oclavi pajaroblanco pvolyntsev liquid-js albemestre cadalzolc danielstals destra-software cyrilknops

ngx-dropzone-wrapper's Issues

Callbacks (success, error, ...) are not executed in the Angular Zone.

The code in the callbacks (success, error, ...) has to be wrapped inside

this.ngZone.run(() => { // my code })

in order to work properly with bindings (in any case). It would be nice to has this inside this wrapper implementation, cause this is what the user expects.

Rename the library for less confusion when Angular 4 is released

I have decided to rename the library to ngx-dropzone-wrapper so that there is less confusion when Angular 4 is released.

Refactor component to use the directive

Check / wait if angular supports host directives, it would make the implementation slightly cleaner.

DropzoneConfigInterface does not allow "clickable" to be a string or an array

According to the documentation on http://www.dropzonejs.com/#config-clickable the clickable option may either be a boolean, a string or an array.

However in the DropzoneConfigInterface, it is specified, that this option must be a boolean.

Add directive as an alternative to component usage

Remove file triggers

I would like it to have support for when I wanted to delete a file, I could request a call to delete it.

I tried to just change to addRemoveLinks: true, however nothing happens.

Not properly working in safari browser.

Dropzone loading display but image not uploading.
I am trying to upload from iPhone safari browser.

Unit test throws errors

Thanks a lot for this nice wrapper. But I'm a little bit in trouble with my unit tests.

The following error occurs in the unit tests of the component that uses the ngx-dropzone-wrapper directive:
inline template: 40: 3 caused by: Can not read property 'destroy' of undefined

This error occurs in Angular 2 and in Angular 4.

Maybe you should check if this.dropzone exists before you destroy it in ngOnDestroy.

Please add the withCredentials property to DropzoneConfigInterface.

Hello! This wrapper is amazing, first off. Just having one issue. I am using OAuth, and I require headers on every api call, including file uploads. When I set the config - like so:
`public getImageConfig(): DropzoneConfigInterface {
if (!this.dzImageConfig) {
this.dzImageConfig = {
server: this.apiBaseUrl + '/File/image',
maxFilesize: this.maxFileSize,
acceptedFiles: 'image/*',
headers: this.getHeader(),
renameFilename: (filename) => (new Date().getTime() + '_' + filename)
};
}
return this.dzImageConfig
}

private getHeader(): Headers {
let headers = new Headers(),
profJson = localStorage.getItem('profile'),
profile = this.isValidJson(profJson) ? JSON.parse(profJson) : new Token();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + profile.access_token);
return headers;
}and then try to upload a file, the console blows up with this error:Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (name, value) {
var /** @type {?} */ values = this.getAll(name);
if (values === null) {
this.set(name, value);
}
else {
values.push(value);
}
}' is not a valid HTTP header field value.`

Everything works fine without the headers being set (aside from not being able to authorize the sender).

Thanks!

No url provided, dropzone already attached

Hello. I am gettint these errors while trying to use the libary. I would appreciate any help please

Build with aot error with css and js files not found

Running ng serve works perfect. If I build the app for production it gives me error-

ERROR in ./~/angular2-dropzone-wrapper/dist/lib/dropzone.component.js
Module not found: Error: Can't resolve 'dropzone' in '/Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/dist/lib'
 @ ./~/angular2-dropzone-wrapper/dist/lib/dropzone.component.js 2:15-34
 @ ./~/angular2-dropzone-wrapper/dist/lib/index.js
 @ ./~/angular2-dropzone-wrapper/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-dropzone-wrapper/dist/lib/dropzone.directive.js
Module not found: Error: Can't resolve 'dropzone' in '/Users/sunnygupta/Sites/customer/node_modules/angular2-dropzone-wrapper/dist/lib'
 @ ./~/angular2-dropzone-wrapper/dist/lib/dropzone.directive.js 2:15-34
 @ ./~/angular2-dropzone-wrapper/dist/lib/index.js
 @ ./~/angular2-dropzone-wrapper/dist/index.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Temporary solution I found was copying and pasting the dropzone folder from /node_modules to
/node_modules/angular2-dropzone-wrapper/node_modules/

How to send withCredentials in XHR request?

how to custom css of element dropzone

My app has config maxFiles = 1, so the dropzone has view like this

but i want to show view like this if i reset css of class .dz-text to

.dz-text {
  margin-top: 0px;
  transform: none;
}

how cant i config the dropzone with my style on class .dz-text?

sorry for my bad english and big thanks.

Adding a sample for ES5

Hi, this is a feature request

Can you both support and write an example to use your wrapper in ES5, not in TypeScript?

'server' no longer implemented in DropzoneConfigInterface

As far as I can tell the 'server' property was removed from DropzoneConfigInterface in 4.5.x

Changelog is not included and the README.md still shows instruction to use 'server'.

Can you please clarify the changes and the correct way of using this library in 4.5.2?

Thank you

Setting multiple headers

'dictRemoveFileConfirmation' does not exist in type 'DropzoneConfigInterface'.

`
import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DropzoneConfigInterface,DropzoneComponent } from 'ngx-dropzone-wrapper';
const DROPZONE_CONFIG: DropzoneConfigInterface = {
dictRemoveFileConfirmation: true,

// Change this to your upload POST address:
url: environment.apiurl+'/product/media',
maxFilesize: 50,
method: 'post',
acceptedFiles: 'image/*',
headers:{'Cache-Control': null,
'X-Requested-With': null},
paramName: 'media[]',
addRemoveLinks: true,
createImageThumbnails: true,
};`

this is my sample code, i want to set confirmation as documented here:

http://www.dropzonejs.com/#config-dictRemoveFileConfirmation

but i am getting error when i set value for dictRemoveFileConfirmation.

this is error which i am getting:

Type '{ dictRemoveFileConfirmation: boolean; url: string; maxFilesize: number; method: string; accepted...' is not assignable to type 'DropzoneConfigInterface'.
Object literal may only specify known properties, and 'dictRemoveFileConfirmation' does not exist in type 'DropzoneConfigInterface'.
please help.

Uploading to S3

I'm trying to figure out how to dynamically change the url on processing event to an S3 signed url. I've done this before with Dropzone directly but can't seem to do this with the wrapper. Any help would be greatly appreciated.

when i drag and drop any files it is redirecting one url (post req)

When I drag and drop files it is redirecting one URL. I don't want to this url. I want this files convert into front end no need to back-end.
Any possibility available this drag and drop without AJAX calls files convert into front end.

Please provide the solutions on this?

use [placeholder] with directive?

is there any way to use placeholder image with dropzone directive ?

Add outputs for all dropzone events

Preview Template

Hello All,
Is there any way to add , previewTemplate of uploaded document using this wrapper. Please mention where to set default dropzone js configuration option into this wrapper

How to use .emit() event?

Hi,
I'm trying to reproduce this (https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server) with ngx-dropzone-wrapper:

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

How could I do that .emit() with ngx-dropzone-wrapper?

withCredentials request option

Im not able to use withCredentials request option in the dropzone configuration

Remove/update dependency on @angular/http

https://github.com/zefoy/ngx-dropzone-wrapper/blob/master/src/lib/dropzone.module.ts

HttpModule from @angular/http is deprecated and replaced by HttpClientModule from @angular/common

I don't understand why the dependency is there, since Dropzone.js use XMLHttpRequest directly. So maybe it can just be removed?

How to use reset() Function in angular way.

Hi I want to call reset() click of submit button or any other event

Available control / helper functions (provided by the directive):

reset() // Resets the dropzone upload area (removes all finished preview files).

below is my code .html file

<dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" (complete)="onUploadComplete($event)" ></dropzone>

and .componet file.

public config: DropzoneConfigInterface = {
        paramName: 'inputFiles',
        addRemoveLinks:true
    };
    
    

    onUploadError(args: any) {
        console.log('onUploadError:', args);
    }

    onUploadSuccess(args: any) {
        console.log('onUploadSuccess:', args);
    }
    
    onUploadComplete(args: any) {
       console.log('onUploadComplete:', args); 
       this.reset();
    }

Data not updated on view

When i tried CSV files on dropzone component CSV updated and i got the result also then this result i putted on this.result variable this result data is not view on html page.

Dropzone Config. timeout option

Since version 4.4.0 the timeout options exsists. Needs to be added. Also: renameFilename option is deprecated

Cannot access to server response from onFailed() event

When onFailed() event is fired I can not read the server response. $event just only passes Request metadata.

Current Behavior

This is what my server responses on 500 status

This is what I receive from the (error)="onUploadError($event)"

I expanded all the properties from the $event param but any of them seems to wrap the server response
Do I have to use another param to access to the server response? or how can I using $event? I'd appreciate your response.

Build failure

Hi. Running npm run build raises this:


> [email protected] build /home/stas/dev/forks/angular2-dropzone-wrapper
> webpack --config config/webpack.config.js

TypeError: Cannot read property 'exclude' of undefined
    at applyDefaults (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/instance.ts:266:72)
    at Object.ensureInstance (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/instance.ts:145:5)
    at compiler (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/index.ts:37:20)
    at Object.loader (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/index.ts:18:18)
    at LOADER_EXECUTION (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:114:14)
    at runSyncOrAsync (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:115:4)
    at iterateNormalLoaders (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:224:2)
    at iterateNormalLoaders (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:213:10)
    at /home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:228:3
    at Object.context.callback (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:106:13)
    at Object.module.exports (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/angular2-template-loader/index.js:32:10)
    at LOADER_EXECUTION (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:114:14)
    at runSyncOrAsync (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:115:4)
    at iterateNormalLoaders (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:224:2)
    at /home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:197:4
    at Storage.finished (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:39:16)
    at /home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:415:3) 'TypeError: Cannot read property \'exclude\' of undefined\n    at applyDefaults (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/instance.ts:266:72)\n    at Object.ensureInstance (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/instance.ts:145:5)\n    at compiler (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/index.ts:37:20)\n    at Object.loader (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/index.ts:18:18)\n    at LOADER_EXECUTION (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:114:14)\n    at runSyncOrAsync (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:115:4)\n    at iterateNormalLoaders (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:224:2)\n    at iterateNormalLoaders (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:213:10)\n    at /home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:228:3\n    at Object.context.callback (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:106:13)\n    at Object.module.exports (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/angular2-template-loader/index.js:32:10)\n    at LOADER_EXECUTION (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:114:14)\n    at runSyncOrAsync (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:115:4)\n    at iterateNormalLoaders (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:224:2)\n    at /home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/loader-runner/lib/LoaderRunner.js:197:4\n    at Storage.finished (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:39:16)\n    at /home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16\n    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:415:3)'
Hash: e6cec18290a3b9ee8319
Version: webpack 2.1.0-beta.27
Time: 334ms
       Asset     Size  Chunks             Chunk Names
    index.js  3.52 kB       0  [emitted]  main
index.js.map  3.15 kB       0  [emitted]  main
    + 1 hidden modules
                                                                                                                                                                                   
ERROR in ./src/index.ts                                                                                                                                                            
Module build failed: TypeError: Cannot read property 'exclude' of undefined                                                                                                        
    at applyDefaults (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/instance.ts:266:72)                                                
    at Object.ensureInstance (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/instance.ts:145:5)                                         
    at compiler (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/index.ts:37:20)                                                         
    at Object.loader (/home/stas/dev/forks/angular2-dropzone-wrapper/node_modules/awesome-typescript-loader/src/index.ts:18:18)                                                    
                                                                                                                                                                                   
npm ERR! Linux 4.4.23-1-lts                                                                                                                                                        
npm ERR! argv "/usr/bin/node" "/home/stas/.node_modules_global/bin/npm" "run" "build"                                                                                                                                                                                          
npm ERR! node v7.0.0                                                                                                                                                                                                                                                           
npm ERR! npm  v3.10.7                                                                                                                                                                                                                                                          
npm ERR! code ELIFECYCLE                                                                                                                                                                                                                                                       
npm ERR! [email protected] build: `webpack --config config/webpack.config.js`                                                                                                                                                                                    
npm ERR! Exit status 2                                                                                                                                                                                                                                                         
npm ERR!                                                                                                                                                                                                                                                                       
npm ERR! Failed at the [email protected] build script 'webpack --config config/webpack.config.js'.                                                                                                                                                               
npm ERR! Make sure you have the latest version of node.js and npm installed.                                                                                                                                                                                                   
npm ERR! If you do, this is most likely a problem with the angular2-dropzone-wrapper package,                                                                                                                                                                                  
npm ERR! not with npm itself.                                                                                                                                                                                                                                                  
npm ERR! Tell the author that this fails on your system:                                                                                                                                                                                                                       
npm ERR!     webpack --config config/webpack.config.js                                                                                                                                                                                                                         
npm ERR! You can get information on how to open an issue for this project with:                                                                                                                                                                                                
npm ERR!     npm bugs angular2-dropzone-wrapper                                                                                                                                                                                                                                
npm ERR! Or if that isn't available, you can get their info via:                                                                                                                                                                                                               
npm ERR!     npm owner ls angular2-dropzone-wrapper                                                                                                                                                                                                                            
npm ERR! There is likely additional logging output above.                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                               
npm ERR! Please include the following file with any support request:                                                                                                                                                                                                           
npm ERR!     /home/stas/dev/forks/angular2-dropzone-wrapper/npm-debug.log

Check / add support for AOT

filremoved not getting fired.

Hi there,

I have been using this module for a while, and I just wanted to add the "Remove file" option, so my code looks like this right now:

submit.component.ts

...

dropzoneSettings = {
    server: 'https://example.com/upload',
    maxFilesize: 20,
    acceptedFiles: 'image/*',
    addRemoveLinks: true
};

...

onFileRemoved(event: any) {
    console.log("Removed.");
    console.log(event);
}

...

submit.html

...

<dropzone [config]="dropzoneSettings" [message]="'Drag here.'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" (removedfile)="onFileRemoved($event)" id="dropzonePreview"></dropzone>

...

The thing is that the onFileRemoved() function is not getting called. Am I missing something?

acceptedFiles between Mac and Window give different result

Hi,

currently i'm add acceptedFiles option into dropzone config with "text/csv", when I'm upload via Mac Chrome it's working fine. But when I'm upload via Window (Window 7) Chrome, dropzone show an error "You can't upload file of this type".

So has anyone face this issue, or how to fix this one ?

chrome version: (both os use same version)
Version 61.0.3163.100 (Official Build) (64-bit)

model config:

acceptedFiles: "text/csv"
autoReset: null
cancelReset: null
clickable: true
errorReset: null
maxFiles: 1
maxFilesize: 100
params: {allocationtype: 0}
url: "upload"

ngx-dropzone-wrapper version: 4.6.2

Thanks,
Nuttakron.

[placeholder] is null after uploading a file

Hi, at first I want to thank you for your nice and easy to use wrapper around dropzone. It really helps me developing my app.
Right now I'm using the [placeholder] to show previously uploaded images which works perfectly fine.
But after uploading or changing an image [placeholder] becomes null. Is this the desired behavior and am I misusing the [placeholder]?

Remove the custom upload* events

Remove custom events etc. that are not needed in the component.

How can I retrieve back all the images from db ?

How can I retrieve back all the images from db and load into the html view ?
Can I do that with this library ?
thanks :)

Add proper localization support

For now it is possible to add the localization strings in the config options, but it would be nice to have a proper localization system in place with default translations and support for extending the supported languages.

Working with config autoProcessQueues = false

How do I manually process queues ? Is there a event exposed for this?

How to add parameter in form data ?

Hi,

I have some question about how can I insert form-data parameter with ngx-dropzone-wrapper ?

I would like to add some information file in form-data e.g. file name, file type etc, file size.

for dropzonejs It use below code to insert formData

myDropzone.on("sending", function(file, xhr, formData) {
  // Will send the filesize along with the file as POST data.
  formData.append("filesize", file.size);
});

Thanks,
Nuttakron

Dropzone styles not being included properly

Hi, we are trying to incorporate Dropzone into our app using ngx-dropzone-wrapper, but it seems that the styling is not being applied as expected. Dropzone elements are appearing unstyled.

This is the case even if I include styles manually in index.html of the app. (from https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css)

I wonder if I am missing something obvious or there can be situations where the wrapper is not doing the right thing?

Initialization error after Angular update

After updating my project to version 2.4.10 of Angular, the dropzone component started throwing an error during initialization:
Cannot read property 'nativeElement' of undefined

How to pass extra parameters

Hi i want to pass extra form data with the file , can u suggest any hack is available . in angular 2 version.

Add AOT build option for the example app

init event

is there a way to handle dropzone init event ?

add CSV extension to acceptedFile's list

How do I configure the plugin to accept .csv files? Its working as expected if acceptedFiles: 'image/' I changed acceptedFiles to 'csv/', '.csv/*', '.csv' and 'csv' trying to make it work for CSV files but it is not working.

How do I change the config to accept CSV files?

  server: 'https://httpbin.org/post',
  maxFilesize: 50,
  acceptedFiles: 'csv'
};```

Prevent style insert

The styles are inserted inline in the head, how can I prevent?

Thanks in advance
clemens

`dictDefaultMessage` option is not working

Hi again.
I'm experiencing an issue with dictDefaultMessage option, component ignores it at all.
Here is a workaround (template binding among with message):

@Component({
  selector: 'dropzone',
  template: `
    <div *ngIf="!template && message" class="dz-default dz-message" [ngClass]="{'disabled': disabled, 'dz-placeholder': placeholder}">
      <div class="dz-text">{{message}}</div>
      <img *ngIf="placeholder" class="dz-image" [src]="placeholder">
    </div>
    <template [ngIf]="template">
      <div
        class="dz-default dz-message"
        [ngClass]="{'disabled': disabled, 'dz-placeholder': placeholder}"
        [innerHTML]="template"
      >
      </div>
    </template>
  `,
  styles: [require('./style'), require('dropzone/dist/min/dropzone.min.css')],
  encapsulation: ViewEncapsulation.None
})
export class DropzoneComponent implements OnInit, DoCheck, OnDestroy, OnChanges {

  public  dropzone     : any;
  private configDiff   : any;

  @Input() config      : DropzoneConfigInterface;
  @Input() disabled    : boolean = false;

  @Input() message     : string = 'Click or drag files to upload';
  @Input() template    : string = null;
  ...
  ...
  ...

But this solition looks a bit ugly. Another idea is refactor the component to a directive without any template and let Dropzone render it's default template.

Another problem with both cases is change detection - the component must trigger it manually immidiately after all dropzone callbacks.

ngx-dropzone + ngIf

I'm using ngx-dropzone with Material Tabs. In first tab I have a table and when select an item, goes to 2nd tab where there's a form + dropzone. Everything works fine but, in some cases, I have to hide dropzone in the form (to hide I'm using *ngIf directive. I tried with [hidden] in a parent div but didn't work). When I show up dropzone again, it come back but without the previewTemplate that I had configured. If I try to set the previewTemplate, it doesn't work as well... Any idea how could I solve this issue?! Hide/show dropzone without losing configurations?

window is not defined

I follow documention but i get this error :

window is not defined