Jquery UI Dialog - PLUPLOAD: Plupload doesn't work ith jquery ui dialog

Question

I have a problem while trying to upload using plupload and jquery ui dialog.

I have a modal dialog builded with jqueryui and I have added a plupload layout into it.

But when I try it with Firefox it open's me 2 dialog frame and with Safari it doesn't work.

I have seen the code generated and I have seen that in Firefox I have 2

<div id="p16r5em3ep2gmrvk1ad335d1sae0_html5_container" style="position: absolute; background: none repeat scroll 0% 0% transparent; width: 0px; height: 0px; overflow: hidden; z-index: -1; opacity: 0; top: 0px; left: 0px;" class="plupload html5">
      <input type="file" multiple="multiple" accept="" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" id="p16r5em3ep2gmrvk1ad335d1sae0_html5">
    </div>

And the second one

<div id="p16r5em3i11ila2j0b91i163s44_html5_container" style="position: absolute; background: none repeat scroll 0% 0% transparent; width: 0px; height: 0px; overflow: hidden; z-index: -1; opacity: 0; top: 0px; left: 0px;" class="plupload html5">
        <input type="file" multiple="multiple" accept="" style="font-size: 999px; position: absolute; width: 100%; height: 100%;" id="p16r5em3i11ila2j0b91i163s44_html5">
    </div>

For Safari, I have...

<div id="p16r5fjomdg751e101jao122t12gd0_html5_container" style="position: absolute; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; opacity: 0; top: 0px; left: 0px; width: 0px; height: 0px; z-index: -1; background-position: initial initial; background-repeat: initial initial; " class="plupload html5">
    <input id="p16r5fjomdg751e101jao122t12gd0_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%; " type="file" accept="" multiple="multiple">
</div>

And the second one

<div id="p16r5fjong1g231iqm10sq1jte1nc34_html5_container" style="position: absolute; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; opacity: 0; top: 0px; left: 0px; width: 0px; height: 0px; z-index: -1; background-position: initial initial; background-repeat: initial initial; " class="plupload html5">
         <input id="p16r5fjong1g231iqm10sq1jte1nc34_html5" style="font-size: 999px; position: absolute; width: 100%; height: 100%; " type="file" accept="" multiple="multiple">
</div>

But nothing's come right.

Note that if I don't use the modal dialog, it works...

EDIT I use this code to init plupload

var uploader = new plupload.Uploader ({
        runtimes: 'html5,flash',
        container:'container',
        drop_element:'upDropArea',
        browse_button: 'upBrowseButton',
        url: 'url&action=action',
        flash_swf_url: '/lib/plupload/js/plupload.flash.swf',
        multipart: true,
        urlstream_upload:true,
        resize : {quality : 60},
        multiple_queues: true,

        filters : [
                   {title: 'Images', extensions: 'jpg,gif,png,jpeg'}
        ]


    });

Any idea?

Thanks for all

Answer 1

I have have recently implemented the pluploadQueue plugin in a jQuery UI dialog by coding the plupload object in the "open" function callback of the jQuery UI 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) {
               },
               Error: function(up, args) {
               }
           } 
       });
   }
});

Not sure if this will help, but maybe worth a shot.

Answer 2

You don't have to init plupload widget into the jQuery UI modal dialog, it works fine when you intialize it somewhere else in your script.