Upload File With Asp .Net AsyncFileUpload Control Inside ModalPopupExtender

In this tutorial i will let you know how to Upload File With Asp .Net AsyncFileUpload Control Inside ModalPopupExtender.On my previous post i explain how to use modal popup extender.Here we placed AsyncFileUpload control in modal popup extender to achieve this.

AsyncFileUpload is an Ajax Control to upload file asynchronously. Click on browse/select file button and choose file location then the control will automatically upload the file to server.But here i have used OnUploadComplete event to save it in a user defined directory.

Design View:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.popup {
background-color: #ddd;
margin: 0px auto;
width: 450px;
position: relative;
border: Gray 2px inset;
}
.popup .content {
padding: 20px;
background-color: #ddd;
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="popup">
<p class="content">
<asp:AjaxFileUpload ID="AjaxFileUpload1" OnUploadComplete="UploadComplete" ThrobberID="loader" Width="400px" runat="server" />
<br />
<br />
<asp:Image ID="loader" runat="server" ImageUrl ="ajax-loading.gif" Style="display:None"/>
<asp:Button ID="ok" runat="server" Text="ok" />
</p>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="ok" PopupControlID="Panel2" TargetControlID="Panel1" runat="server"></asp:ModalPopupExtender>
</div>
</form>
</body>
</html>

Code View:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

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