ngdropzone

v2.0.2

Published

2 years ago

AngularJS directive for __[dropzone](https://github.com/enyo/dropzone)__

Downloads

4,006

0High
0Medium
0Low

thatisuday

ng-dropzone ![preview](https://img.shields.io/badge/preview-click here-green.svg?style=flat-square)

AngularJS directive for dropzone

UPDATE

In latest release v1.0.5, distribution files have been renamed to match newly changed package name. Please rename urls to distribution files if you are updating this package. Also, gulp and sass support have been added.

1. Getting started

→ Install using npm

npm install ngdropzone

→ Install using bower

Run following command in your working directory using shell/cmd

bower install ngdropzone

Include angular.js and dropzone.js, dropzone.css from bower_components.
Include ng-dropzone.min.js from dist folder of ng-dropzone package inside bower_component.
You can also include ng-dropzone.min.css but it's not necessary. I have overridden some ugly looking css from dropzone.css

→ 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 ng-dropzone.min.js from this official release

Step 4

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

2. Create .js file and set Dropzone.autoDiscover to false

//Add below line at the top of your JavaScript code
Dropzone.autoDiscover = false;
//This will prevent Dropzone to instantiate on it's own unless you are using dropzone class for styling

3. Configure your angular app

Include thatisuday.dropzone module inside your angular app.

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

####⛹Optional

You can configure dropzone before an app starts running. ng-dropzone 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.

myNgApp.config(function(dropzoneOpsProvider){
	dropzoneOpsProvider.setOptions({
		url : '/upload_url',
		maxFilesize : '10',
		...
	});
});

####⛹Optional

You can also add default options in dropzoneOps provider (ng-dropzone.min.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.

4. 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>

<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.dzOptions = {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.

5. 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.

myNgApp.controller('main', function($scope){
	//Set options for dropzone
	//Visit http://www.dropzonejs.com/#configuration-options for more options
	$scope.dzOptions = {
		url : '/alt_upload_url',
		paramName : 'photo',
		maxFilesize : '10',
		acceptedFiles : 'image/jpeg, images/jpg, image/png',
		addRemoveLinks : true,
		...
	};
	
	
	//Handle events for dropzone
	//Visit http://www.dropzonejs.com/#events for more events
	$scope.dzCallbacks = {
		'addedfile' : function(file){
			console.log(file);
			$scope.newFile = file;
		},
		'success' : function(file, xhr){
			console.log(file, xhr);
		},
		...
	};
	
	
	//Apply methods for dropzone
	//Visit http://www.dropzonejs.com/#dropzone-methods for more methods
	$scope.dzMethods = {};
	$scope.removeNewFile = function(){
		$scope.dzMethods.removeFile($scope.newFile); //We got $scope.newFile from 'addedfile' event callback
	}
});

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 ng-dropzone.

If $scope.dzMethods.method throws undefined error, wrap it in $timeout(function(){...}). This happens because you are referencing an object that is empty as dropzone is not yet property linked with the controller scope.

6. Buffer paste

use ng-buffer-dropzone for image buffer paste on dropzone.

7. Complaints & Contribute

Feel free to create as many issues as you want to report bugs.
Take a fork and create pull request for bug fixes and enhancements.
Please raise an issue if dropzone.js have new updates.

Updates

Version 2.0.0 out
Lesson on how to mock files from server into your dropzone : Wiki here Preview here