ARTICLE

Using AsyncFileUpload Control in AJAX

Posted by Davin Martyn Articles | AJAX January 19, 2012
AsyncFileUpload is a new ASP.NET AJAX control that allows you to asynchronously upload files to a server.
Reader Level:

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With the help of AJAX we can develop web applications and retrieve a small amount of data from the web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

AsyncFileUpload Control

AsyncFileUpload is a new ASP.NET AJAX Control that allows you to asynchronously upload files to server. You don't need a separate upload button for this control. Add the AsyncFileUpload control and a label to the web form for the uploading and displaying of messages respectively. The file uploading results can be checked both in the server and client sides. You can save the uploaded file by calling the SaveAs() method in a handler for the server UploadedComplete event.

Property

  • OnClientUploadComplete
  • OnClientUploadError
  • UploaderStyle
  • CompleteBackColor
  • ThrobberID

Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite
dr1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open
dr2.gif

Step 3 : Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

  • Drag UpdatePanel, ScriptManager, Label

Define Script Function

Step 4 : Go to Default.aspx page[Source]option and  define the <script> function for the AsyncFileUpload and define upload complete function.

Code :

<script type = "text/javascript">
        function uploadComplete(sender) {
    $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully";
        }
        function uploadError(sender) {
            $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";
            }
</script>

Step 5 : Go to Default.aspx page[Design] option drag image control from Toolbox and define URL property.

<asp:Image ID="Image1" runat="server" ImageUrl="~/images......jpg" />

Step 6 : Go to Default.aspx[source]option and drag an AsyncFileUpload Control from the Toolbox and define the OnClientUploadComplete and OnClientUploadError event handlers.

f1.gif

Code :

<asp:AsyncFileUpload  ID="AsyncFileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"  runat="server" Width="400px" UploaderStyle="Modern" CompleteBackColor = "White" UploadingBackColor="#CCFFFF"  ThrobberID="Image1" OnUploadedComplete = "FileUploadComplete" BackColor="#54AB82" />

<ContentTemplate>

Step 7 : Go to Default.aspx page[Design] option and right-click on UpdatePanel.

  • Property-> ChildrenAsTrigger "True";
fr3.gif

Code :

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    <asp:AsyncFileUpload  ID="AsyncFileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"  runat="server" Width="400px" UploaderStyle="Modern" CompleteBackColor = "White" UploadingBackColor="#CCFFFF"  ThrobberID="Image1"
OnUploadedComplete = "FileUploadComplete" BackColor="#54AB82" />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images......jpg" />
    <br />
   <asp:Label ID="lblMesg" runat="server" BackColor="#CECACD"></asp:Label>
   </ContentTemplate>
   </asp:UpdatePanel
>


Step 8 : Go to Default.aspx.cs file option and write a code.

Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void FileUploadComplete(object sender, EventArgs e)
    {
        string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
        AsyncFileUpload1.SaveAs(Server.MapPath("raj") + filename);
    }
}

Step 9 : Go to Default.aspx page option and write a code.

Code :

<title> My Ajax APPLICATION</title>
    <script type = "text/javascript">
        function uploadComplete(sender) {
    $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully";
        }
        function uploadError(sender) {
            $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";}
            }
</script>
    </head>
    <body>
    <form id="form1" runat="server" style="background-color: #453A42">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <p style="background-color: #FF8080"> ASYNC FILE UPLOAD CONTROL IN AJAX</p>
    <br />
    <div style="background-color: #8C7384">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    <asp:AsyncFileUpload  ID="AsyncFileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"  runat="server" Width="400px" UploaderStyle="Modern" CompleteBackColor = "White" UploadingBackColor="#CCFFFF"  ThrobberID="Image1"
OnUploadedComplete = "FileUploadComplete" BackColor="#54AB82" />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images......jpg" />
    <br />
   <asp:Label ID="lblMesg" runat="server" BackColor="#CECACD"></asp:Label>
   </ContentTemplate>
   </asp:UpdatePanel>
   </div
>
</form>

Step 10 :  Now run the application by Pressing F5.

fr.gif
Step 11 : In order to display the loading animation, you will need to add an image control that will display animated GIF when the File Upload starts.

You need to specify the ID of the Image Control to the AsyncFileUpload Control using the
ThrobberID property.

fr1.gif

fr2.gif

Resource 

AJAX Rating Control

ASP.Net AJAX GridView Loading using C#

GridView Using Ajax ModalPopupExteder

Ajax tab control using CSS

Dynamically Populating a Control in AJAX Using ASP.NET

COMMENT USING
Employers - Post Free Jobs