Angular Dropzone wrapper

This is an Angular wrapper library for the Dropzone. For full documentation on Dropzone configuration options see Dropzone documentation.

Quick links

• Demo
• Getting started
• API docs
• Dropzone documentation

Installing

npm install --save nxt-dropzone-wrapper dropzone

Import and 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>