CODEWITHSUNDEEP
silverlightjquery-uijquery-ui-dialogplupload
Ruben
Ruben

Reputation: 5095

plupload widget inside jquery ui dialog

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.

Upvotes: 0

Views: 2446

Answers (4)

Darth Jon
Darth Jon

Reputation: 423

I've successfully been able to implement a pluploadQueue widget in a jQuery UI dialog by coding the object in the "open" callback of the dialog:

$("#plupload-dialog").dialog({
   autoOpen: false,
   modal: false,  // change this to true for modal, but haven't tested yet
   open: function(event, ui) {
       $("pluploader").pluploadQueue({
           runtimes: '', // add your runtimes here
           url: '',  // add your URL here
           flash_swf_url: '', // path to shockwave component
           silverlight_xap_url: '', // path to silverlight component
           max_file_size: '', // file size option
           filters: [], // filter options
           preinit: {  // preinit callbacks - note do not include separate init for pluploadQueue
               Init: function(up, info) {
               },
               UploadFile: function(up, file) {
               },
               FilesAdded: function(up, files) {
                   // do some stuff

                   // hide browse button
                   $(up.settings.browse_button).hide();

               }
               FilesRemoved: function(up, files) {
                   // do some stuff

                   // show browse button
                   $(up.settings.browse_button).show();

                   // refresh the object
                   $("#pluploader").pluploadQueue().refresh();

               }
               Error: function(up, args) {
               }
           } 
       });
   }
});

Not sure this is what you're looking for, but may be helpful in some way.

Upvotes: 0

Ruben
Ruben

Reputation: 5095

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. :)

Upvotes: 1

jjay225
jjay225

Reputation: 518

Tell me something, does the button just have the 'plupload_disabled' style set or is there actually no click event attached? Have you tried loading your dialog then in the console of chrome or firebug do something like:

$('a[id*="browse"]').attr('class','').addClass('plupload_button plupload_start ui-button ui-    widget ui-state-default ui-corner-all ui-button-text-icon-primary');

I'm using the html4 version of the jquery pluploadqueue version but try run that in the console to change the button back to enabled and try add a file. Just match the class names above to the ones you using.

UPDATE

Try this:

$('.upload-button').live('click', function(e)
{
    $('#upload-widget-container').dialog("open");
    initUploader($('#upload-widget'));
    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);
                }
            }
        }
    });
    $('<div>').delay(1000).queue(function()
    {
        $('div.plupload_buttons').find('a').each(function()
        {
            if($(this).hasClass('plupload_disabled'))
            {
                $(this).attr('class','').addClass('plupload_button plupload_start');

            }
        });
        $(this).dequeue();
    });
    }
 );

Upvotes: 1

jbl
jbl

Reputation: 15413

Maybe you can try delaying your uploader initialization until the UI is visible.

This can be done by putting the init code into a separate function (don't forget to destroy the uploader when closing the dialog box, or keep track of already initialized uploader)

var initUploader = function(uploadWidget)
        {
            $(uploadWidget).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");
        initUploader($('#upload-widget'));
        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);
                    }
                }
            }
        });
    }
);

Hope this will help

Upvotes: 1

Related Questions