AjaxFileUpload AsyncFileUpload In ModalPopUp Extender Asp.Net

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.

01<script type="text/javascript">

02    function Success() {

03        document.getElementById("lblMessage").innerHTML = "File Uploaded";

04 

05    }

06 

07    function Error() {

08         document.getElementById("lblMessage").innerHTML = "Upload failed.";

09    }

10</script>

01<style>

02.modalBackground

03{

04 background-color: Gray;

05 filter: alpha(opacity=50);

06 opacity: 0.50;

07}

08.pnl{

09 background: #333;

10 padding: 10px;  

11 border: 2px solid #ddd;

12 float: left;

13 font-size: 1.2em;

14 color:White;

15 position: fixed;

16 top: 50%; left: 50%;

17 z-index: 99999;

18 box-shadow: 0px 0px 20px #999; /* CSS3 */

19        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */

20        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */

21 border-radius:3px 3px 3px 3px;

22        -moz-border-radius: 3px; /* Firefox */

23        -webkit-border-radius: 3px; /* Safari, Chrome */

24}

25.close {

26    DISPLAY: block;BACKGROUND: url(Images/close.png) no-repeat 0px 0px;

27    LEFT: -12px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;

28    TOP: -12px;HEIGHT: 26px;

29}  

30</style>

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

1protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)

2    {

3        string path = Server.MapPath("~/Uploads/") + e.FileName;

4        AjaxFileUpload1.SaveAs(path);

5    }