Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DropzoneJs success and error callback

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:

no callbakcs successno callbacks error

var myDropzone = $("#storageDropzone").dropzone({
    url: firstUrl,        
}); 


If I use the callbacks the "tick" or the "cross" don't show up:

with callback successwith callback error

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?

like image 915
NunoRibeiro Avatar asked Apr 26 '26 20:04

NunoRibeiro


1 Answers

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));
        });
  }
like image 138
NunoRibeiro Avatar answered Apr 29 '26 09:04

NunoRibeiro



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!