Uploadify inside Jquery UI Dialog => Chrome & Opera bugs Uploadify inside Jquery UI Dialog => Chrome & Opera bugs google-chrome google-chrome

Uploadify inside Jquery UI Dialog => Chrome & Opera bugs


I recently had the same problem, after looking up a bit at the code i have noticed the following at line 193:

jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 1, 'left' : '0px'});

Simply changing the z-index to 9999 worked for me

jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 9999, 'left' : '0px'});


If you don't want to change core codes just add the following css rule to your page.

.swfupload {    z-index: 100000 !important;}


I have tried all the solutions but to no avail.

There are 3 instances of uploadify in the page.

As shown in the image there is a dialog box or overlay div over the main page. When I click over the SELECT FILES it does not display the browse dialog box

http://lh5.ggpht.com/cZ-V3g6IwQ2ke-9NDfv3GYh8ra9YypCs4V60Md_s7W3Rawzg2IcT2WT9HoqX40kaSstF=s170

This are the source code for the page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <meta name="generator" content=  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />  <title></title></head><body>  <div id="upload_vi" style=  "background-color:#e8e8e8; border: 1px solid rgb(0, 0, 0); position:absolute; display:none; width:280px; padding: 4px;"  class="ui-draggable">    <div style="padding:5px;">      <a id="close" onclick="$('#upload_vi').hide()" style="color:#888888; float: right"      name="close"><img src="images/close_btn.jpg" border="0" /></a>    </div><br />    <form id="fiuploader2" name="fiuploader2">      <input type="hidden" name="edit_item_id2" id="edit_item_id2" value="" /><br />      <input type="hidden" name="spicname2" id="spicname2" value="" /><input type=      "hidden" name="sorgname2" id="sorgname2" value="" /> <input type="file2" name=      "file2" id="file2" style="display: none;" /><object type=      "application/x-shockwave-flash" data="/js/uplodify/uploadify.swf" width="120"      height="30" id="file2Uploader" style="visibility: visible;">        <param name="quality" value="high" />        <param name="wmode" value="transparent" />        <param name="allowScriptAccess" value="sameDomain" />        <param name="flashvars" value=        "uploadifyID=file2&pagepath=/members/&script=http://localhost/members/multiSrv.php&folder=/files/cityguide/&scriptData=asy_up%3D1%26cityguide%3D1%26video%3D1&width=120&height=30&wmode=transparent&method=POST&queueSizeLimit=1&simUploadLimit=1&fileDesc=Videos (.avi, .flv)&fileExt=*.avi;*.flv&sizeLimit=2000000&fileDataName=Filedata" />      </object>      <div id="file2Queue" class="uploadifyQueue"></div><br />      <a onclick="$('#file2').uploadifyUpload()" style=      "color: darkblue; font-size: 12px; cursor: pointer; cursor: hand; text-decoration: underline;">      <b>Upload</b></a><br />      <div id="hlptxt2">        Please choose a .avi, .flv file.<br />        Maximum size 2MB      </div><br />      <input type="hidden" name="type2" id="type2" value="videos" />    </form>  </div></body></html>