Uploadify + jQuery UI

So far, my uploadify implementation is running relatively smoothly except for one nagging issue.

I have my uploadify browse prompt in a jquery-ui dialog modal window. Files get uploaded fine but for each file item chosen, two identical queue items (same id) appear.

Only one of these queue items is actually updated with the progress bar although both seem to get the percentage updates.

When the file upload is complete only one of these queue items (the same one updated with the progress bar) is removed.

I tested it outside of the jquery-ui dialog modal window and the double queue item behavior vanished.

I'd love to keep the uploadify prompt and queue within a modal dialog window if possible though.

Any clues as to why using uploadify in a jquery-ui modal window causes this double queue item behavior?

UPDATE:

$("#Filedata").uploadify({
 'scriptAccess': 'allways',
 'uploader'       :'<?php echo base_url();?>js/jquery.uploadify-v2.1.4/uploadify.allglyphs.swf', 
 'script': '<?php echo site_url();?>/upload/process_upload',
 'cancelImg': '<?php echo base_url();?>js/jquery.uploadify-v2.1.4/cancel.png',
 'folder'         : '/',
 'fileDataName'     :'Filedata',
 'buttonText'  : 'Document...',
 'width': '273',
 'height': '51',
 'wmode': 'transparent',
 'auto'           : true, 
 'multi'          : false,
 'fileExt' : '*.pdf;', 'fileDesc' :'Document',
 'sizeLimit' : 10485760,
 'simUploadLimit' : 1,
 'queueSizeLimit' :'1',
 'uploaderType' : 'flash',
 'scriptData' : {'userdata':'<?php echo $userdata;?>','upload_token':'<?php echo $token['value'];?>'},
    onProgress: function() { 
  //hide upload button
  $("object#FiledataUploader").height(0);
    }, 

 //workaround for bug in jQuery UI dialog/upoadify (double progress bars )
 onOpen      : function(event,ID,fileObj) {
  $('#FiledataQueue div.uploadifyQueueItem:first-child').hide();
    },

 onError: function(a, b, c, d) {
 if (d.status == 404)
 alert('Could not find upload script. Use a path relative to: ' + '<?= getcwd() ?>');
 else if (d.type === "HTTP")
 alert('error ' + d.type + ": " + d.info);
 else if (d.type === "File Size")
 alert(c.name + ' ' + d.type + ' Limit: ' + Math.round(d.sizeLimit / 1024) + 'KB');
 else
 alert('error ' + d.type + ": " + d.info);
 },
 onComplete   : function (event, queueID, fileObj, response, data) {
  var r = JSON.parse(response);
  $('#token').val(r['token']);                                    
  $('#uploaded_filename').val(r['uploaded_filename']);
  $('#filename_encryption').val(r['encryption']);
  $('#FiledataQueue').html('Document <span class="bold" style="font-weight:bold;">'+ r['filename'] + '</span>');
 },

 onQueueFull: function(event, queueSizeLimit) {
 // supress dialog that mentions the queue is full
 return false;
 }
}); 

HTML:

  <form id="form-document" method="" action="">
   <input type="file" name="Filedata" id="Filedata" size="20" />
   <input type="hidden" name="response" id="response" value=""/>
   <input type="hidden" name="upload_token" i开发者_如何学Cd="upload_token" value=""/>
   <input type="hidden" name="uploaded_filename" id="uploaded_filename" value=""/>
   <input type="hidden" name="filename_encryption" id="filename_encription" value=""/>
   <input type="hidden" name="uploaded_extension" id="uploaded_extension" value=""/>
   <input type="hidden" name="token" id="token" value="<?php echo $token['value'];?>"/>
   </form>

UPDATE 2:

jQuery UI dialog:

 dialog_data.dialog({
  autoOpen: false,
  height: 700,
  width: 800,
  modal: true,
  bigframe: true,
  buttons: {
   'Save': function() {
    $.ajax({
     type: "GET",
     url: "<?php echo site_url();?>/upload/finish",
     dataType: 'html',
     data: $('#form-document').serialize(),
     success: function(){
      oCache.iCacheLower = -1;
      oTable.fnDraw();
      dialog_data.dialog('close');
     }
    });
   },
   'Close': function() {
    $(this).dialog('close');
    $('.loading').hide();
   }
  },
  open: function(){
   $('.loading').hide();
   $("object#FiledataUploader").height(30);
  },
  close: function() {
   $('#uploaded_filename').val('');
   $('#filename_encription').val('');
   $('#FiledataQueue').html('');
  }
 });

---

You may try to check what happens if you give another id and name to your file field. Filedata is the variable used in the uploading script whatever the ID/name you give to your field, and I wonder if there might not be a conflict.

So I'd say try changing the ID, and adding the id parameter to your uploadify settings (with the new ID as value), and let us know if that fixes the issue.

---

Is this the solution to the bug?

//workaround for bug in jQuery UI dialog/upoadify (double progress bars )
 onOpen      : function(event,ID,fileObj) {
  $('#FiledataQueue div.uploadifyQueueItem:first-child').hide();
    },

---

This error in absence function getAttributeNode and getAttribute in Flash element.

Change in "jquery-min.js"

elem.getAttributeNode(name) // OR a.getAttributeNode(b)

to

(elem.getAttributeNode?elem.getAttributeNode(name):null) // OR (a.getAttributeNode?a.getAttributeNode(b):null)

and

elem.getAttribute(name) // OR a.getAttribute(b)

to

(elem.getAttribute?elem.getAttribute(name):null) // OR (a.getAttribute?a.getAttribute(b):null)