How to show a custom error message in DropzoneJS?

Question

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

Samoyedic

Answer 1

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! :)

Pippas

Just to add something I think is useful: you should listen to events (dropzonejs.com/#toc_8) not rewriting it (github.com/enyo/dropzone/issues/297). Cheers! :) – Cycle

@Cycle That Really good indeed, it'll allow you to add more functionality. +1 for links. – Pippas

To check file's format it's also usefull to use Dropzone.isValidFile(file, this.options.acceptedFiles). This validates against the settings you set on initialization. – Orfurd

Answer 2

Just to simplify what @amandasantanati said so you don't click around:

Don't do complete: ... but instead:

init: function() 
    {
        this.on("complete", function(file) {
            if (file.size > 3.5*1024*1024) {
                this.removeFile(file);
                alert('file too big');
                return false;
            }

            if(!file.type.match('image.*')) {
                this.removeFile(file);
                alert('Not an image')
                return false;
            }
        });
    },

Iggie

Answer 3

Set the HTTP response code http_response_code(415); // Unsupported Media Type or http_response_code(415); // Not Acceptable

    function showError($message)
    {
        http_response_code(415);
        die($message);
    }

Shirley

Answer 4

it is always better to validate before upload, so use 'error' event like this:

        myDropzone.on('error', function (file) {

        if ((file.size / 1024 / 1024) > this.options.maxFilesize) {
            this.removeAllFiles();
            alert('error');
        }

    });

if you still want to handle this after upload, you can send the response from controller like:

<?php return Response::json(['error' => 'size is invalid'], 400 ]; ?> 

and handle the response like:

myDropzone.on('error', function (file, response) {

if(typeof response =="object"){
        alert(response.error);
}
});

Capping

Answer 5

DropzoneJS expects the server's response to be text and not JSON, which is why 'object Object' appears since it is placing the content directly in the HTML element. To make DropzoneJS display your error message instead of 'object Object', you can do this:

 myDropzone.on('error', function (file, response) {
     if(typeof response =="object"){
        file.previewElement.children[3].innerText = response.error //Text
     }
 });

I think people misunderstood your question because the answers here don't give exactly what was asked, so I posted the solution to give some direction to those who are lost.

Sartorius