How to invoke an error from server response (JSON) in Dropzone JS?

Question

I have an uploader which rejects users' upload when they exceed their quota. The response is in JSON and it is as follow:

{msg: "Upload limit reached", status: "error", code: "403"}

The Dropzone JS options is as follow:

Dropzone.options.uploadDropzone = {
    paramName: "file1", 
    maxFilesize: 200, 
    maxThumbnailFilesize: 10,
    success: function(file, response){
      ????
  }
};

What should I do with the response in success to show an error to my users in the uploader?

Pestana

Answer 1

okay the following would work, just extract from the source:

success: function(file, response){
  if(response.code == 501){ // succeeded
    return file.previewElement.classList.add("dz-success"); // from source
  }else if (response.code == 403){  //  error
    // below is from the source code too
    var node, _i, _len, _ref, _results;
    var message = response.msg // modify it to your error message
    file.previewElement.classList.add("dz-error");
    _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      node = _ref[_i];
      _results.push(node.textContent = message);
    }
    return _results;
  }
}

Pestana

Answer 2

Dropzone has built in error detection. Just do this:

mydropzone = new Dropzone("#mydropzone",{
    url: "/dropzone",
    addRemoveLinks : true,
    maxFilesize: 2.0,
    maxFiles: 100,
    error: function(file, response) {
        if($.type(response) === "string")
            var message = response; //dropzone sends it's own error messages in string
        else
            var message = response.message;
        file.previewElement.classList.add("dz-error");
        _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i];
            _results.push(node.textContent = message);
        }
        return _results;
    }   
});

Comedo

This didn't help me with the exact solution, but it helped me to understand the scenario and I resolved the issue which I was facing, hence upvoting. – Swiss

Answer 3

You can do it like this:

success: function(file, response, action) {
    // PHP server response
    if(response == 'success') // Validate whatever you send from the server
    {
        this.defaultOptions.success(file);
    }
    else
    {
        this.defaultOptions.error(file, 'An error occurred!');  
    }
}

Gobelin

Just tried it works, but does it have any side effect? Because I am afraid my call would be overridden by calling the default function directly. – Banka

Instead of checking 'success' within the success: handler you can call this.defaultOptions.error from within the error: handler – Ayrshire

Answer 4

in PHP side:

    header("HTTP/1.0 400 Bad Request");
    echo "Error uploading file";

and in jQuery side:

        error: function(response){
            alert(response.xhr.responseText);
        }

Cryptanalysis

Answer 5

After trying a mix of the various answers, I figured out the current dropzone 5.5 works well by doing it this way:

On PHP side, when you wish to toss an error, set the header of 400 with custom status text like this:

header('HTTP/1.1 400 Invalid file (test error).');
// no need to echo anything, unless you want more data to parse

Then adjust dropzone's error option with the full 3 parameters:

mydropzone = new Dropzone("#mydropzone",{
    ....
    error: function(file, response, xhr) {
        console.log('errored',file,response,xhr);// for debugging
        if (typeof xhr !== 'undefined') {
            this.defaultOptions.error(file,xhr.statusText);// use xhr err (from server)
        } else {
            this.defaultOptions.error(file,response);// use default (from dropzone)
        }
    }   
});

That then puts the error text into the proper dz framework so it displays the right elements using its built in css and hover feedbacks.

Rockyrococo