Question

I already read all of the similar threads about this same issue of loading a plupload widget inside a jquery ui dialog, but didn’t get it to work in IE9 (FF and Safari both work fine).

The problem is that in IE9 the Silverlight version of plupload gets loaded because html5 file handling isn’t supported by IE9. Somehow the Add files button isn’t pressable, the Start upload button is however. From what I’ve read so far this is being caused by the UI dialog being hidden before I open it. Several people suggested using a call to refresh on the uploader widget, but that doesn’t make a difference.

The relevant Javascript code looks as follows:
$(“#upload-widget-container”).dialog({
autoOpen: false,
show: “blind”,
hide: “fold”,
modal: false,
width: 660,
height: 400,
resizable: false
});

$("#upload-widget").pluploadQueue({
        runtimes : 'html5,silverlight,flash,browserplus',
        container: 'upload-widget-container',
        url : 'upload.php',
        max_file_size : '100mb',
        chunk_size : '1mb',
        unique_names : true,
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"},
            {title : "Bin files", extensions : "bin"}
        ],
        flash_swf_url : '/js/plupload/plupload.flash.swf',
        silverlight_xap_url : '/js/plupload/plupload.silverlight.xap'
    });

    $('.upload-button').live('click', function(e)
        {
            $('#upload-widget-container').dialog("open");
            var uploader = $('#upload-widget').pluploadQueue();

            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    // Done uploading
                    for (var i=0; i < uploader.files.length; i++)
                    {
                        if (uploader.files[i].status == plupload.DONE)
                        {
                            alert(uploader.files[i].id + ' ' + uploader.files[i].name);
                        }
                    }
                }
            });
        }
    );

The markup looks like this:

<div id="upload-widget-container">
    <div id="upload-widget"></div>
</div>

<a class="upload-button green-button-148" href="#" rel="1234">Upload</a>

Any ideas of how to get this working in IE9/Silverlight? As shown in the code above the lines to refresh the plupload object and setting the z-index of the .plupload div didn’t make a difference.

Update: it actually looks like an IE9 problem, because if I use the silverlight runtime of plupload in FF and Safari it works fine. So it’s the combination of plupload, a jquery ui dialog, silverlight and IE9.

Update 2: So I made a plain vanilla test page with no other markup, css or js. This removed the possibility of other scripts or markup or styling interfering with the workings of this.
However it still doesn’t work in IE 9 (Version: 9.0.8112.16421).

However if I remove the line that includes the jQuery UI theme CSS it does work and the Add Files button is clickable.
Any new ideas with this new information? I’m guessing it has to do with a display property in the UI theme CSS or something like that.

Answer 1

So I finally found it after fiddling with the jQuery UI CSS. I changed the overflow property of the .ui-dialog class from hidden to visible and that seems to do the trick:

Changed this line:
/.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }/

into this:
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: *bold*visible; }

Quite frankly I’m not sure why the overflow property of the dialog causes this to happen in IE, but I’ll just use this hack for now to make it work at least. Thanks IE for taking away another couple of hours of my life. And especially thanks to you guys for helping me out, I’ll give you some kudos. 🙂