Friday, November 27, 2009

AsyncFileUpload Control - New Control in Ajax Control ToolKit

Ajax Control Toolkit is not new for every dotnet developer. A new version of the AJAX Control Toolkit is now available for download from the CodePlex website.


This new version of the AJAX Control Toolkit contains two new controls:

SeaDragon Java Script Code (SJC)
 - The SJC control allows you SeaDragon scripts are used to display an image, and to zoom in and out of that image using mouse button keys without resizing the window. I saw the demo and it's really cool control.



AsyncFileUpload - Finally, we have a control which uploads file asynchronously. This new control enables you to perform file uploads without doing a postback. The control displays a throbber image during upload and raises client and server events when the upload is complete. Check the live demo here.
In this article, we are going to take a look at AsyncFileUpload control.


Note: This control will only work with .NET 3.5 or higher version.

AsyncFileUpload Control Features

As we know, File Upload control of ASP.NET does not work with in update panel. If we want to place it in update panel, then also postback trigger is required to upload the file. This cool control allows you to upload the file in asynchronous manner. Below are few key points about this control:
  1. It works within the Update Panel.
  2. Uploads the file without any postback.
  3. Provides Client Side and Server side events.
  4. Different coloring options for showing file upload. As for example, it shows green color if upload is successful, otherwise it shows red if there is unsuccessful upload.
  5. You can show the loading image while file uploading is in progress.
But it also comes with certain disadvantages.
  1. When I was working with the control, once the file is uploaded there is no way to clear the content of file upload control.
  2. I went into the source code of this control and noticed that the control stores the file in Session. It never clears the session, which means every time to navigate back to the page it loads the last file uploaded into the text box.
  3. There is no way to cancel the upload.
  4. There is no way to monitor the progress (How much % is completed) of uploading.
  5. Uploading starts as soon as you select the file. It stores the files in the session.
Besides, these disadvantages control looks good.


Now let's go thru some of the properties of this control.

Properties and Methods

Some Available Properties
  1. CompleteBackColor : This Property set the background color of the control on successful upload. Default Value is "Lime".
  2. ErrorBackColor : This Property set the background color of the control on unsuccessful upload. Default Value is "Red".


  3. UploadingBackColor : This Property set the background color of the control when file uploading is in progress.
  4. UploaderStyle : There are two options available for styling of the control. Traditional and modern. Default is "Traditional".
  5. ThrobberID : ID of control that is shown while the file is uploading. It will be used to display the loading/in progress image.
  6. HasFile : Returns a bool value which indicates control has a file or not.
Available Events:
    1. OnClientUploadError : This is a client side event. If there is an unsuccessful upload then specified JavaScript function will be executed.

    2. OnClientUploadStarted : This is also a client side event. Specified JavaScript function will be called when the uploading start. This event will be called before uploading and once this function is executed, uploading will start.

    3. OnClientUploadComplete : This is also a client side event. If there is successful upload then specified JavaScript function will be executed.

    4. onuploadedcomplete : This is a server side event which will be executed once the uploading is complete. One thing to notice over here is, as soon as you select the file, uploading starts but it remains in session. It is not stored on any physical location. In this event, we can specify the path and save the file into physical location.Things will be clear once we go thru the code.
    Available Methods:
    1. SaveAs() : This method saves the file on specified path.

    Demo

    Let’s create a new website and add reference of newly downloaded AjaxControl ToolKit dll. On default.aspx page, Place a script manager and register the ajax control toolkit dll.
    Now let’s place the AsyncFileUpload control.

    <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server"
    OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload"
    OnClientUploadComplete="UploadComplete"
    CompleteBackColor="Lime" UploaderStyle="Modern"
    ErrorBackColor="Red" ThrobberID="Throbber"
    onuploadedcomplete="AsyncFileUpload1_UploadedComplete" UploadingBackColor="#66CCFF" />

    We can place this within update panel or outside the update panel. As you can see, I have set the most of the properties and events which I have already explained above. Let’s place the Throbber control to show in progress image. It is not compulsory to have ThrobberID. If it is set then it will display the content of the control.

    < asp:Label ID="Throbber" runat="server" Style="display: none">;
              <img src="Images/indicator.gif" align="absmiddle" alt="loading" />;
    </asp:Label>

    I have also placed a label on the page, which shows the status of the uploading. Value of this control get’s updated via Client Side function.

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

    Let’s place the JavaScript functions.

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

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

    function StartUpload(sender,args)
    {
        document.getElementById('lblStatus').innerText = 'Uploading Started.';
    }

    function UploadComplete(sender,args)
    {
      var filename = args.get_fileName();
      var contentType = args.get_contentType();
      var text = "Size of " + filename + " is " + args.get_length() + " bytes";
      if (contentType.length > 0)
      {
        text += " and content type is '" + contentType + "'.";
      }
      document.getElementById('lblStatus').innerText = text;
    }
    </script> 

    The UploadComplete function displayes the file name, it’s size and content type on the screen.
    Below is server side code of UploadedComplete event.

    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);
        }
    }
    That’s it. We are good to go now. Now just run the application.

    Conclusion

    This is a cool control which some good user experience but as stated above I cannot find a way to clear the content of the control even if you refresh the page. Another thing that is quite annoying is as soon as you select any file, it starts uploading. Another lacking feature is it does not show the progress in percentages. Despite, few disadvantages, I found this control pretty useful. Hope to see some enhancement in this tool.
    Enjoy..

    1 comment:

    Anonymous said...

    hi is there any way that you know how to save the image file path into db specific column ?

    back to top