FileUpload inside jquery dialog, hasfile false

Question

I have a jquery UI dialog on my page. It contains nothing more than a single asp FileUpload control:

<asp:FileUpload runat="server" ID="fuAttachment" />

The dialog has 1 button "OK". Those button simply closes the dialog

$("#attachment-dialog").dialog({
            height: 300,
            width: 400,
            modal: true,
            resizable: false,
            autoOpen: false,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
  });

When pressing the save button on my page. Which is an asp.net button the method SaveAttachement is called.

The problem is that fuAttachment.HasFile (the fileupload control) keeps returning false. If I move the fileupload control outside of the jQuery UI dialog. HasFile = true.

But the control should be inside the dialog. There's no updatepanel inside the specific page.

Answer 1

The problem is happening because the dialog is outside of the form.

jQuery UI Dialog has an appendTo parameter that will ensure the dialog is part of the form.

$("#attachment-dialog").dialog({
            appendTo: "form",
            height: 300,
            width: 400,
            modal: true,
            resizable: false,
            autoOpen: false,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
  });