Uploading Files Using Ajax AsyncFileUploader In ASP.Net

Vithal Wadje
9y
37.2k
0
3

Article

Background

In ASP.NET FileUploader is a very lengthy process to upload files asynchronously because we need to write many lines of code. Using the Ajax AsyncFileUpload control however we can upload files asynchronously without much code. So let us learn about the AsyncFileUpload control step-by-step.

AsyncFileUpload Control

AsyncFileUpload is an ASP.Net Ajax control that allows you to asynchronously upload files to the server. The file uploading results can be checked both in the server and client sides.

The following are some of the common properties of the ASP.Net Ajax asyncFileUpload control:

FileBytes: Gets an array of the bytes in a file.

FileContent: Gets a System.IO.Stream object that points to a file to upload.

FileName: Gets the name of a file on a client to upload.

HasFile: Gets a value indicating whether the control contains a file.

PostedFile: Gets the underlying System.Web.HttpPostedFile object for a file.
CompleteBackColor : Control's background color on upload complete.
ErrorBackColor: Control's background color on on error.

UploadingBackColor: Control's background color on uploading file.

PersistFile : Decides whether the files persist or not with true and false properties according to the PersistedStoredType.
PersistedStoreType : Decides where to persist a file such as session or other.

The following are the methods of the ASP.Net File Upload control:

ClearAllFilesFromPersistedStore.

ClearAllFilesFromPersistedStore.

ClearFileFromPersistedStore.

CreateChildControls.

CreateControlStyle.

DescribeComponent .

GenerateHtmlInputFileControl.

GenerateHtmlInputHiddenControl.

GetBytesFromStream.

OnPreRender.

OnUploadedComplete.

OnUploadedFileError.

SaveAs.

Now let us see the preceding explanation by creating a sample web application as follows:

"Start" - "All Programs" - "Microsoft Visual Studio 2010".
"File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).
Provide the web site a name such as "UsingAsyncFileuploader" or another as you wish and specify the location.
Then right-click on the Solution Explorer and select "Add New Item" and Add Web Form.
Drag and drop one Button, a Label and a UsingAsyncFileuploader control onto the <form> section of the Default.aspx page from the Ajax Control Toolkit.
Drag and drop scriptManager.

Now the default.aspx page source code will looks as follows.

<%@ 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 id="Head1" runat="server">
<title>Article by Vithal Wadje</title>
</head>
<body bgcolor="grey">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<br />
<div style="color: white">
<table>
<tr>
<td>
Select Files
</td>
<td>
<asp:AsyncFileUpload Width="280px" ID="AsyncFileUpload1" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</td>
</tr>
</table>
</div>
<asp:Label ID="Label1" runat="server" ForeColor="LawnGreen" Text=" "></asp:Label>
</form>
</body>
</html>

Create the folder in Solution Explorer by right-clicking to save the uploaded files as in the following:

Write the following code for the Upload button click event to upload and save files on the server folder as in the following:

protected void btnUpload_Click(object sender, EventArgs e)
{
if(AsyncFileUpload1.HasFile)
{
String getFileName = Path.GetFileName(AsyncFileUpload1.FileName);
AsyncFileUpload1.SaveAs(Server.MapPath("~/UploadedFiles/"+getFileName));
Label1.Text = "File Uploaded Successfull";
}
}

The entire code of the default.aspx.cs page will look as follows:

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 btnUpload_Click(object sender, EventArgs e)
{
if(AsyncFileUpload1.HasFile)
{
String getFileName = Path.GetFileName(AsyncFileUpload1.FileName);
AsyncFileUpload1.SaveAs(Server.MapPath("~/UploadedFiles/"+getFileName));
Label1.Text = "File Uploaded Successfull";
}
}
}

Now run the application. The UI will look such as follows:

Now click on the Browse Button and select file as in the following:

Now click on the Upload button. The following message is shown as I have set to a label control as in the following:

Now refresh the folder we created to save the files to, it will look such as follows:

Now you have seen how to upload files using the ASP.Net Ajax AsyncFileUploader.

Notes

Do a proper validation such as if it has a file or not of the File Upload control when implementing.
For more details and explanation, download the Uploaded Zip file.
Download Ajax Control toolkit.

Summary

From all the preceding examples you have learned how to upload files using the ASP.Net Ajax AsyncFileUploader. I hope this article is useful for all readers, if you have a suggestion then please contact me.

Up Next

Ebook Download

View all

Diving into Knockout.JS

Read by 1.7k people

Download Now!

Learn

View all