Flash runtime doesn't work in IE8 using PLupload

Question

I have the simple javascript function inside $(function() { ... }); body

var uploader = new plupload.Uploader({
         runtimes: 'html5,flash,silverlight',
         browse_button: 'pickfiles',
         container: 'uploader',
         max_file_size: '20mb',
         unique_names: true,
         multiple_queues: false,
         //drop_element: 'dropzone',
         url: '/Home/Upload',
         flash_swf_url: '../../../Scripts/upload/plupload.flash.swf',
         silverlight_xap_url: '../../../Scripts/upload/plupload.silverlight.xap',
         filters: [
               { title: "Image files", extensions: "jpg,gif,png" },
               { title: "Zip files", extensions: "zip" }
           ],
         chunk_size: '2mb',
         resize: { width: 320, height: 240, quality: 90 }
      });

      uploader.bind("Init", function (up, params) {
         $("#runtime").html("<div>Current runtime: " + params.runtime + "</div>");
      });

      $("#uploadfiles").bind("click", function (e) {
         uploader.start();
         e.preventDefault();
      });

      uploader.init();

      uploader.bind("FilesAdded", function (up, files) {
         $.each(files, function (i, file) {
            $('#runtime').append(
                '<div id="' + file.id + '">' +
                    file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
           '</div>');
         });
         up.refresh();
      });

      uploader.bind("UploaderProgress", function (up, file) {
         $("#" + file.id + " b").html(file.percent + "%");
      });

      uploader.bind("Error", function (up, file) {
         $('#runtime').append("<div>Error: " + err.code +
                ", Message: " + err.message +
                (err.file ? ", File: " + err.file.name : "") +
                "</div>");
         up.refresh();
      });

      uploader.bind("FileUploaded", function (up, file) {
         $("#" + file.id + " b").html("100%");
      });

and HTML code

<div class="container">
                  <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 error is shown in the following picture:

https://i.sstatic.net/G9TZX.jpg (to view full size)

I see there that is a problem with file filters. I run PLUpload.com examples on IE8 and it works fine with Flash runtime.

On other browsers, my uploader works perfectly. Also, I have installed the latest version of Flash for ALL browsers (IE8,FF9,Chrome 16) but the problem insists in IE8.

ISSUE FIXED: do not insert uploader object into div which has visibility:hidden or display:none property.

Answer 1

This error solved by:

Add "html4" to properties: "runtimes"

var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,flash,silverlight,browserplus,**html4**',
        browse_button : 'pickfiles_<? echo  $tmpKey ?>',
        container : 'container_<? echo  $tmpKey ?>',
        max_file_size : '30mb',
        url : '/image/upload3',
        flash_swf_url : '/plupload/js/plupload.flash.swf',
        silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png,jpeg"},
            {title : "Zip files", extensions : "zip"}
        ],
        unique_names:false,
        multipart_params : {
            "tmpPath" : "<? echo $tmpPath ?>",
            "minWidth" : "<? if(isset($minWidth)) echo $minWidth; else echo 0; ?>",
            "minHeight" : "<? if(isset($minHeight)) echo $minHeight; else echo 0; ?>"
        }
    //  resize : {width : 390, height : 290, quality : 90}
    });

Good luck for you!!!

Answer 2

Install microsoft silverlight on your system.That will solve the issue, and don't forget to give a message for your users to install silverligth.

Answer 3

after the div is showing, do this:

uploader.refresh();

I have test on my page, worked!

Answer 4

This solved the problem too:

#pickfiles{
    display:block;
}

or this:

$('#pickfiles').on("mouseover",function(){
                $(".plupload.flash").css({
                    left:$('#pickfiles').offset().left+'px',
                    top:$('#pickfiles').offset().top+'px'
                    });
                });

Answer 5

For everyone who has 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 DIV is initial hidden because of dispaly:none (of course, you can set up autoOpen:false as a new option in dialog object) and remove the style.

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

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

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

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

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