Finally, it has become possible to easily add AJAX file uploading capabilities to ASP.NET applications. The newly released version of the AJAX Control Toolkit ships with two new controls, one of them is called AsyncFileUpload control which was designed specially for the above mentioned purpose. It’s really great that a new version of AJAX Control Toolkit has arrived, because the project seemed to be dead, especially since ASP.NET MVC had taken its place on the stage and many developers switched to it and to jQuery which can also be used with ASP.NET WebForms.
Anyway, it is the time to introduce the control for asynchronous file uploading. First of all, you should download the newest version of the ACT, unpack it and add to the Visual Studio toolbox, or replace the previous versions controls. Actually, you can follow these installation instructions.
After installing the toolkit, just create a new web site, place a ScriptManager on a web page and eventually drop a AsyncFileUpload. Basically, here is a small code snippet asynchronous image uploading and immediate displaying it on the page.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function showUploadConfirmation() {
alert("Upload finished!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<div>
Just some time to make sure that the page doesn't get reloaded after
uploading: <%=DateTime.Now %><br />
<cc1:AsyncFileUpload
ID="AsyncFileUpload1"
runat="server"
UploadingBackColor="Yellow"
OnUploadedComplete="ProcessUpload"
OnClientUploadComplete="showUploadConfirmation"
ThrobberID="spanUploading"
/>
<span id="spanUploading" runat="server">Uploading...</span>
<br />
<img src="" id="imgUpload" alt="" />
</div>
</form>
</body>
</html>
There are a few points of interest in this piece of code. In this particular example I’m only using some of the AsyncFileUpload attributes.
OnUploadComplete – the name of a public code-behind method that is invoked after uploading is completeat
OnClientUploadComplete – as the name suggests it is the same thing but it’s for client-side, therefore it’s just a JavaScript function
ThrobberID – the ID of a control to display while uploading is in process, please note it can be either a WebForm control or an HTML one but with the necessary runat="server" attribute
UploadingBackColor – the background colour of the upload control during the uploading process
For the complete list of the control attributes, please use this reference page.
Also, please pay attention at the that is going to be used for immediate display of an uploaded image.
The code-behind code is also not difficult to use.
Default.aspx.cs
protected void ProcessUpload(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string fileName = Server.MapPath("./") + "image.jpg";
AsyncFileUpload1.SaveAs(fileName);
ScriptManager.RegisterClientScriptBlock(AsyncFileUpload1, AsyncFileUpload1.GetType(), "img",
"top.document.getElementById('imgUpload').src='image.jpg';",
true);
}
Here we just have the method used for handling the event. The main idea is not just to save a received file, but also to display an uploaded image immediately. For this purpose we have to use ScriptManager.RegisterClientScriptBlock() that basically injects a portion of JavaScript code into a page. It is also important to notice that we are using top.document.getElementById(), this is because the AsyncFileUpload is still making use of the iframe to make the asynchronous upload possible.
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way. My personal thoughts tend to change, hence the articles in this blog might not provide an accurate reflection of my present standpoint.
© Mike Borozdin