Upload Files Using Ajax AsyncFileUploader In ASP.Net with C#
Upload Files Using Ajax AsyncFileUploader:
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 use of AsyncFileUpload
control step-by-step.
AsyncFileUpload Control in asp.net:
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";
}
}
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.
Comments
Post a Comment