Mike Borozdin's Blog

A blog about programming, web and IT in general

Follow Me

Search

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© 2014 Mike Borozdin

AJAX File Upload in ASP.NET with the AsyncFileUpload Control

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 <img /> 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.

Kick it! Shout it

Tags: ,
Posted on Monday, October 12, 2009
Comments (4)
blog comments powered by Disqus