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!

If you need more code to answer, please let me know and I'll post more! — Tony M, May 15 '13 at 02:02

score 11 · Accepted Answer · answered May 15 '13 at 07:18

11

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

answered May 15 '13 at 07:18

jbl

15,179
3
34
101

1

Thank you - I will give this a shot, but I'm only looking for one piece of data at the end of submission on UploadComplete. When the uploader script runs I'm inserting a record into the database to act as a shell so that I can associate these uploaded files with something. I have the ID of this shell which needs to be passed back to my original form. I'll use it to update the shell with the $_POST data in the original submission. With this piece of data I can alter a hidden variable on the original page and have it passed in the $_POST. If you have any other insight, it's appreciated! – Tony M May 15 '13 at 13:28
@TonyMancini are you trying to perform something similar to this http://stackoverflow.com/q/14786842/1236044 ? – jbl May 15 '13 at 13:47
yes, I'm close to performing this without the additional ajax call though, and I'd prefer to continue on the path I'm on. I just ran your code and got the response I was looking for - answer accepted, thanks for your help!! – Tony M May 15 '13 at 15:22
2

Don't `eval` that! Run it through JSON.parse, instead. There's a polyfill available if you are unfortunate enough to have to support oldIE. – Michael Cordingley Sep 04 '14 at 17:58

score 1 · Answer 2 · answered May 15 '13 at 02:59

1

have you tried echo instead of die?

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

answered May 15 '13 at 02:59

cumul

864
9
21

score 1 · Answer 3 · answered Jul 27 '19 at 04:29

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

score 0 · Answer 4 · answered Aug 27 '16 at 05:07

0

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

answered Aug 27 '16 at 05:07

CK Yap

1
1

It would be really helpful if you can add an explanation to the answer you provided. – Lal Aug 27 '16 at 09:03

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

4 Answers4

Linked