plupload file upload with Jquery UI modal dialog not working on IE browser

Question

I am facing a problem with image upload functionality. I am using plupload to upload files with jQuery ui modal dialog. Ii is working fine on Firefox and Chrome but on IE browser, it's opening file select dialog properly but file is not getting upload. Also it's not shown any error.

I am using below code:

  var insert_image_dialogOpts = {
                autoOpen: false,
                modal: false,
                resizable: true,                    
                width: 650,                 
                show: 'blind',
                title: 'Insert Image'
            };
        jQ('#insertimagebox').dialog(insert_image_dialogOpts); 
        jQ('#insert_image_dialog').click(function() {
            jQ('#insertimagebox').dialog('open');
            return false;   
        });         

        uploadInsertImage = new plupload.Uploader({
            runtimes: 'html5,flash,gears',
            browse_button: 'insertImage',
            container: 'uploadImage',
            url: '/upload',
            multipart_params: {
                'fancy_upload': '1',
                'insert_image': '1',                    
                'action': 'doUpload',
                'forum': forum,
                'uid': uid,
                'pid': pid,
                'timestamps': timestamps                                
            },
            multi_selection: true,
            flash_swf_url: '/tools/plupload.flash.swf',
            silverlight_xap_url: '/tools/plupload.silverlight.xap',
            filters: [{
                title: "Image files",
                extensions: "jpg,gif,jpeg,jpe,png"
            }]

        });
        // General settings
        uploadInsertImage.init();           
        // Event for each file added
        uploadInsertImage.bind('FilesAdded', function(up, files) {
                jQ.each(files, function(i, file) {                  
                jQ('#imagesInserted').append('<li class="file" id="'+file.id+'" style="float:left;cursor:pointer;margin:0px;padding:0px;list-style-type:none;font-size:10px;"><span id="fileProgress" onclick="jQuery(this).html(\'\')"><span style="float:left;" id="' + file.id + '">' + file.name + '' + '</span><div id="' + file.id + 'progress" style="width:9em; margin-top:5px; height:.6em;float:left"></div><a id="attachCancel' + file.id + '" href="javascript:;" onClick="stopUpload(\'' + file.id + '\');">Cancel </a></span><br></li>');
                jQ('#' + file.id + 'progress').progressbar({
                    value: files.percent
                }).append('<div style="line-height:8px; text-align:center; font-size:10px;">Uploading...</div>');                   
            });             

            uploadInsertImage.start();          
                up.refresh();   // Reposition Flash/Silverlight
            });

Please help!

Answer 1

Thanks everybody!

Now my issue is fixed. I have used below code to open jquery ui modal dialog and its working properly with plupload library.

     dialog = jQ('#insertimagebox').dialog({
     autoOpen: false,
     width: 650,
     modal: false,   
     title: 'Upload file',
     closeText: 'Close'  
     });

     jQ('#insert_image_dialog').bind('click', function (event) {
        event.preventDefault();
        jQ('#insertimagebox').dialog('open')
     });    

You can also grab full code from github: https://github.com/ljosa/plupload/blob/jquery_ui_dialog/examples/jquery_ui_dialog.html

Thanks!

Answer 2

Looking at your code I'm seeing a differance between my runtimes and your. I think your missing silverlight in your runtime (that's the one microsoft prefers)

I included my code (just for reference)

    function initializeUploaders() {
        $('#photoUploader').pluploadQueue({

            runtimes : 'html5,flash,silverlight,html4',
            max_file_size : '10mb',
            unique_names : false,
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"}
            ],
            flash_swf_url : '<%= ResolveUrl("~/Resources/Scripts/plupload.flash.swf") %>',
            dragdrop : false,
            urlstream_upload : true,
            silverlight_xap_url : '<%= ResolveUrl("~/Resources/Scripts/plupload.silverlight.xap") %>',
            preinit : {
                UploadFile: function(up, file) {
                    up.settings.url = 'UploadPhoto.ashx?workOrderId=' + $('#hdfWorkOrderId').val();                     
                }
            },
            init : {
                FileUploaded: function(up, file, info) {
                    if (up.total.queued == 0) {
                        <%=ClientScript.GetPostBackEventReference(udpWorkOrder, "")%>;                            
                    }
                }
            }
        });
 }

Answer 3

PlUpload geretared the button and its functions using its own code. If you want to bypass that code you should edit the code from PlUpload. That's coding on a higher level than I'm able to do.

PlUpload generates code like below:

<div class="plupload_buttons">
    <a href="#" class="plupload_button plupload_add" id="photoUploader_browse" style="position: relative; z-index: 0;">Add files</a>
    <a href="#" class="plupload_button plupload_start plupload_disabled">Start upload</a>
</div>

check your browser HTML code if it matches above. If it doesn't you know where the problem is.

The only way think I can think of is finding an example that works including IE and go from there coding it to your custom preferences. Sorry I can't be of more assistence.