In this article we will explore how to use AsyncFileUpload of ajaxcontroltoolkit and clear the content of asyncfileupload text box.

Let's see how we can do this.

Step 1: Register ajaxcontroltoolkit.

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

Step 2: Add AsyncFileUpload control in the aspx page.

<ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="UploadError" OnClientUploadComplete="UploadComplete" CompleteBackColor="White" UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="imgLoader" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" UploadingBackColor="LightSkyBlue"/>

<asp:Image ID="imgLoader" runat="server" src="loader.gif" />

OnClientUploadError - This javascript event triggers when there is error in uploading a file.

OnClientUploadComplete - This javascript event triggers when file upload is complete.

ThrobberID - It is used to show busy image while upload is in progresss.

OnUploadedComplete - This server side event is used to save the file.

Step 3: Now place below javascripts in the aspx page.

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

   function UploadError(sender, args) {
      alert(args.get_errorMessage());
   }

   function UploadComplete(sender, args) {
      alert("File Name: " + args.get_fileName());
      alert("File Path: " + args.get_path());
      alert("Length of file: " + args.get_length());
      alert("Content Type of file: " + args.get_contentType());

   //Clear the file name textbox

   var ctrlText = sender.get_element().getElementsByTagName("input");
   for (var i = 0; i < ctrlText.length; i++) {
      if (ctrlText[i].type == "text") {
         ctrlText[i].value = "";
         ctrlText[i].style.backgroundColor = "white";
      }
   }
}

</script>

get_fileName() -  This method returns the file name to be uploaded
get_path() - This method returns the fake path with correct file name
get_length() - This method returns the length of the file has been uploaded in bytes
get_contentType() - This method returns the mime type of file after it has been uploaded
get_errorMessage() - This method returns error message

Step 4: Add below method in the code behind file to save the file

Live Demo

This ends the article of uploading file using asyncfileupload control of ajaxcontroltoolkit.