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
– Piotr Kula, Commented Apr 19, 2012 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
– Sam, Commented Apr 19, 2012 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
– Sam, Commented May 2, 2012 at 13:51

Jeff Noel · Accepted Answer · 2012-12-14 13:27:55Z

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, 2012 at 13:27

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

answered May 23, 2012 at 9:23

Sam

7893 gold badges19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darth Jon · Accepted Answer · 2013-11-27 15:14:16Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related