Need help with ng-dropzone?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

thatisuday
120 Stars 30 Forks Apache License 2.0 93 Commits 7 Opened issues

Description

:paperclip: AngularJS directive for Dropzone, an easy to use drag'n'drop file upload library.

Services available

!
?

Need anything else?

Contributors list

# 341,203
JavaScr...
CSS
85 commits
# 439,009
PHP
Symfony
flex
Compose...
1 commit

Need maintainers

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.


ng-dropzone bower npm downloads preview

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
  1. Include
    angular.js
    and
    dropzone.js
    ,
    dropzone.css
    from bower_components.
  2. Include
    ng-dropzone.min.js
    from
    dist
    folder of
    ng-dropzone
    package inside bower_component.
  3. 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

 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
 element.
OR


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

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

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

Updates

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

Liked it? Give it a star 🌟. I would love it :)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.