I am using dropzone.js for multiple image upload.And when there is only one dropzone on a single page, it works fine. But if I try to use more than one dropzone on a single page, only one dropzone is working i.e. the second one while first one remains idle. I tried to search for answers but they are only related to javascript and doesn't work for Angularjs. Below are the codes I am attaching for reference.
HTML
1st Dropzone
<div id="dropzone2" name="form_16" data-ng-model="itr.form_16" class="dropzone sm"
options="form16Options" methods="form16Methods"
callbacks="form16Callbacks" dz-form16></div>
<br>
<div style="text-align:center;" id="startUpload" ng-show="showBtns">
<button class="btn btn-default" ng-click="form16Methods.processQueue();">Upload All
</button>
<button class="btn btn-blue" ng-click="form16Methods.removeAllFiles();">Remove All
</button>
</div>
2nd Dropzone
<div id="loan_certificate" name="loan_certificate" data-ng-model="itr.loan_certificate"
class="dropzone sm" options="loanOptions" methods="loanMethods"
callbacks="loanCallbacks" dz-loan-certificate></div>
<br>
<div style="text-align:center;" ng-show="showBtns">
<button class="btn btn-default" ng-click="loanMethods.processQueue();">Upload All
</button>
<button class="btn btn-blue" ng-click="loanMethods.removeAllFiles();">Remove All
Controller
angular.extend($scope, {
first: true,
showBtns: false,
lastFile: null,
dzMethods: {},
dzOptions: {
url: $API.POST_ITR_IMAGE,
dictDefaultMessage: '<i class="fa fa-plus"></i> Drop image or click to choose image',
parallelUploads: 4,
autoProcessQueue: false,
acceptedFiles: 'image/jpeg, images/jpg, image/png',
addRemoveLinks: true,
uploadMultiple: true,
dictCancelUpload: '',
maxFilesize: '2',
// maxFiles: 4,
},
dzCallbacks: {
'addedfile': function (file, xhr, formData) {
$scope.showBtns = true;
$scope.lastFile = true;
},
'sendingmultiple': function (file, xhr, formData) {
formData.append("_token", csrfToken);
formData.append("id", $scope.itr.id);
formData.append("form_16", $scope.itr.form_16);
console.log(file);
},
'successmultiple': function (file, result) {
if (result.success) {
$scope.pop_gallery = {images: result.image};
console.log($scope.pop_gallery);
}
},
'error': function (file, xhr) {
if (file.size > 2 * 1000) {
alert(xhr);
}
console.warn('File failed to upload from dropzone 2.', file, xhr);
},
'completemultiple': function (file) {
angular.forEach(file, function (value, key) {
$scope.dzMethods.removeFile(value);
});
},
'queuecomplete': function (file) {
$scope.showBtns = false;
$scope.lastFile = null;
// $scope.dzMethods.removeAllFiles();
}
},
Directive
.directive('ngDropzone', ['$timeout', 'dropzoneOps', function ($timeout, dropzoneOps) {
return {
restrict: 'AE',
template: '<div></div>',
replace: true,
scope: {
options: '=?', //http://www.dropzonejs.com/#configuration-options
callbacks: '=?', //http://www.dropzonejs.com/#events
methods: '=?' //http://www.dropzonejs.com/#dropzone-methods
},
link: function (scope, iElem, iAttr) {
//Set options for dropzone {override from dropzone options provider}
scope.options = scope.options || {};
var initOps = angular.extend({}, dropzoneOps, scope.options);
if (iAttr.hasOwnProperty('name'))
angular.extend(initOps, {paramName: iAttr.name});
//Instantiate dropzone with initOps
var dropzone = new Dropzone(iElem[0], initOps);
/*********************************************/
//Instantiate Dropzone methods (Control actions)
scope.methods = scope.methods || {};
scope.methods.getDropzone = function () {
return dropzone; //Return dropzone instance
};
scope.methods.getAllFiles = function () {
return dropzone.files; //Return all files
};
var controlMethods = [
'removeFile', 'removeAllFiles', 'processQueue',
'getAcceptedFiles', 'getRejectedFiles', 'getQueuedFiles', 'getUploadingFiles',
'disable', 'enable', 'confirm', 'createThumbnailFromUrl'
];
angular.forEach(controlMethods, function (methodName) {
scope.methods[methodName] = function () {
dropzone[methodName].apply(dropzone, arguments);
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
}
});
/*********************************************/
//Set invents (callbacks)
if (scope.callbacks) {
var callbackMethods = [
'drop', 'dragstart', 'dragend',
'dragenter', 'dragover', 'dragleave', 'addedfile', 'removedfile',
'thumbnail', 'error', 'processing', 'uploadprogress',
'sending', 'success', 'complete', 'canceled', 'maxfilesreached',
'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple',
'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'
];
angular.forEach(callbackMethods, function (method) {
var callback = (scope.callbacks[method] || angular.noop);
dropzone.on(method, function () {
callback.apply(null, arguments);
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
});
});
}
}
}
}])
.provider('dropzoneOps', function () {
/*
* Add default options here
**/
var defOps = {
//Add your options here
};
return {
setOptions: function (newOps) {
angular.extend(defOps, newOps);
},
$get: function () {
return defOps;
}
}
})
