File uploads not working within jQuery UI Dialog

Question

So I have a rather odd issue that I wanted to see if anyone has some insight into.

I have a page in which I display a grid of files that have been uploaded to our server. The toolbar for the grid provides them with the ability to upload more files. When they click the "Add File" button on the toolbar, a jQuery UI Dialog modal window appears with a simple file upload control in it. After they select a file, they click the "Upload" button on the Dialog which submits the underlying form for uploading. Also note that because I'm using asp.net, there is only one form on the page so I'm not submitting the wrong form.

Now... when I attempt to look for uploaded files on the backend, no files are uploaded. What's worse, if I move the upload control out of the dialog div and use it straight from the page without a dialog, the uploads work fine.

This leads me to believe that even though I am defining the div that will become my dialog within the main form to allow it to submit with a postback, jQuery is somehow moving it or disassociating it from the form.

Is this possible? Or is there something else I may be missing? I can't seem to find any documentation that says either way. Thanks in advance!

How are you adding the div with the upload input in it. You may be putting it outside the .NET form. Try putting the input somewhere on the page and then just do $('div.withUpload').dialog(); — Emil Ivanov
– Emil Ivanov, Commented Nov 18, 2009 at 15:16
That's not the case, my masterpage contains the main form so everything within my main content placeholder is within the form. — jamesmillerio
– jamesmillerio, Commented Nov 18, 2009 at 17:32

gjfonte · Accepted Answer · 2015-10-15 16:33:40Z

3

You need to move the dialog to inside the form.

var dialog = $("#dialog").dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: {
    "Upload": function() {
      __doPostBack('uploadfile', '');
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $(this).dialog("close");
    }
  }
});

dialog.parent().appendTo($("form:first"));

answered Oct 15, 2015 at 16:33

gjfonte

4882 gold badges4 silver badges17 bronze badges

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

Comments

David Hedlund · Accepted Answer · 2009-11-18 14:44:19Z

2

You're right. Dialog moves its content outside of its form, and appends it to body. Probably to gain better control of the DOM, to make sure it always displays in the center, above everything else, and is not contained in some absolutely positioned DIV or so...

answered Nov 18, 2009 at 14:44

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

Josh Mein · Accepted Answer · 2009-12-22 21:43:02Z

0

What is occurring here is that the Block UI removes all click functionality on buttons within its modal. To get around this the best solution I have found is to have a hidden button which will then do the desired processing.

Here is an example:

HTML

<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" />
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" />

Javascript/Jquery

function UploadFiles()
{
    $.unblockUI({
        onUnblock: function() {
            $('[id$=btn_UploadClick]').click();
        }
     });
}

answered Dec 22, 2009 at 21:43

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

Collectives™ on Stack Overflow

File uploads not working within jQuery UI Dialog

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related