AJAX Control Toolkit Tutorial: AsyncFileUpload - Part Seven

Asynchronous file upload control lets you upload files asynchronously. You can check the uploaded files both at client and server side.

There are many useful properties introduced in asynchronous file upload control like Complete back color, error back color, file content, filename, OnClientUploadComplete and lot more.

You can learn more in my previous parts here,

• AJAX Control Toolkit Tutorial: Introduction - Part One
• AJAX Control Toolkit Tutorial: Accordion - Part Two
• AJAX Control Toolkit Tutorial: AjaxFileUpload - Part Three
• AJAX Control Toolkit Tutorial: AlwaysVisibleControl- Part Four
• AJAX Control Toolkit Tutorial: AnimationExtender- Part Five
• AJAX Control Toolkit Tutorial: AreaChart - Part Six

Here is the list of useful properties.

• It can upload a file without any postback.
• It can show file upload or error status in the form of back color, green if upload is successful, otherwise red.
• It has a built in client and server event and properties for better control.
• You can also customize the control to show progress in the form of some spinner image.

We will discuss each property with examples for better understanding later in this article.

As an initial approach we will now place the code of async file upload control and check its output.

<ajaxToolkit:AsyncFileUpload OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
   runat="server"
   ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
   UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{

   string fileNametoupload = Server.MapPath("~/Documents/") + e.FileName.ToString();
   AsyncFileUpload1.SaveAs(fileNametoupload);

}

Output



Let’s see in detail about properties, events and methods of the control.

Events

 

• Upload Complete
  
  It is a server side event and called when file is successfully uploaded to the server. It shows a green color to show it uploaded to the server.
  

  protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
  {
      string fileNametoupload = Server.MapPath("~/Documents/") + e.FileName.ToString();
      AsyncFileUpload1.SaveAs(fileNametoupload);
  }

  
  
  
• UploadedFileError
  
  It isa server side event and called when the file is not successfully uploaded to the server and generated an error. It shows a Red color to show it did not upload to the server.
  

  protected void AsyncFileUpload1_UploadedFileError(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
  {
      lblmessage.Text = "SOme error Occured";
      lblmessage.ForeColor = System.Drawing.Color.Red;
  }

Properties

• CompleteBackColor
  
  It is the background color when upload is complete, default color is Lime.
  

  CompleteBackColor="LimeGreen"

  
  
  
• ContentType
  
  It gets the content type of the file sent by the client.
  

  lblmessage.Text = AsyncFileUpload1.ContentType;

  
  
  
• ErrorBackColor
  
  It is the background color when upload fails, default color is Red.
  

  ErrorBackColor="Red"

  
  
  
• FileContent
  
  It can contain the stream of object which points to the uploaded file to read the contents of the file.
  

  Response.Write(AsyncFileUpload1.FileContent.Length);

  
  
  
• FileName
  
  It can get the file name which is uploaded through control.
  

  HttpContext.Current.Response.Write(AsyncFileUpload1.FileName);

  
  
  
• HasFile
  
  It gets a Boolean value --  either file has its own by a control or not.
  

  HttpContext.Current.Response.Write(AsyncFileUpload1.HasFile);

  
  
  
• OnClientUploadComplete
  
  Client side JavaScript function is called when a certain file has uploaded successfully.
  

  OnClientUploadComplete="uploadcomplete"

  function uploadcomplete() {
  
      alert("file uploaded successfully");
  
  }

  
  
  
• OnClientUploadError
  
  Client side JavaScript function is called when certain file upload failed.
  

  OnClientUploadError="uploaderror"

  function uploaderror() {
  
     alert("sonme error occured while uploading file!");
  
  }

  
  
  
• OnClientUploadStarted
  
  Client side JavaScript function is called when certain file upload has started.
  

  OnClientUploadStarted="uploadstarted"

  function uploadstarted() {
  
      alert("File Upload started");
  
  }

  
  
  
• PostedFile
  
  It Gets an HttpPostedFile object that provides access to the uploaded file. It also contains content length, type and filename information.
  

  HttpContext.Current.Response.Write(AsyncFileUpload1.PostedFile);

  
  
  
• ThrobberID
  
  It is the ID of control that is shown while the file is uploading. Like image spinner while uploading.
  

  ThrobberID="myfuimage"
  
  <asp:Image ID="myfuimage" runat="server" ImageUrl="~/Images/ajax-loader-orange-transparent.gif" />

  
  
  
• UploaderStyle
  
  The control's appearance style (Traditional, Modern). Default value - 'Traditional'.
  

  UploaderStyle="Modern"

  
  
  Modern
  
  
  
  Traditional
  
  
  
  
• UploadingBackColor
  
  It is the control's background color when uploading is in progress. Default value - 'White'.
  

  UploadingBackColor="Yellow"

  
  
  
• Width
  
  The control's width (Unit). Default value - '355px'.
  

  Width="500px"

  
  
  Methods
  
  
• SaveAs(string filename)
  
  Saves the contents of an uploaded file to defined Folder.
  
  AsyncFileUpload1.SaveAs(fileNametoupload);