How to display error message of jquery dropzone

Question

I use dropzone with CI, i don't know how to display error message and custom message when upload false, this is my script

Dropzone.autoDiscover = false;
        try {
            var myDropzone = new Dropzone("#adminform" , {
                paramName: "filename", // The name that will be used to transfer the file
                maxFilesize: 0.5, // MB
                url: window.location.href,
                addRemoveLinks : true,
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
                dictResponseError: 'Error while uploading file!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            });
        } 
        catch(e) {
            alert('Dropzone does not support older browsers!');
        }

And PHP return 400:

$this->output->set_header("HTTP/1.0 400 Bad Request");

But when i hover image it's display [object Object] but message is:

dictResponseError: 'Error while uploading file!'

Bainbrudge

Answer 1

For anyone in need:

You can return a response message from the server using echo. Then in the js code add an error event handler

PHP

header("HTTP/1.0 400 Bad Request");
echo "Ups error message";

JS

this.on('error', function(file, response) {
    $(file.previewElement).find('.dz-error-message').text(response);
});

Incontestable

I found using the PHP 400 header at the beginning of the file allowed all my PHP errors to appear on the file's preview in Dropzone. This was really helpful as I'm running a few database queries when uploads complete. I recommend just always sending an error header on your dev server to make debugging easier. – Socrates

Answer 2

For me this code finally worked, used as a dropzone option:

error: function(file, message) {
      $(file.previewElement).addClass("dz-error").find('.dz-error-message').text(message.Message);
    }

I used message.Message since the ASP.net WebAPI returns a JSON object, but not with the required "error" key.

Gal

I prefer this answer because most ajax requests will not be just a "message" string. They will be objects that you have to grab the message from. – Gosse

In my code, I had to modify .text(message.Message) in .text(message.message) – Ditchwater

Answer 3

You can simply echo back the message from server via PHP file

if($file_uploaded == true)
{

   //perform operations on valid upload

} else {

  //upload failed, echo back negative response to dropzone.js
  $this->output->set_header("HTTP/1.0 400 Bad Request");
  echo "Error uploading file";

}

While your HTML file can look like:

<script type="text/javascript">
    Dropzone.options.myAwesomeDropzone = {
        paramName: "icon_image", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        init: function() {
            this.on("error", function(file, response) {
                // do stuff here.
                alert(response);

            });

        }
    };
</script>

Hope it helps :)

Bolick