scriptData not being passed when there are multiple instances of uploadify

Question

I've got two instances of uploadify in my form. You'll find the definitions below.

And two buttons that trigger the uploads. The image button is the only one relevant to the question:

$( "#btnimageupload" ).button().click(function()
{
 $('#picbrowse').uploadifySettings( 'scriptData', ({ 'isSelected': $( '#selectImage' ).val() }));
 $('#picbrowse').uploadifyUpload();
});

Now, here's the issue:

When I click btnimageupload button, the image doesn't upload. The progressbar goes to 100 and stops. No errors, javascript or otherwise.

But, when I disable the vdobrowse file input box, and its corresponding script, everything works fine. The images are uploaded and the data is transferring.

Here's the tricky part... if I don't pass the scriptData on the btnimageupload click handler, images will upload even with vdobrowse file input box on the page.

So it seems to me like scriptData is breaking uploadify when there's more than one instance of uploadify on the page.

Anyone know how I could solve this?

Uploadify definitions

$('#picbrowse').uploadify(
{
 uploader  : 'script/uplodify/uploadify.swf',
 script    : '../../dopost.php',
 cancelImg : 'script/uplodify/cancel.png',
 folder    : '/images',
 queueID   : 'picqueue',
 auto      : false,
 multi     : true,
 fileDesc    : 'Image Files',
 fileExt     : '*.gif;*.jpg;',
 queueSizeLimit: 5,
 scriptData:
 ({
  'action': 'upload_image',
 }),
 onComplete: function( event, queueID, fileObj, response, data )
 {
  console.log( reponse)
 }
});

.

$('#vdobrowse').uploadify(
{
 uploader  : 'script/uplodify/uploadify.swf',
 script    : '../../dopost.php',
 cancelImg : 'script/uplodify/cancel.png',
 folder    : '/video',
 queueID   : 'vdoqueue',
 auto      : false,
 multi     : true,
 fileDesc    : 'Video Files',
 fileExt     : '*.avi;*.mpg;*.mov;*.mp4;*.mpeg;*.flv;*.mkv;*.wmv',
 queueSizeLimit: 5,
 scriptData:
 {
  action: 'upload_video'
 },
 onComplete: function( event, queueID, fileObj, response, data )
 {
  console.log( response );
 }

});

Why don't you share the markup and the dopost.php so we can reproduce the issue? — ifaour, Dec 25 '10 at 19:13

score 1 · Accepted Answer · answered Dec 19 '10 at 10:11

The plugin appears to be putting the options into global space, which is why when you are using two or more uploadify's with scriptData it is picking up the last stored value in scriptData.

I see running two uploadify's on one page a pointless exercise and as such I never test the functionality with multiple uploadify's. uploadifySettings works perfectly with one uploadify. Multiple uploadify's are the demo page to demonstrate the different setups possible.

That said, it is still obviously a problem for users and we will need to fix it for those that wish to use multiple uploadify's on the same page.

Forum

I suggest to use swfUpload. I am use in at my project and tested with multiple instances and it's work perfect. So swfUpload easy to understand and api looks like as uploadify api.

score 1 · Answer 2 · answered Dec 21 '10 at 17:24

Given that there seems to be a limitation with scriptData and multiple Uploadifys on a page, what you could do is skip the scriptData and folder attributes and parse out the file types inside dopost.php and take an action based on that.

For example:

$fileParts  = pathinfo($_FILES['Filedata']['name']);
$extension = strtolower($fileParts['extension']);
switch($extension){
    case "gif" | "jpg":
        // Do Image Upload Action
    break;
    case "avi" | "mpg" | "mov" | "mp4" | "mpeg" | "flv" | "mkv" | "wmv":
        // Do Video Upload Action
    break;
}

This is the data I need to send `{ 'isSelected': $( '#selectImage' ).val() }` which is coming from a drop down box. — HyderA, Dec 22 '10 at 09:29

score 1 · Answer 3 · answered Dec 25 '10 at 20:03

I'm receiving the scripData just fine, I've made an example on my website
I've limited the upload size to 500KB for obvious reasons and corrected the code:

$('#picbrowse').uploadify(
{
    uploader  : 'uploadify.swf',
    script    : 'uploadify.php',
    cancelImg : 'cancel.png',
    folder    : 'uploads/images',
    queueID   : 'picqueue',
    auto      : false,
    multi     : true,
    removeCompleted : false,
    fileDesc    : 'Image Files',
    fileExt     : '*.gif;*.jpg',
    sizeLimit   : 512000,
    queueSizeLimit: 5,
    scriptData: {action: 'upload_image'},
    onComplete: function( event, queueID, fileObj, response, data )
    {
        $ul.html('');
        var json = jQuery.parseJSON(response);
        $.each(json,function(k,v){
            var li = "<li>"+k+": "+v+"</li>";
            $ul.append(li);
        });
    },
    onError: function (event,ID,fileObj,errorObj) {
        console.log(errorObj.type + ' Error: ' + errorObj.info);
    }
});

$('#vdobrowse').uploadify(
{
    uploader  : 'uploadify.swf',
    script    : 'uploadify.php',
    cancelImg : 'cancel.png',
    folder    : 'uploads/video',
    queueID   : 'vdoqueue',
    auto      : false,
    multi     : true,
    sizeLimit   : 512000,
    fileDesc    : 'Video Files',
    fileExt     : '*.avi;*.mpg;*.mov;*.mp4;*.mpeg;*.flv;*.mkv;*.wmv',
    queueSizeLimit: 5,
    scriptData: {action: 'upload_video'},
    onComplete: function( event, queueID, fileObj, response, data )
    {
        $ul.html('');
        var json = jQuery.parseJSON(response);
        $.each(json,function(k,v){
            var li = "<li>"+k+": "+v+"</li>";
            $ul.append(li);
        });
    }

});

And I'm using the standard uploadify.php and echoing the POST variable instead:

echo json_encode($_POST);

scriptData not being passed when there are multiple instances of uploadify

3 Answers3