plUpload - Server Side Errors Not Showing

Question

I have a plupload instance based on the custom example from the website in place, it is working flawlessly except for displaying error messages that come from the server side upload script (upload.php from the examples folder in the download).

Local error messages are being displayed, for instance if i try to upload a file type that has been restricted, i get the error message i'm expecting, however, server side messages just aren't being shown.

I know the upload.php file is being triggered properly as my uploads are processed successfully, and i have set a sleep function to also verify the file is being requested. At the minute I have simply placed to lines at the top of my upload.php to assist with debugging which simply sleep for 10 seconds and return an error message, this still does not work.

upload.php
    sleep(10);
    die('{"jsonrpc" : "2.0", "error" : {"code": 500, "message": "THIS IS AN ERROR."}, "id" : "id"}');
...(Rest of normal upload.php file)...

The javascript I am using is included below, any help you guys could give would be greatly appreciated as I have spend too long on this already and the issue is holding me back from being able to push my code live.

Thanks,

Alex

// Fanart
$(function() {
var fanart_uploader = new plupload.Uploader({
    runtimes : 'html5,flash,html4',
    browse_button : 'fanart_pickfiles',
    container : 'fanart_container',
    drop_element : 'fanart_drop',
    chunk_size : '1mb',
    max_file_size : '8mb',
    url : '/upload.php?gameid=<?= $gameid ?>&arttype=fanart',
    flash_swf_url : '/js/plupload/js/plupload.flash.swf',
    silverlight_xap_url : '/js/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,png"},
    ]
});

fanart_uploader.bind('Init', function(up, params) {
    $('#fanart_runtime').html("You are using " + params.runtime);
});

$('#fanart_uploadfiles').click(function(e) {
    fanart_uploader.start();
    e.preventDefault();
});

fanart_uploader.init();

fanart_uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        $('#fanart_filelist').append(
            '<div style="padding: 4px; margin: 3px; border: 1px dotted #fff; border-radius: 6px; background-color: #333;" id="' + file.id + '"><img class="tick" src=\"<?= $baseurl ?>/images/common/icons/tick_16.png\" style=\"display: none; vertical-align: -2px;\" />' +
            file.name + ' <em>(' + plupload.formatSize(file.size) + ')</em> <div style=\"margin: auto; margin-top: 3px; width: 200px; height: 20px; border: 1px solid #fff; border-radius: 6px; background-color: #222;\"><div class="progressbar" style=\"width: 0px; height: 16px; padding: 2px 0px; background-color: #ccc; border-radius: 6px; text-align: center;\"><b style="font-size: 16px; color: #222;"></b></div></div>' +
        '</div>');
    });

    up.refresh(); // Reposition Flash/Silverlight
});

fanart_uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
    $('#' + file.id + " .progressbar").css("width", (file.percent * 2));
});

fanart_uploader.bind('Error', function(up, err) {
    $('#fanart_filelist').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );

    up.refresh(); // Reposition Flash/Silverlight
});

fanart_uploader.bind('FileUploaded', function(up, file) {
    $('#' + file.id + " .tick").show();
});
});

Answer 1

And here is the answer you linked to:

NM, Answered my own question...

It seems my plUpload instance relieves the server response which is a JSON string into a JS object which can be accessed through the "FileUploaded" event.

This is a code example for anyone else who needs this answer.

fanart_uploader.bind('FileUploaded', function(up, file, info) {
    $('#' + file.id + " .tick").show();
    printObject(info);

    var response = jQuery.parseJSON(info.response);

    alert(response.error.message);
});