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

not sure what the actaull problem is? What is the code, what is the error? My idea is it is broken but there is not enough info to fix it. — Piotr Kula, Apr 19 '12 at 16:18
The problem is that I can't use pluplad when I am using jquery ui dialog with modal form. When I am using a non modal one, it works correctly... — Sam, Apr 19 '12 at 19:07
When I use the same code in a non dialog box, it works, but when I use it in a jquery dialog box I have 2 display windows... Help please — Sam, May 02 '12 at 13:51

score 1 · Accepted Answer · edited Dec 14 '12 at 13:27

1

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.

edited Dec 14 '12 at 13:27

Jeff Noel

7,500
4
40
66

answered May 23 '12 at 09:23

Sam

779
3
18
39

score 0 · Answer 2 · answered Nov 27 '13 at 15:14

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.

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

2 Answers2