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!'

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

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.