Using Dropzone.js with Angular 2

Dropzone.js is a file upload plugin that provides us with the ability to Drag and Drop as well as preview uploaded files. I have been using this plugin with core js for some time now and after recently i had to use it with Angular 2 as well.

Here is how i set it up.  Remember i am using typescript flavor of Angular 2.

Add dropzone script to index page

Configure systemjs

Create a dropzone Typescript component

This component has most of the dropzone properties and indicates file upload progress through EventEmitters.

Import the dropzone component into your app component

Use in your view

And …

Tweak the component and view according to your need.

alexey

alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.
alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.