nxt-dropzone-wrapper

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