File Uploading Without Page Loading Asynchronously with AJAX Control Tool Kit in ASP.NET C#

It this article we will discuss about the file uploading without refreshing the page asynchronously in ASP.NET C#. For that we need the AJAX Control Toolkit. For that you have to download the AJAX Control Toolkit. I have previously shared an article on that. You can visit this here.

Before proceeding you need to get info about AsyncFileUpload.

Add the Register into the page first.

   1:  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

And then put the script manager into the page.

   1:  <asp:ScriptManager ID="sm1" runat="server" />

And now its time for the AsyncFileUpload .

   1:  <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" 

   2:          OnClientUploadError="uploadError" 

   3:          OnClientUploadStarted="StartUpload"

   4:          OnClientUploadComplete="UploadComplete"

   5:          CompleteBackColor="Lime" UploaderStyle="Modern" 

   6:          ErrorBackColor="Red" 

   7:          ThrobberID="Throbber" 

   8:          onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 

   9:          UploadingBackColor="#66CCFF" />

Put some additional controls for a better uploading experience.

   1:  <asp:Label ID="Throbber" runat="server" Style="display: none">

   2:              <img src="Images/indicator.gif" align="absmiddle" alt="loading" />

   3:          </asp:Label>

   4:          <br />

   5:          <br />

   6:          <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>

Go to Head section and add a script tag and put the following code there.

   1:  <script type="text/javascript" language="javascript">

   2:      

   3:          function uploadError(sender,args)

   4:          {

   5:            document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";

   6:          }

   7:          

   8:          function StartUpload(sender,args)

   9:          {

  10:              document.getElementById('lblStatus').innerText = 'Uploading Started.';

  11:          }

  12:          

  13:          function UploadComplete(sender,args)

  14:          {

  15:              var filename = args.get_fileName();

  16:              var contentType = args.get_contentType();

  17:              var text = "Size of "  + filename + " is " + args.get_length() + " bytes";

  18:              if (contentType.length > 0)

  19:              {

  20:                  text += " and content type is '" + contentType + "'.";

  21:              }

  22:              document.getElementById('lblStatus').innerText = text;

  23:          }

  24:      </script>

Now go to the code page in the cs file and add this method under Page_Load method.

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        if (AsyncFileUpload1.HasFile)
        {
            string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
            AsyncFileUpload1.SaveAs(strPath);
        }
        
    }

Now test your uploader and enjoy.

Download the full source code here.

Download Now