Post
Ask Question

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,

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.

  1. <ajaxToolkit:AsyncFileUpload OnUploadedComplete="AsyncFileUpload1_UploadedComplete"   
  2.    runat="server"   
  3.    ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"   
  4.    UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />   
  5. protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)   
  6. {   
  7.   
  8.    string fileNametoupload = Server.MapPath("~/Documents/") + e.FileName.ToString();  
  9.    AsyncFileUpload1.SaveAs(fileNametoupload);   
  10.   
  11. }   
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.
    1. protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
    2. {  
    3.     string fileNametoupload = Server.MapPath("~/Documents/") + e.FileName.ToString();  
    4.     AsyncFileUpload1.SaveAs(fileNametoupload);  
    5. }  


  • 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.
    1. protected void AsyncFileUpload1_UploadedFileError(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
    2. {  
    3.     lblmessage.Text = "SOme error Occured";  
    4.     lblmessage.ForeColor = System.Drawing.Color.Red;  
    5. }  

Properties

  • CompleteBackColor

    It is the background color when upload is complete, default color is Lime.
    1. CompleteBackColor="LimeGreen"  


  • ContentType

    It gets the content type of the file sent by the client.
    1. lblmessage.Text = AsyncFileUpload1.ContentType;  


  • ErrorBackColor

    It is the background color when upload fails, default color is Red.
    1. ErrorBackColor="Red"  


  • FileContent

    It can contain the stream of object which points to the uploaded file to read the contents of the file.
    1. Response.Write(AsyncFileUpload1.FileContent.Length);  


  • FileName

    It can get the file name which is uploaded through control.
    1. HttpContext.Current.Response.Write(AsyncFileUpload1.FileName);  


  • HasFile

    It gets a Boolean value --  either file has its own by a control or not.
    1. HttpContext.Current.Response.Write(AsyncFileUpload1.HasFile);  


  • OnClientUploadComplete

    Client side JavaScript function is called when a certain file has uploaded successfully.
    1. OnClientUploadComplete="uploadcomplete"   
    1. function uploadcomplete() {   
    2.   
    3.     alert("file uploaded successfully");   
    4.   
    5. }   


  • OnClientUploadError

    Client side JavaScript function is called when certain file upload failed.
    1. OnClientUploadError="uploaderror"  
    1. function uploaderror() {   
    2.   
    3.    alert("sonme error occured while uploading file!");   
    4.   
    5. }   


  • OnClientUploadStarted

    Client side JavaScript function is called when certain file upload has started.
    1. OnClientUploadStarted="uploadstarted"  
    1. function uploadstarted() {   
    2.   
    3.     alert("File Upload started");   
    4.   
    5. }   


  • PostedFile

    It Gets an HttpPostedFile object that provides access to the uploaded file. It also contains content length, type and filename information.
    1. 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.
    1. ThrobberID="myfuimage"   
    2.   
    3. <asp:Image ID="myfuimage" runat="server" ImageUrl="~/Images/ajax-loader-orange-transparent.gif" />   


  • UploaderStyle

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


    Modern



    Traditional



  • UploadingBackColor

    It is the control's background color when uploading is in progress. Default value - 'White'.
    1. UploadingBackColor="Yellow"  


  • Width

    The control's width (Unit). Default value - '355px'.
    1. Width="500px"  


    Methods

  • SaveAs(string filename)

    Saves the contents of an uploaded file to defined Folder.

    AsyncFileUpload1.SaveAs(fileNametoupload);


Similar Articles