Getting started with nxt-dropzone-wrapper
Installing
npm install --save nxt-dropzone-wrapper dropzoneImport 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 |
nxt-components