require(['jquery', 'px/extensions/dropzone'], function($) {
...
});
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.
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);
});
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
};
}
};
});
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.');
},
};
});