Angular 2 Dropzone in Angular2


Angular 2 wrapper library for Dropzone.

npm install angular2-dropzone-wrapper --save-dev

Load the module for your app-module

import { DropzoneModule } from 'angular2-dropzone-wrapper';
import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper';
const DROPZONE_CONFIG: DropzoneConfigInterface = {
  // Change this to your upload POST address: 
  server: '',
  maxFilesize: 10,
  acceptedFiles: 'image/*'
  imports: [


Simply replace the element that would oridinarily be passed to Dropzone with the dropzone component.

<dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>

Create dropzone component

import {Component} from '@angular/core';
    selector: 'app-new-media',
    templateUrl: './dropzone.component.html',
    styleUrls: ['./dropzone.component.scss']
export class DropZoneComponent {

    onUploadError(args: any) {
        console.log('onUploadError:', args);

    onUploadSuccess(args: any) {
        console.log('onUploadSuccess:', args);