Dropzone http://www.dropzonejs.com

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Drop files in here
or click to pick manually
See the usage documentation at http://www.dropzonejs.com

Usage


require(['jquery', 'px/extensions/dropzone'], function($) {
  ...
});

Usage

To use DropzoneJS plugin, you need to include the next scripts:


<script src="path/to/js/libs/dropzone.js"></script>
<script src="path/to/js/pixeladmin/extensions/dropzone.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-dropzone.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['angular-dropzone']);

Alternatively, you can include DropzoneJS plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    serie: true,
    name: 'angular-dropzone',
    files: [
      'path/to/js/libs/dropzone.js',
      'path/to/js/pixeladmin/extensions/dropzone.js',
      'path/to/js/pixeladmin/directives/angular-dropzone.js',
    ],
  },
]);

dropzone directive

You can use dropzone directive where you want. And when the scope is destroyed the directive will be destroyed.

Drop files in here
or click to pick manually Your browser isn't support Dropzone

Instance

You can define instance attribute to get a pointer to DropzoneJS element: 


<form dropzone instance="ctrl.$dropzone" action="/upload"></form>
        

function SomeController() {
  // Pointer
  this.$dropzone = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$dropzone('getAcceptedFiles');
  this.$dropzone('disable');
  this.$dropzone('removeFile', file);
});

Options

DropzoneJS' options can be specified using options attribute (see the plugin's documentation). 


<form dropzone options="ctrl.options" action="/upload"></form>
        

function SomeController() {
  this.options = {
    parallelUploads: 2,
    maxFilesize:     50,
    filesizeBase:    1000,

    resize: function(file) {
      return {
        srcX:      0,
        srcY:      0,
        srcWidth:  file.width,
        srcHeight: file.height,
        trgWidth:  file.width,
        trgHeight: file.height
      };
    }
  };
});

Events

Event handlers can be bound using callbacks attribute (see the plugin's documentation): 


<form dropzone callbacks="ctrl.callbacks" action="/upload"></form>
        

function SomeController() {
  this.callbacks = {
    queuecomplete: function() {
      console.log('Upload queue is complete.');
    },
  };
});