<form action="/upload" id="dropzonejs" class="dropzone-box">
<div class="dz-default dz-message">
<div class="dz-upload-icon"></div>
Drop files in here<br>
<span class="dz-text-small">or click to pick manually</span>
</div>
<div class="fallback">
<input name="file" type="file" multiple>
</div>
</form>
<script>
$(function() {
$('#dropzonejs').dropzone({
parallelUploads: 2,
maxFilesize: 50000,
filesizeBase: 1000,
resize: function(file) {
return {
srcX: 0,
srcY: 0,
srcWidth: file.width,
srcHeight: file.height,
trgWidth: file.width,
trgHeight: file.height,
};
},
});
// Mock the file upload progress (only for the demo)
//
Dropzone.prototype.uploadFiles = function(files) {
var minSteps = 6;
var maxSteps = 60;
var timeBetweenSteps = 100;
var bytesPerStep = 100000;
var isUploadSuccess = Math.round(Math.random());
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function(file, totalSteps, step) {
return function() {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
if (file.upload.progress == 100) {
if (isUploadSuccess) {
file.status = Dropzone.SUCCESS;
self.emit('success', file, 'success', null);
} else {
file.status = Dropzone.ERROR;
self.emit('error', file, 'Some upload error', null);
}
self.emit('complete', file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
}
};
});
</script>
Copyrequire(['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.
<div ng-app="ngDropzoneApp">
<form dropzone action="/upload">
<dropzone-message>
<div class="dz-upload-icon"></div>
Drop files in here<br>
<span class="dz-text-small">or click to pick manually</span>
</dropzone-message>
<dropzone-fallback class="font-weight-bold">Your browser isn't support Dropzone</dropzone-fallback>
</form>
</div>
<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/dropzone.js"></script> -->
<!-- <script src="assets/js/angular/pixeladmin/extensions/dropzone.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-dropzone.js"></script>
<script>
angular.module('ngDropzoneApp', [ 'angular-dropzone' ]);
</script>
Copy
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.');
},
};
});