nxt-dropzone-wrapper documentation

Angular Dropzone wrapper

GitHub license npm scope

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

Quick links

Installing

Example :
npm install --save nxt-dropzone-wrapper dropzone

Import and configure dropzone wrapper module

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

Example :
<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).

Example :
<div class="dropzone"
    [nxtDropzone]="config"
    (error)="onUploadError($event)"
    (success)="onUploadSuccess($event)"></div>

results matching ""

    No results matching ""