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

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?

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;
  }
}

To get the response after the file was submitted to server use this in DropzoneJS: response in JSON, you'll need to use JSON javascript dropzone.js or ask

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;
    }   
});

@jeynon if you are working in php on server side, you need to set the header to json, or you can do it in js with JSON.parse(jsonString); – Braian Mellor Nov 29 '16 at 19:45 | show 1 more comment 11

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!');  
    }
}

Questions: I’m trying to implement Dropzone on my site. I want to listen for the “success” event and then take the server response and add some info from it to a form on the same page as the DropZone after the upload is completed. the info i want to get in the server response is

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);
        }

From your example it seems you are using earlier version. I would suggest to upgrade and use latest version (3.*) which is released few days before.

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.

Questions: I am trying to upload an image to the server so that the image can be saved on the server. The server language used is PHP. The front end site is react.js and to choose the files I am using react-dropzone. The image is selected and I handle the dropped image in this function.

dropzone.js DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

For the server.js we need to create the server, set the database as the router, and use the default middlewares. Then listen on the port. Then listen on the port. Running the start script will give us what we had before with the same functionality, but now we can do a lot more.

The paramName option is used to set the name of the parameter for the uploaded file. If you’re using a file upload form element, it will match the name attribute. If you don’t include it, it

Comments
  • 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.
  • 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.
  • Instead of checking 'success' within the success: handler you can call this.defaultOptions.error from within the error: handler