title: Uploadify + jQuery UI
body: <p>So far, my uploadify implementation is running relatively smoothly except for one nagging issue.</p>
  
  <p>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. </p>
  
  <p>Only one of these queue items is actually updated with the progress bar although both seem to get the percentage updates. </p>
  
  <p>When the file upload is complete only one of these queue items (the same one updated with the progress bar) is removed.</p>
  
  <p><img src="https://i.stack.imgur.com/4SLli.jpg" alt="alt text"></p>
  
  <p>I tested it outside of the jquery-ui dialog modal window and the double queue item behavior vanished. </p>
  
  <p>I'd love to keep the uploadify prompt and queue within a modal dialog window if possible though. </p>
  
  <p>Any clues as to why using uploadify in a jquery-ui modal window causes this double queue item behavior?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <pre><code>$("#Filedata").uploadify({
   'scriptAccess': 'allways',
   'uploader'       :'&lt;?php echo base_url();?&gt;js/jquery.uploadify-v2.1.4/uploadify.allglyphs.swf', 
   'script': '&lt;?php echo site_url();?&gt;/upload/process_upload',
   'cancelImg': '&lt;?php echo base_url();?&gt;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':'&lt;?php echo $userdata;?&gt;','upload_token':'&lt;?php echo $token['value'];?&gt;'},
      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: ' + '&lt;?= getcwd() ?&gt;');
   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 &lt;span class="bold" style="font-weight:bold;"&gt;'+ r['filename'] + '&lt;/span&gt;');
   },
  
   onQueueFull: function(event, queueSizeLimit) {
   // supress dialog that mentions the queue is full
   return false;
   }
  }); 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;form id="form-document" method="" action=""&gt;
     &lt;input type="file" name="Filedata" id="Filedata" size="20" /&gt;
     &lt;input type="hidden" name="response" id="response" value=""/&gt;
     &lt;input type="hidden" name="upload_token" id="upload_token" value=""/&gt;
     &lt;input type="hidden" name="uploaded_filename" id="uploaded_filename" value=""/&gt;
     &lt;input type="hidden" name="filename_encryption" id="filename_encription" value=""/&gt;
     &lt;input type="hidden" name="uploaded_extension" id="uploaded_extension" value=""/&gt;
     &lt;input type="hidden" name="token" id="token" value="&lt;?php echo $token['value'];?&gt;"/&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>jQuery UI dialog:</p>
  
  <pre><code> dialog_data.dialog({
    autoOpen: false,
    height: 700,
    width: 800,
    modal: true,
    bigframe: true,
    buttons: {
     'Save': function() {
      $.ajax({
       type: "GET",
       url: "&lt;?php echo site_url();?&gt;/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('');
    }
   });
  </code></pre>