Using AsyncFileUpload Control in AJAX

Davin Martyn
12y
78.6k
0
0
100
Article

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

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

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

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.

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";

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.

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.