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

InputTypeDefault valueDescription
[disabled]booleanfalse

Disables / detaches Dropzone from the element

[config]DropzoneConfigundefined

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]booleantrue

Use 'dropzone' class (use provided default styles)


Directive inputs

InputTypeDefault valueDescription
[disabled]booleanundefined

Disables / detaches Dropzone from the element

[nxtDropzone]DropzoneConfigundefined

Can be used to provide optional custom config


Outputs (same for both component and directive)

See Dropzone documentation for details about events.

OutputTypeDescription
(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