plupload does not seem to be uploading files in IE 9. It works in other browsers

Question

In our project we are using plupload to upload a single excel file. This is working in all the browsers except IE9. On click of the upload link the file dialog box is displayed but nothing happens when tried to open the excel. Below is the code for reference and any help to solve this will be much appreciated. Thanks in advance!

function initUploader(btnId, fileType, onSuccess) {

    if (typeof fileType == "undefined") fileType = "image";

    var arrFilters = new Array();
    var url = 'user/attachmentUpload';

    switch (fileType) {
        case "image": 
            arrFilters = [{title : "Image files", extensions : "jpg,jpeg,gif,png"}]; 
            url = 'assets/imgupload';
            break;
        case "xls":
            arrFilters = [{title : "Spreadsheet files", extensions : "xls,xlsx"}]; 
            url = 'user/attachmentUpload';
            break;
        case "media":
            arrFilters = [{
                title : "Media files", 
                extensions : "mpeg4,mob,3gpp,avi,wmv,mp3,m4a,ogg,wav"
            }]; 
            break; 
        case "document":      
            arrFilters = [{
                title : "Text files", 
                extensions : "doc,docx"
            },{
                title : "PDF files", 
                extensions : "pdf"
            }]; 
            break; 
        default:      
            arrFilters = [
                {
                    title : "Image files", 
                    extensions : "jpg,jpeg,gif,png"
                },
                {
                    title : "Zip files", 
                    extensions : "zip"
                },
                {
                    title : "Media files", 
                    extensions : "mpeg4,mob,3gpp,avi,wmv,mp3,m4a,ogg,wav"
                },
                {
                    title : "Spreadsheet files", 
                    extensions : "xls,xlsx"
                },
                {
                    title : "Text files", 
                    extensions : "doc,docx"
                },
                {
                    title : "PDF files", 
                    extensions : "pdf"
                }
            ]; 
            break; 
    }

    var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,html4,flash,silverlight,browserplus',
        browse_button : btnId,
        //container : 'container',
        max_file_size : '10mb',
        url : url,
        flash_swf_url : 'assets/js/vendor/plupload/plupload.flash.swf',
        silverlight_xap_url : 'assets/js/vendor/plupload/plupload.silverlight.xap',
        multiple_queues : false,
        filters : arrFilters,
        resize : {width : 320, height : 240, quality : 90}
    });

    $('#'+btnId).change(function(){
        uploader.start();
    });    
    uploader.refresh();
    uploader.init();
    uploader.bind('FilesAdded', function(up, files) {
        up.refresh(); // Reposition Flash/Silverlight
        Utility.showProcessingBar();
        uploader.start();
    });
    uploader.bind('Error', function(up, err) {
        alert("Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : ""));
        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file, response) {
        var obj = eval('(' + response.response + ')');
        //alert('Files uploaded');
        if (typeof onSuccess == "function")
            onSuccess(obj.fileName);   
    });

}

Answer 1

For everyone who has the same problem as me:

I had the following HTML code:

<div class="container" style="display:none">
    <div>
        Logo:
    </div>
    <div style="clear"></div>

    <div id="uploader">
        <div id="runtime" class="right">
            No runtime was found !
        </div>
        <div>
            <a id="pickfiles" href="#">[Select files]</a>
            <a id="uploadfiles" href="#">[Upload files]</a>
        </div>
    </div>
</div>

The class container was created as dialog:

$(function(){
    $(".container").dialog({modal:true, width:400});
});

As we know that the div is initially hidden because of display: none (of course, you can set up autoOpen:false as a new option in the dialog object), we can remove the style.

In IE8 (probably in earlier and later version) the uploader cannot be instantiated properly if the div is hidden. (Returns the above error)

In Chrome and Firefox (I did't test this issue in Opera), it works fine.

So, my advice is to avoid hidden blocks (even if you wish to create a modal dialog).

I removed the display:none style and dialog object from that div and now it works very good in IE8.

Why? I don't know why in IE, the instance of object is not created at the start-up of the page, though in Firefox and Chrome, the instance was created normally.

Answer 2

For max compatibility you should rearrange the plugins priority list.

 var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,html4,flash,silverlight,browserplus',

REPLACE THAT WITH

 var uploader = new plupload.Uploader({
        runtimes : 'flash,html5,silverlight,browserplus,gears,html4',

Make sure the flash file exist and the path is relative to the location of your js file.

flash_swf_url : 'assets/js/vendor/plupload/plupload.flash.swf',