Tuesday, April 16, 2013

Async File Upload control example in C# asp.net to upload files to server using Ajax

==>> In this post  I explain how to use Ajax AsyncFileUpload  file upload in C# Asp .Net and showing  progress bar  when file uploading and confirmation message of Success and Fail

 AsyncFileUpload Control Features:-- 

   1  AsyncFileUpload works within the Update Panel
   2  AsyncFileUpload  uploads the file without any postback
   3  AsyncFileUpload  provides Client Side and Server side events
   4  There are different coloring options for showing file upload. As for example, it shows green   color if upload is successful, otherwise it shows red if there is unsuccessful upload.
   5  You can show the loading image while file uploading is in progress.

First you need install AJAX ,create a website add a folder name 'Store'  After that you need add AjaxControlToolkit reference to your website  add the line in your aspx page that given below...... 

   

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>




1.  ASPX PAGE CODE:-



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>***Ajax Files Uploader Sample***</title>

    <script type="text/javascript">

        function uploadSuccess() {
            document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "Your File Uploaded Successfully";
        }

        function uploadFail() {
            document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "Your File upload Failed.";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="scriptManager1" runat="server" />
    <div>
        <ajax:AsyncFileUpload ID="AjaxSamplefileUpload" OnClientUploadComplete="uploadSuccess"
            OnClientUploadError="uploadFail" CompleteBackColor="White" Width="350px" runat="server"
            UploaderStyle="Modern" UploadingBackColor="#CCFFFF" ThrobberID="imgLoading" OnUploadedComplete="fileUploadSuccess" />
        <br />
        <asp:Image ID="imgLoading" runat="server" ImageUrl="loading.gif" />
        <br />
        <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>


AsyncFileUpload Events, Properties and Methods  :-


Events

  • UploadedComplete :- Fired on the server side when the file successfully uploaded.
  • UploadedFileError :- Fired on the server side when the uloaded file is corrupted.
 Properties

  • CompleteBackColor:- The control's background color on upload complete. Default value - 'Lime'.
  • ContentType :- Gets the MIME content type of a file sent by a client.
  • ErrorBackColor :- The control's background color on upload error. Default value - 'Red'.
  • FileContent :- Gets a Stream object that points to an uploaded file to prepare for reading the contents of the file.
  • FileName :- Gets the name of a file on a client to upload using the control. 
  • HasFile :- Gets a bool value indicating whether the control contains a file.
  • OnClientUploadComplete :- The name of a javascript function executed in the client-side after the file successfully uploaded
  • OnClientUploadError :- The name of a javascript function executed in the client-side if the file uploading failed.
  • OnClientUploadStarted :-The name of a javascript function executed in the client-side on the file uploading started.
  • ThrobberID :- ID of control that is shown while the file is uploading. 
  • UploaderStyle :- The control's appearance 2 style Traditional and Modern. Default value - 'Traditional'.
Methods

  • SaveAs(string filename) - Saves the contents of an uploaded file. 



2. ASPX.CS PAGE CODE:-   




using System;
using System.Threading;
using System.Web.UI;
using AjaxControlToolkit;

public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void fileUploadSuccess(object sender, AsyncFileUploadEventArgs e)
    {
        Thread.Sleep(1000);
        string FileName = System.IO.Path.GetFileName(AjaxSamplefileUpload.FileName);
        AjaxSamplefileUpload.SaveAs(Server.MapPath("Store/") + FileName);
    }
}



Download sample code 

2 comments: