24

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

enter image description here

Code Metal
  • 602
  • 2
  • 8
  • 19

3 Answers3

34

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);
});
Alwin Kesler
  • 1,450
  • 1
  • 20
  • 41
  • 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. – Ahmed Sagarwala Dec 27 '20 at 19:52
18

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.

Fabian von Ellerts
  • 4,763
  • 40
  • 35
12

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

user2354671
  • 121
  • 4