Getting started with nxt-dropzone-wrapper

Installing

npm install --save nxt-dropzone-wrapper dropzone

Configure dropzone wrapper

import { ApplicationConfig } from '@angular/core'
import { provideDropzoneConfig } from 'nxt-dropzone-wrapper'

export const appConfig: ApplicationConfig = {
    providers: [
        provideDropzoneConfig({
            // These are the global options and can also be set per instance; change url to your upload POST address:
            url: 'https://httpbin.org/post',
            acceptedFiles: 'image/*',
            createImageThumbnails: true
        })
    ]
}

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

[config]DropzoneConfigundefined, { alias: 'nxtDropzone' }

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