I'm building an AngularJs app and I'm using a dropzone from DropzoneJs. I need to use the success and error callback because I have to access to the server response. I'm having a problem that if I use the callbacks, the previewTemplate changes... So, can I change the previewTemplate inside the callback?
If I don't use the callbacks here's the result template and the code:


var myDropzone = $("#storageDropzone").dropzone({
url: firstUrl,
});
If I use the callbacks the "tick" or the "cross" don't show up:


var myDropzone = $("#storageDropzone").dropzone({
url: firstUrl,
error: function (file, response) {
console.log("Erro");
console.log(response);
},
success: function (file, response) {
console.log("Sucesso");
console.log(response);
},
complete: function (file) {
console.log("Complete");
}
});
So, can I change the previewTemplate inside the callbacks? or simply, keep the one that exists?
So, this is the workaround I found...
Instead of using the callbacks, I make the changes on the init function. Although this answer doesn't satisfy me, it's the best I can do for now... If anyone can explain why it works on the init but not as a callback feel free to answer.
This is the solution:
var myDropzone = $("#storageDropzone").dropzone({
init: function () {
this.on("processing", function (file) {
$scope.$apply($scope.working = true);
this.options.url = lastUrl;
$scope.$apply($scope.processing = true);
});
this.on("success", function (file, response) {
console.log("sucesso");
var ficheiro = { nome: file.name, link: response[0] };
$scope.$apply($scope.uploadedFiles.push(ficheiro));
});
this.on("error", function (file, error, xhr) {
var ficheiro = { nome: file.name, status: xhr.status, statusText: xhr.statusText, erro: error.message };
$scope.$apply($scope.errorFiles.push(ficheiro));
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With