How do I return data via Ajax using Plupload on Upload Complete?

Question

I've been trying for the last few hours to get something... anything back from the pluploader upon completion of the queue to no avail.

Here is my JS code:

var uploader = $('#pluploadDiv').pluploadBootstrap();

uploader.bind("UploadComplete", function(up, files) {
    var obj = $.parseJSON(response.response);
    alert(obj.result);

});

On the very last line of the upload.php script, I have:

die('{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}');

This makes sense to me... but it's not working, the files upload without problems, but the alert doesn't even fire off... there is no response whatsoever.

Thoughts?

EDIT WITH NEW CODE AS A SOLUTION

The JS that I'm using (thanks jbl):

var uploader = $('#pluploadDiv').pluploadBootstrap();

uploader.bind('FileUploaded', function(upldr, file, object) {
    var myData;
    try {
        myData = eval(object.response);
    } catch(err) {
        myData = eval('(' + object.response + ')');
    }
    $("#vehicle_id_value").val(myData.result);
});

Upload.php script stayed the same, last line of code:

die('{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}');

So basically when I create the shell row to associate images to in the upload script, I pass the row ID back to the original form into a hidden input field via the FileUploaded event that is bound to the plupload object.

<input type="hidden" name="vehicle_id_value" id="vehicle_id_value" value="" />

Works like a charm!

Answer 1

Several files could have been uploaded as part of the upload process. The individuals responses are not avalaible anymore when on UploadComplete stage. If you want to display info about a specific file upload, you should bind to the FileUploaded event instead of UploadComplete. Something like :

uploader.bind('FileUploaded', function(upldr, file, object) {
    var myData;
    try {
        myData = eval(object.response);
    } catch(err) {
        myData = eval('(' + object.response + ')');
    }
    alert(myData.result);
});

Hope this will help

Answer 2

have you tried echo instead of die?

echo '{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}';

Answer 3

function fileupload(fileuploadid, urlashx, foldername, keyid, filelimit, filefilters) {
   $("#" + fileuploadid).plupload({
        // General settings
        runtimes: 'html5,flash,silverlight,html4',
        url: urlashx,

        //Set parameter for server side
        multipart_params: {
            foldername: foldername,
            keyid: keyid
        },

        // Maximum file size
        max_file_size: filelimit,

        // User can upload no more then 20 files in one go (sets multiple_queues to false)
        max_file_count: 20,
        multiple_queues: true,

        //chunk_size: '10mb',

        // Resize images on clientside if we can
        resize: {
            //width: 200,
            //height: 200,
            quality: 90,
            crop: false // crop to exact dimensions
        },

        // Specify what files to browse for
        filters: [
            { title: "Allowed files", extensions: filefilters }
        ],

        // Rename files by clicking on their titles
        rename: true,

        // Sort files
        sortable: true,

        // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
        dragdrop: true,

        // Views to activate
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: 'thumbs'
        },

        // Flash settings
        flash_swf_url: 'plupload/js/Moxie.swf',

        // Silverlight settings
        silverlight_xap_url: 'plupload/js/Moxie.xap',

        // Post init events, bound after the internal events
       init: {

            FileUploaded: function (up, file, jsonMsg) {
                var json = JSON.parse(jsonMsg.response); // now I have json object 
                if (json.success) {
                    AlertMessage("Message", json.message, "success", "False");

                } else {
                    AlertMessage("Message", json.message, "error", "False");
                }
                up.splice(); //remove items of container
                up.refresh(); //refresh container
            }
        }
    });
}

Answer 4

uploader.bind('FileUploaded', function (up, file, res) {
  var res1 = res.response.replace('"{', '{').replace('}"', '}');
  var objResponse = JSON.parse(res1);
  alert(objResponse.fn);
});