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: 
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).
  3. Provide the web site a name such as "UsingAsyncFileuploader" or another as you wish and specify the location.
  4. Then right-click on the Solution Explorer and select "Add New Item" and Add Web Form.
  5. 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.
  6. 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.

Other Asp.net Related Post:



Comments

Post a Comment