AjaxFileUpload AsyncFileUpload In ModalPopUp Extender Asp.Net

This example shows how to use AjaxFileUpload Control Or AsyncFileUpload In ModalPopUp Extender Using C# VB Asp.Net.

Place ToolkitScriptManager and a button inside UpdatePanel on the page, we will open ModalPopup in click event of this button to upload files.

Create one panel on the page and add AjaxFileUpload or Ajax AsyncFileUpload in it.

HTML Source

---

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Button ID="btnUpload" runat="server" 

            Text="Upload File" onclick="btnUpload_Click"/>

<asp:ModalPopupExtender runat="server" 

                        ID="modelPopupExtender1" 

                        TargetControlID="btnUpload"

                        PopupControlID="popUpPanel" 

                        OkControlID="btOK" 

                        BackgroundCssClass="modalBackground">

</asp:ModalPopupExtender>

 <asp:Panel ID="popUpPanel" runat="server" CssClass="pnl">

 <div style="font-weight: bold; border: Solid 3px Aqua; 

                                background-color: AliceBlue">

 <asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 

                     OnUploadComplete="UploadComplete" 

                     OnClientUploadComplete="Success" 

                     ThrobberID="loader" Width="400px"/>

 <asp:Image ID="loader" runat="server" 

            ImageUrl ="~/loading.gif" 

            Style="display:None"/>

 </div><br /><br />

 <asp:Label ID="lblMessage" runat="server"/><br /><br />

 <asp:Button ID="btOK" runat="server" Text="OK" />

 <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" 

 OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

If you are using AsyncFileUpload Control then don't forget to set UploaderStyle property to Traditional, other wise it will throw invalid argument error.

<ajax:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 

                      UploadingBackColor="Blue" 

                      CompleteBackColor="WhiteSmoke"

                      OnUploadedComplete="SaveUploadedFile" 

                      OnClientUploadComplete="Success" 

                      OnClientUploadError="Error"

                      UploaderStyle="Traditional"/>

Add following Javascript and CSS in head section of page.

Write following code in OnUploadComplete event to save file on server.

protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {
        string path = Server.MapPath("~/Uploads/") + e.FileName;
        AjaxFileUpload1.SaveAs(path);
    }

Build and run the code.

Download Sample Code

Tweet

If you like this post than join us or share