AngularJS directive for Dropzone, an easy to use drag'n'drop file upload library.
0 people use it
Author: 5711821?v=3 thatisuday

ngDropzone ☛ : Preview

AngularJS directive for dropzone

Getting started

Install using bower

Run following command in your working directory using shell/cmd bower install ngDropzone

Install using npm

Run following command in your working directory using shell/cmd npm install ngdropzone

Install manually

Step 1

You must have AngularJS library included for this directive to work : Download from Google CDN

Step 2

You need to download dropzone.js and dropzone.css files from dropzone repository : Get from official release

Step 3

Download ngDropzone.js from this official release

Step 4

Include above files in <head></head> section of your html page

Create .js file and set Dropzone.autoDiscover to false

Configure your angular app

Include thatisuday.dropzone module inside your angular app. var myNgApp = angular.module('myAppName', ['thatisuday.dropzone']);


You can configure dropzone before an app starts running. ngDropzone comes with built in dropzoneOps provider to configure dropzone options which can be implemented as below. setOptions function will set default options fot all your dropzone instances in that app.


You can also add default options in dropzoneOps provider (ngDropzone.js) inside defOps object. This is very helpful in case you have multiple apps. But it is not recommended because if you upgrade this directive in future, your app might not behave the way it should.

Create dropzone(s)

You can create dropzone using ng-dropzone attribute or <ng-dropzone></ng-dropzone> element. <div class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods" ng-dropzone></div> OR <ng-dropzone class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods"></ng-dropzone>

options attribute specifies model that will set options (click to see) for dropzone and will override any options that may have been provided with dropzoneOps provider. For example, $scope.dropzoneOps = {bla:bleh,...};

callbacks attribute specifies model that will handle events (click to see) for dropzone. For example, $scope.dzCallbacks.addedfile = function(file){//do something};

methods attribute specifies model that will set methods (click to see) for dropzone. For example, $scope.dzMethods.removeFile(file); or <button ng-click="dzMethods.removeAllFiles();">...</button>

As per above example, dzOptions is model that set options for dropzone, dzCallbacks is model that handles events for dropzone while dzMethods is gateway model that triggers dropzone methods.

Configure dropzone(s)

callbacks are not necessary for your dropzone to work, these are just events that you may need as a callback for certain activities of your dropzone. But options must be given inside your controller unless you are configuring it from dropzoneOps provider. url field in dropzone options is mandatory.

By default, dropzone starts file upload when file is dropped or added to the list. But this can be prevented using autoProcessQueue:false in options. Then you have to manually start file upload using dzMethods model. You just have to call function dzMethods.processQueue(); to start upload.

For better understanding, checkout source code in /test/test.html file or visit second example in preview of this directive.

I have added two more extra methods getDropzone and getAllFiles which returns dropzone instance and dropzone files respectively. These methods do not accept any arguments and only work with ngDropzone.

⛹Optional :Beautify Dropzone

Add beautify.css file below dropzone.css file for professional looking dropzone.

Complaints & Contribute

Create an issue and mention your commits there. Don't take a fork.

comments powered by Disqus
This page was last updated over 2 years ago.