nxt-dropzone-wrapper
v18.0.0
Published
Angular wrapper library for Dropzone
Downloads
146
Maintainers
Readme
Angular Dropzone wrapper
This is an Angular wrapper library for the Dropzone. For full documentation on Dropzone configuration options see Dropzone documentation.
Quick links
Installing
npm install --save nxt-dropzone-wrapper dropzone
Import and configure dropzone wrapper module
import { 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
}
]
})
Include it in HTML template
This library provides two ways to create a Dropzone element, component for simple use cases and directive for more custom use cases.
Use dropzone component
<nxt-dropzone [config]="config"
message="Click or drag images here to upload"
(error)="onUploadError($event)"
(success)="onUploadSuccess($event)"></nxt-dropzone>
Use dropzone directive
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>