[Solved] FileUpload not working inside Boostrap Modal Popup in ASP.Net

Hi IamAzhar,

Refer below sample.

HTML

<asp:ScriptManager runat="server" />
<center>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#LoginModal">
        Open Modal</button>
</center>
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle"
    aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="ModalTitle">
                    Upload</h4>
            </div>
            <div class="modal-body">
                <br />
                <div class="header b">
                    <b>
                        <img src="message.jpg" />
                        WritePost</b>&nbsp&nbsp<b><img src="picture.png" />
                            Add/Photo</b>&nbsp&nbsp<b><img src="file.png" />
                                Upload File</b>
                </div>
                <br />
                <asp:Panel ID="Panel2" runat="server">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:TextBox ID="txtpost" runat="server" TextMode="MultiLine" placeholder="Say Somthing about this..."
                                Rows="5" Width="100%" Height="100px" Style="resize: none"></asp:TextBox>
                            <br />
                            <p>
                                Select Image on your Computer(Max size 5MB)</p>
                            <br />
                            <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
                            <asp:Image ID="imgDisplay" Height="70" Width="70" runat="server" />
                            <asp:Button ID="btnpostUpload" CssClass="btn btn-primary pull-right" runat="server"
                                Text="Upload" Style="margin: 0.10em;" UseSubmitBehavior="false" OnClick="btnpostUpload_Click" />
                            <button id="btnUploadcancel" class="btn btn-primary pull-right" data-dismiss="modal"
                                aria-hidden="true" style="margin: 0.10em;">
                                Cancel</button>
                        </ContentTemplate>
                        <Triggers>
                            <asp:PostBackTrigger ControlID="btnpostUpload" />
                        </Triggers>
                    </asp:UpdatePanel>
                </asp:Panel>
                <br />
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
</div>

Namespaces

C#

using System.IO;

VB.Net

Imports System.IO

Code

C#

protected void btnpostUpload_Click(object sender, EventArgs e)
{
    string fileName = FileUpload1.PostedFile.FileName;
    FileUpload1.SaveAs(Server.MapPath("~/Files/" + Path.GetFileName(fileName)));
    imgDisplay.ImageUrl = "~/Files/" + Path.GetFileName(FileUpload1.FileName);
    ScriptManager.RegisterStartupScript(this, this.GetType(), "HidePopup", "$('#LoginModal').modal('show')", true);
}

VB.Net

Protected Sub btnpostUpload_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim fileName As String = FileUpload1.PostedFile.FileName
    FileUpload1.SaveAs(Server.MapPath("~/Files/" & Path.GetFileName(fileName)))
    imgDisplay.ImageUrl = "~/Files/" & Path.GetFileName(FileUpload1.FileName)
    ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "HidePopup", "$('#LoginModal').modal('show')", True)
End Sub

Screenshot