Uploadify: Passing a form's ID as a parameter with scriptData

Question

I need the ability to have multiple upload inputs on one page (potentially hundreds) using Uploadify. The upload PHP file will be renaming the uploaded file based on the ID of the input button used to submit it, so it will need that ID.

Since I will be having hundreds of upload buttons on one page, I wanted to create a universal instantiation, so I did this using the class of the forms rather than the ID of the forms. However, when one of the inputs is clicked, I would like to pass the ID of that input as scriptData to the PHP. This is not working; PHP says 'formId' is undefined.

Is there a good way get the ID attribute of the form input being used, and passing it to the upload PHP? Or is there a completely different and better method of accomplishing this? Thank you in advance!!

  <script type="text/javascript">
    $(document).ready(function() {
      $('.uploady').uploadify({
        'uploader'  : '/uploadify/uploadify.swf',
        'script'    : '/uploadify/uploadify.php',
        'cancelImg' : '/uploadify/cancel.png',
        'folder'    : '/uploadify',
        'auto'      : true,
      // LINE IN QUESTION
      'scriptData'  : {'formId':$(this).attr('id')}
  });
});
</script>
</head>

The inputs look like this:

<input id="file_upload1" class="uploady" name="file_upload" type="file" />
<input id="file_upload2" class="uploady" name="file_upload" type="file" />
<input id="file_upload3" class="uploady" name="file_upload" type="file" />

Answer 1

well I was struggling with the same issue just a minute ago and here is the solution, you can get the ID of the element as defining a function in onSelect event like below

//EDIT Here's the working code

$('.uploady').uploadify({
    'uploader'  : '/uploadify/uploadify.swf',
    'script'    : '/uploadify/uploadify.php',
    'cancelImg' : '/uploadify/cancel.png',
    'folder'    : '/uploadify',
    'auto'      : true,
    // ANSWER
    'onSelect'    : function(event,ID,fileObj) {
        var elem_id = $(event.target).attr("id"); //here you get the id of the object.
        $("#"+elem_id).uploadifySettings('scriptData',{'formID':elem_id})
    },
});

now your formID would be sent correctly

Answer 2

If you know that you want it to be sent every time (or don't mind having it sent unnecessarily), you can make a simple edit to the Uploadify.js file.

Replace this if clause (beginning line 74 in Uploadify v2.1.4) :

if (settings.scriptData) {
    var scriptDataString = '';
    for (var name in settings.scriptData) {
        scriptDataString += '&' + name + '=' + settings.scriptData[name];
    }
    data.scriptData = escape(scriptDataString.substr(1));
}

with the following:

if (settings.scriptData) {
    var scriptDataString = '';
    for (var name in settings.scriptData) {
        scriptDataString += '&' + name + '=' + settings.scriptData[name];
    }
}
scriptDataString += '&elemID=' + settings.id;
data.scriptData = escape(scriptDataString.substr(1));

In the backend, the element ID can be accessed like any other element of scriptData:

$thisInputID = $_POST["elemID"];

If you want to access the ID with a different name (here, it's elemID), just change it in the scriptDataString += '&elemID=' + settings.id line, above.