How pass and receive formData values in Uploadify?

Question

I have been trying to pass and modify data from the client side of uploadify to the server file uploadify.php using the formData setting. I have tried many of the solutions posted on here and the uploadify forums but with no avail.

Initially both formData values are set to the string 'empty' and then when an upload starts, eAlias is set to 2 and eDate to a date. The server script then receives these values by POST and echos them back to the client script which displays this data in an alert (in onUploadSuccess). In all the possible solutions tried the values are either "" or 'empty', ie the setting on the formData keys in onUploadStart doesn't work.

I have included most of the client script and the server script below.

Any help or advice would be greatly appreciated, thank you.

Client-side script:

<script type="text/javascript">
$(document).ready(function() 
{
    $(".uploadifyfile").uploadify(
    {
        'swf'           : '/xx/uploadify.swf',
        'uploader'      : '/xx/uploadify.php',
        'auto'          : true,     
        'height'        : 15,
        'method'        : 'POST',
        'multi'         : false,    
        'uploadLimit'   : 10,       
        'formData'      : { 'eAlias' : 'empty', 'eDate' : 'empty' },
        'onUploadSuccess' : function(file, data, response) 
        {   
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ' : ' + data);
            document.getElementById("adminForm")[buttonPressed].value = data;
        },
        'onUploadStart' : function(file) 
        {
            var eventDate = "<?php echo $this->row->dates; ?>";
            var eventVenue = 'test';
            alert('Venue Alias: ' + eventVenue + '\neventDate: ' + eventDate);

            //**** The line below is the one in question ****//
            $(".uploadifyfile").uploadify("settings", "formData", {"eAlias": 2, "eDate" : eventDate});
        },
        'onSelect' : function(event, ID, fileObj)
        {
            var eid = event.id;
            if(eid == "SWFUpload_0_0")
            {
                window.buttonPressed = "custom01";
                alert('1');
            }
            ...
        }
    });
});
</script>

Server-side script

$targetFolder = '/xx/uploads'; // Relative to the root

if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

    // Set $someVar to 'someValue'
    $eventAlias = $_POST['eAlias'];
    $eventDate = $_POST['eDate'];

    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);

    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        echo $targetFolder . '/' . $_FILES['Filedata']['name'];
        echo ' eventAlias: '.$eventAlias.' eventDate: '.$eventDate;
    } else {
        echo 'Invalid file type.';
    }
}

Answer 1

your clientSide code is right.i use the same code ,and it works well.so you'd better use id to generate a uploadify instance instead of class

Answer 2

The problem was as I thought; it was because I was using multiple instances of the uploadify button and referring to them using the .uploadifyfile class. Uploadify doesn't seem to work fully when using classes.

The, probably rudimentary, solution I came up with was to use the 'onSelect' function to store the id of the button pressed into a global variable (window.uploadid) and then use this in the 'onUploadStart' function. Now, for example, when the 2nd button is pressed, the fileType attribute is changed to finalDetails successfully.

I had looked at using jQuery selectors, but they didn't seem to work in this case for id's, just classes.

I've no doubt that there will be several optimisations do be made to the below code, but I hope it will save anyone who was in the same situation as I was many hours of work.

<script type="text/javascript">
$(document).ready(function() 
{
    $(".uploadifyfile").uploadify(
    {
        ...
        'method'        : 'post',
        'formData'      : { 'eventDate' : 'notSet', 'eventVenue' : 'notSet', 'fileType' : 'notSet' },
        'onUploadStart' : function(file) 
        {
            var eventDate = "<?php echo $this->row->dates; ?>";
            var eventVenue = "<?php echo JFilterOutput::stringURLSafe($this->row->venue); ?>";
            $(uploadid).uploadify('settings','formData',{ 'eventDate' : eventDate, 'eventVenue' : eventVenue, 'fileType' : fileType });
        },
        'onSelect' : function(event, ID, fileObj)
        {
            alert('event.id:' + event.id);

            var eid = event.id;             // To determine which button was pressed

            if(eid == "SWFUpload_0_0")      // Flyer upload
            {
                window.buttonPressed = "custom01";
                window.uploadid = "#file_upload";
                window.fileType = "flyer";
            }
            else if(eid == "SWFUpload_1_0") // Final Details upload
            {
                window.buttonPressed = "custom02";
                window.uploadid = "#file_upload2";
                window.fileType = "finalDetails";
            }
            ...
        }
    });
});
</script>

...
<input type="file" name="file_upload" id="file_upload" class="uploadifyfile" />
...
<input type="file" name="file_upload2" id="file_upload2" class="uploadifyfile" />