Dropzone styles not being included properly

[martinvlk]

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?

[sconix]

Haven't seen such behavior so can't say what could be wrong. The styles are inlined within the component so can't think of anything that would cause them not to work. If you are using a directive then you need to load the style file separately, but not with component.

[topa]

It seems that setting ViewEncapsulation.None or if you now your target browsers ViewEncapsulation.Native in the component which uses DropzoneComponent fixes that problem. Probably angular's default is ViewEncapsulation.Emulated due to browser compatibility because ViewEncapsulation seems to be solved through shadow dom.

[topa]

We've wrapped DropzoneComponent into a custom component, copied the styles from this package and imported dropzone styles directly from node_modules. At the end this approach gives us full access to the styles.

import { DropzoneComponent } from 'ngx-dropzone-wrapper';
import {
  Component,
  ViewEncapsulation,
  OnDestroy
} from '@angular/core';

@Component({
  selector: 'my-dropzone',
  templateUrl: './my-dropzone.component.html',
  styleUrls: [
    '../../../../../../node_modules/dropzone/dist/min/dropzone.min.css',
    './ngx-dropzone-wrapper.scss',
    './my-dropzone.scss',
  ],
  encapsulation: ViewEncapsulation.None
})
export class MyDropzoneComponent extends DropzoneComponent implements OnDestroy {

  ngOnDestroy() {
    if (this.dropzone) {
      this.dropzone.destroy();
    }
  }
}

A little bit hacky, but it works for now.

btw.: Overriding ngOnDestroy solved also https://github.com/zefoy/ngx-dropzone-wrapper/issues/23 for us.

[sconix]

Yes thats how the style encapsulation works in Angular. You could always make your own styles fully and not use the Dropzone styles file, then you can do it without the ViewEncapsulation.None, but if you want to use the dropzone styles in your own component you need to have the ViewEncapsulation.None. If you import the styles in the global styles then I think it should also work without the ViewEncapsulation change.

Btw. the latest version should have the check in destroy so there should not be need for overriding.