nxt-componentsGetting started with nxt-dropzone-wrapper
Installing
Import and configure dropzone wrapper module
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
Use dropzone directive
When using only the directive you need to provide your own theming or import the default theme (dropzone/dist/dropzone.css).
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 |