angular-dropzone

AngularJS directive for Dropzone.js

Installation

bower install angular-dropzone

Usage

html

Include bower_components/dropzone/downloads/dropzone.min.js and bower_components/angular-dropzone/lib/angular-dropzone.js in your html file. Also include bower_components/dropzone/downloads/css/dropzone.css for basic styling.

Add ngDropzone as a dependency to your module and initialize the Dropzone directive by including it in your template.

<div class="DemoController as ctrl">
  <form class="dropzone"
        method="post"
        enctype="multipart/form-data"
        ng-dropzone
        dropzone="ctrl.dropzone"
        dropzone-config="ctrl.dropzoneConfig"
        event-handlers="{ 'addedfile': ctrl.dzAddedFile, 'error': ctrl.dzError }">
  </form>
</div>

js

angular.module('DemoApp', ['ngDropzone'].controller('DemoController', ['$log', function($log) {
  var self = this;

  self.dzAddedFile = function( file ) {
    $log.log( file );
  };
  
  self.dzError = function( file, errorMessage ) {
    $log.log(errorMessage);
  };
  
  self.dropzoneConfig = {
    parallelUploads: 3,
    maxFileSize: 30
  };
}]);

To get a list of all the events, go to http://www.dropzonejs.com/#events and read through the events list.
If you need to use a dropzone method such as .emit(), you can access the dropzone object at $scope.dropzone.