This is an Angular wrapper library for the Dropzone. For full documentation on Dropzone configuration options see Dropzone documentation.
npm install --save nxt-dropzone-wrapper dropzoneimport { DropzoneConfig, DropzoneModule, NXT_DROPZONE_CONFIG } from 'nxt-dropzone-wrapper'
const DEFAULT_DROPZONE_CONFIG: DropzoneConfig = {
// Change this to your upload POST address:
url: 'https://httpbin.org/post',
maxFilesize: 50,
acceptedFiles: 'image/*'
}
@NgModule({
...
imports: [
...
DropzoneModule
],
providers: [
{
provide: NXT_DROPZONE_CONFIG,
useValue: DEFAULT_DROPZONE_CONFIG
}
]
})This library provides two ways to create a Dropzone element, component for simple use cases and directive for more custom use cases.
<nxt-dropzone [config]="config"
message="Click or drag images here to upload"
(error)="onUploadError($event)"
(success)="onUploadSuccess($event)"></nxt-dropzone>When using only the directive you need to provide your own theming or import the default theme (dropzone/dist/dropzone.css).
<div class="dropzone"
[nxtDropzone]="config"
(error)="onUploadError($event)"
(success)="onUploadSuccess($event)"></div>