Tuesday, April 15, 2014

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.


0 comments:

Post a Comment

Follow by Email

Popular Posts

Pageviews