javascriptdropzone.js

How to show a custom error message in DropzoneJS?


I need to check if a file has a valid MIME type, if the file size is ok and if its dimensions are ok, then upload file.

So when everything is OK, I can use:

complete: function(file){
    // do something here.
}

but what if the size of file was invalid? In my PHP script I return an error message:

return json_encode(['error' => 'size is invalid']);

OR

return Response::json(['error' => 'size is invalid'], 500 ];
// this is Laravel 4 syntax. returns a json array and 500 as status code.

but how can I handle that error in DropzoneJS?

I tried adding a second parameter to the complete() function but it's not working.

complete: function(file, response){
    console.log( response ); // this does not work.
}

Solution

  • To get the response after the file was submitted to server use this in DropzoneJS:

    success: function(file, response) {
      alert(response);
    }
    

    And to validate the file before uploading it use this:

    complete: function(file) {
      if (file.size > 3.5*1024*1024) {
         alert("File was Larger than 3.5Mb!");
         return false;
      }
    
      if(!file.type.match('image.*')) {
        alert("Upload Image Only!");
        return false;
      }
    }
    

    If your server is returning response in JSON, you'll need to use JSON.parse before alerting it.

    Hope it'll help you! Cheers! :)