This project is no longer maintained. Though this project is in good health, we would appreciate if someone collaborates to fix potential bugs and enhancement requests.
AngularJS directive for dropzone
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.
npm install ngdropzone
Run following command in your working directory using shell/cmd
bower install ngdropzone
- Include
angular.jsanddropzone.js,dropzone.cssfrom bower_components. - Include
ng-dropzone.min.jsfromdistfolder ofng-dropzonepackage inside bower_component. - You can also include
ng-dropzone.min.cssbut it's not necessary. I have overridden some ugly looking css fromdropzone.css
You must have AngularJS library included for this directive to work : Download from Google CDN
You need to download dropzone.js and dropzone.css files from dropzone repository : Get from official release
Download ng-dropzone.min.js from this official release
Include above files in <head></head> section of your html page
//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
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)insidedefOpsobject. 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.
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.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.
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
getDropzoneandgetAllFileswhich returns dropzone instance and dropzone files respectively. These methods do not accept any arguments and only work with ng-dropzone.
If
$scope.dzMethods.methodthrows 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.
use ng-buffer-dropzone for image buffer paste on dropzone.
- 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.jshave new updates.
- Version 2.0.0 out
- Lesson on how to mock files from server into your dropzone : Wiki here Preview here