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

Tony M picture Tony M · May 15, 2013 · Viewed 14.4k times · Source

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

jbl picture jbl · May 15, 2013

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