Search code examples
javascriptjqueryuploaduploadify

scriptData not being passed when there are multiple instances of uploadify


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

});

Solution

  • 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.