Getting started with nxt-dropzone-wrapper
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>
Configuration options
Component inputs
Input | Type | Default value | Description |
---|---|---|---|
[disabled] | boolean | false | Disables / detaches Dropzone from the element |
[config] | DropzoneConfig | undefined | Custom config to override the global defaults |
[message] | string | 'Click or drag files to upload' | Message to show for the user on the upload area |
[placeholder] | string | '' | Placeholder image to be shown as the upload area |
[useDropzoneClass] | boolean | true | Use 'dropzone' class (use provided default styles) |
Directive inputs
Input | Type | Default value | Description |
---|---|---|---|
[disabled] | boolean | undefined | Disables / detaches Dropzone from the element |
[nxtDropzone] | DropzoneConfig | undefined | Can be used to provide optional custom config |
Outputs (same for both component and directive)
See Dropzone documentation for details about events.
Output | Type | Description |
---|---|---|
(init) | Dropzone | |
(drop) | DragEvent | |
(dragStart) | DragEvent | |
(dragEnd) | DragEvent | |
(dragEnter) | DragEvent | |
(dragOver) | DragEvent | |
(dragLeave) | DragEvent | |
(paste) | DragEvent | |
(reset) | void | |
(addedFile) | Dropzone.DropzoneFile | |
(addedFiles) | Dropzone.DropzoneFile | |
(removedFile) | Dropzone.DropzoneFile | |
(thumbnail) | [Dropzone.DropzoneFile, string] | |
(error) | [Dropzone.DropzoneFile, string | Error] | |
(errorMultiple) | [Dropzone.DropzoneFile[], string | Error] | |
(processing) | Dropzone.DropzoneFile | |
(processingMultiple) | Dropzone.DropzoneFile[] | |
(uploadProgress) | [Dropzone.DropzoneFile, number, number] | |
(totalUploadProgress) | [number, number, number] | |
(sending) | [Dropzone.DropzoneFile, XMLHttpRequest, FormData] | |
(sendingMultiple) | [Dropzone.DropzoneFile[], XMLHttpRequest, FormData] | |
(success) | [Dropzone.DropzoneFile, Object | string] | |
(successMultiple) | Dropzone.DropzoneFile[] | |
(canceled) | Dropzone.DropzoneFile | |
(canceledMultiple) | Dropzone.DropzoneFile[] | |
(complete) | Dropzone.DropzoneFile | |
(completeMultiple) | Dropzone.DropzoneFile[] | |
(maxFilesExceeded) | Dropzone.DropzoneFile | |
(maxFilesReached) | Dropzone.DropzoneFile[] | |
(queueComplete) | void |