Uploadify, can't access $_POST data

Question

I'm trying to use Uploadify for the first time. I have no issues with the file actually uploading. That works perfectly. My problem is that my PHP script doesn't receive a single $_REQUEST variable from Uploadify, which obviously means I can't keep track of any of the photos or delete the ones that should be deleted. Here's what I'm using:

$('.upload').uploadify({
    'uploader'  : 'uploadify/uploadify.swf',
    'script'    : 'upload.php',
    'cancelImg' : 'uploadify/cancel.png',
    'folder'    : 'img/sections/' + page,
    'auto'      : true,
    'multi'     : false,
    'method'    : 'post',
    'fileExt'   : '*.jpg;*.jpeg;*.gif;*.png',
    'onComplete': function(event, ID, fileObj, response, data) {
          window.location.replace("upload.php");                        
    }
});

I'm trying to send the input field id to the PHP script by setting it in my click function (each field shows the current photo and when you click it fades out and reveals the uploadify form):

Uploader.clk = function() {
    pic = $(this).find('input.upload').attr('id');
    field = "#" + pic;
    $(field).uploadifySettings('scriptData' : { 'field' : field });
    // all my jQuery animations
}

Of course, this doesn't work for me, but the Uploadify documentation leaves a lot to be desired. My problem is definitely in the uploadifySettings call as when I comment it out all the other stuff works fine. Even if I put

'scriptData': { 'foo' : 'bar' }

in my settings I still only get a sessionid and two fields called "utma" and "vsid" in my $_REQUEST array.

So my question is how do I tell my PHP script which field it's performing operations on?

Answer 1

Two issues here, there's no need to select the element twice, you can just do:

$(this).find("input.upload").uploadifySettings(...);

And you need to pass your settings as an object (it's just a label declaration currently), like this:

Uploader.clk = function() {
  $(this).find('input.upload')
         .uploadifySettings({'scriptData' : { 'field' : field }});
  // all my jQuery animations
}

Also note that per the documentation you need to use onSelectOnce anyway:

If updating the scriptData option via uploadifySettings(), it will not update due to synchronization issues with onOpen. Instead, use the onSelectOnce function to change the scriptData variable during an auto upload.

Overall, it should look like this:

$('.upload').uploadify({
    'uploader'  : 'uploadify/uploadify.swf',
    'script'    : 'upload.php',
    'cancelImg' : 'uploadify/cancel.png',
    'folder'    : 'img/sections/' + page,
    'auto'      : true,
    'multi'     : false,
    'method'    : 'post',
    'fileExt'   : '*.jpg;*.jpeg;*.gif;*.png',
    'onComplete': function(event, ID, fileObj, response, data) {
          window.location.replace("upload.php");                        
    },
    'onSelectOnce': function(event,data) {
          $(this).uploadifySettings({'scriptData' : { 'field' : field }});
    }        
});