New FileUpload Control Into New Release of Ajax Or Async Fileupload Control

Ajax Control Toolkit is not novice for asp.net developers. 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:

1. SeaDragon Java Script Code (SJC) – The SJC control allows SeaDragon scripts to be 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 a really cool control.
2. 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 the AsyncFileUpload control.
This control will only work with .NET 3.5 or higher version.

Features of Async Fileupload Control
1. It works within the Update Panel
2. It uploads the file without any postback
3. It provides Client Side and Server side events
4. There are 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.
Drawbacks or Shortcomings of Async FileUpload Control
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.
Some Available Properties
1) CompleteBackColor: This property sets the background color of the control on successful upload. Default Value is “Blue”.
2) ErrorBackColor: This property sets the background color of the control on unsuccessful upload. Default Value is “Red”.
3) UploadingBackColor: This property sets 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 whether control has a file or not.
Available Events
1) OnClientUploadError: This is a client side event. If there is an unsuccessful upload, then the specified JavaScript function will be executed.
2) OnClientUploadStarted: This is also a client side event. The specified JavaScript function will be called when the uploading starts. 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 a successful upload, then the 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 through the code.

5) SaveAs(): This method saves the file on a specified path.

Let’s create a new website and add a reference of a newly downloaded AjaxControl ToolKit DLL. On default.aspx page, place a script manager and register the Ajax control toolkit DLL
Step 1 Source of Default.aspx Page is Below Given

Demo : AsyncFileUpload Control

function uploadError(sender,args)
{
document.getElementById(‘lblStatus’).innerText = args.get_fileName(), “” + args.get_errorMessage() + ““;
}

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;
}

loading

Step 2: Into Code Behind File of Default.apsx page
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);
}

}
Hope this will be useful for u and In Future this control will be enhanced and i will share with u it’s features.
Enjoy and Happy in programming World!!!

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s