I’m happy to announce the May 2012 release of the Ajax Control Toolkit. This newest release of the Ajax Control Toolkit includes a new file upload control which displays file upload progress. We’ve also added several significant enhancements to the existing HtmlEditorExtender control such as support for uploading images and
Source View.
You can download and start using the newest version of the Ajax Control Toolkit by entering the following command in the Library Package Manager console in Visual Studio:
Install-Package AjaxControlToolkit
Alternatively, you can download the latest version of the Ajax Control Toolkit from CodePlex:
http://AjaxControlToolkit.CodePlex.com
The New Ajax File Upload Control
The most requested new feature for the Ajax Control Toolkit (according to the CodePlex Issue Tracker) has been support for file upload with progress. We worked hard over the last few months to create an entirely new file upload control which displays upload progress.
Here is a sample which illustrates how you can use the new AjaxFileUpload control:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="01_FileUpload.aspx.cs" Inherits="WebApplication1._01_FileUpload" %>
<html>
<head runat="server">
<title>Simple File Upload</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager runat="server" />
<ajaxToolkit:AjaxFileUpload
id="ajaxUpload1"
OnUploadComplete="ajaxUpload1_OnUploadComplete"
runat="server" />
</div>
</form>
</body>
</html>
The page above includes a ToolkitScriptManager control. This control is required to use any of the controls in the Ajax Control Toolkit because this control is responsible for loading all of the scripts required by a control.
The page also contains an AjaxFileUpload control. The UploadComplete event is handled in the code-behind for the page:
namespace WebApplication1
{
public partial class _01_FileUpload : System.Web.UI.Page
{
protected void ajaxUpload1_OnUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
// Generate file path
string filePath = "~/Images/" + e.FileName;
// Save upload file to the file system
ajaxUpload1.SaveAs(MapPath(filePath));
}
}
}
The UploadComplete handler saves each uploaded file by calling the AjaxFileUpload control’s SaveAs() method with a full file path.
Here’s a video which illustrates the process of uploading a file:
Warning: in order to write to the Images folder on a production IIS server, you need Write permissions on the Images folder. You need to provide permissions for the IIS Application Pool account to write to the Images folder. To learn more, see:
http://learn.iis.net/page.aspx/624/application-pool-identities/
Showing File Upload Progress
The new AjaxFileUpload control takes advantage of HTML5 upload progress events (described in the XMLHttpRequest Level 2 standard). This standard is supported by Firefox 8+, Chrome 16+, Safari 5+, and Internet Explorer 10+. In other words, the standard is supported by the most recent versions of all browsers except for Internet Explorer which will support the standard with the release of Internet Explorer 10.
The AjaxFileUpload control works with all browsers, even browsers which do not support the new XMLHttpRequest Level 2 standard. If you use the AjaxFileUpload control with a downlevel browser – such as Internet Explorer 9 — then you get a simple throbber image during a file upload instead of a progress indicator.
Here’s how you specify a throbber image when declaring the AjaxFileUpload control:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="02_FileUpload.aspx.cs" Inherits="WebApplication1._02_FileUpload" %>
<html>
<head id="Head1" runat="server">
<title>File Upload with Throbber</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<ajaxToolkit:AjaxFileUpload
id="ajaxUpload1"
OnUploadComplete="ajaxUpload1_OnUploadComplete"
ThrobberID="MyThrobber"
runat="server" />
<asp:Image
id="MyThrobber"
ImageUrl="ajax-loader.gif"
Style="display:None"
runat="server" />
</div>
</form>
</body>
</html>
Notice that the page above includes an image with the Id MyThrobber. This image is displayed while files are being uploaded.
I use the website http://AjaxLoad.info to generate animated busy wait images.
Drag-And-Drop File Upload
If you are using an uplevel browser then you can drag-and-drop the files which you want to upload onto the AjaxFileUpload control. The following video illustrates how drag-and-drop works:
Remember that drag-and-drop will not work on Internet Explorer 9 or older.
Accepting Multiple Files
By default, the AjaxFileUpload control enables you to upload multiple files at a time. When you open the file dialog, use the CTRL or SHIFT key to select multiple files.
If you want to restrict the number of files that can be uploaded then use the MaximumNumberOfFiles property like this:
<ajaxToolkit:AjaxFileUpload
id="ajaxUpload1"
OnUploadComplete="ajaxUpload1_OnUploadComplete"
ThrobberID="throbber"
MaximumNumberOfFiles="1"
runat="server" />
In the code above, the maximum number of files which can be uploaded is restricted to a single file.
Restricting Uploaded File Types
You might want to allow only certain types of files to be uploaded. For example, you might want to accept only image uploads. In that case, you can use the AllowedFileTypes property to provide a list of allowed file types like this:
<ajaxToolkit:AjaxFileUpload
id="ajaxUpload1"
OnUploadComplete="ajaxUpload1_OnUploadComplete"
ThrobberID="throbber"
AllowedFileTypes="jpg,jpeg,gif,png"
runat="server" />
The code above prevents any files except jpeg, gif, and png files from being uploaded.
Enhancements to the HTMLEditorExtender
Over the past months, we spent a considerable amount of time making bug fixes and feature enhancements to the existing HtmlEditorExtender control. I want to focus on two of the most significant enhancements that we made to the control: support for
Source View and support for uploading images.
Adding
Source View Support to the HtmlEditorExtender
When you click the
Source View tag, the HtmlEditorExtender changes modes and displays the HTML
source of the contents contained in the TextBox being extended. You can use
Source View to make fine-grain changes to HTML before submitting the HTML to the server.
For reasons of backwards compatibility, the
Source View tab is disabled by default. To enable
Source View, you need to declare your HtmlEditorExtender with the DisplaySourceTab property like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="05_SourceView.aspx.cs" Inherits="WebApplication1._05_SourceView" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<title>HtmlEditorExtender with
Source View</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:TextBox
id="txtComments"
TextMode="MultiLine"
Columns="60"
Rows="10"
Runat="server" />
<ajaxToolkit:HtmlEditorExtender
id="HEE1"
TargetControlID="txtComments"
DisplaySourceTab="true"
runat="server" />
</div>
</form>
</body>
</html>
The page above includes a ToolkitScriptManager, TextBox, and HtmlEditorExtender control. The HtmlEditorExtender extends the TextBox so that it supports rich text editing.
Notice that the HtmlEditorExtender includes a DisplaySourceTab property. This property causes a button to appear at the bottom of the HtmlEditorExtender which enables you to switch to
Source View:
Note: when using the HtmlEditorExtender, we recommend that you set the DOCTYPE for the document. Otherwise, you can encounter weird formatting issues.
Accepting Image Uploads
We also enhanced the HtmlEditorExtender to support image uploads (another very highly requested feature at CodePlex). The following video illustrates the experience of adding an image to the editor:
Once again, for backwards compatibility reasons, support for image uploads is disabled by default. Here’s how you can declare the HtmlEditorExtender so that it supports image uploads:
<ajaxToolkit:HtmlEditorExtender
id="MyHtmlEditorExtender"
TargetControlID="txtComments"
OnImageUploadComplete="MyHtmlEditorExtender_ImageUploadComplete"
DisplaySourceTab="true"
runat="server" >
<Toolbar>
<ajaxToolkit:Bold />
<ajaxToolkit:Italic />
<ajaxToolkit:Underline />
<ajaxToolkit:InsertImage />
</Toolbar>
</ajaxToolkit:HtmlEditorExtender>
There are two things that you should notice about the code above. First, notice that an InsertImage toolbar button is added to the HtmlEditorExtender toolbar. This HtmlEditorExtender will render toolbar buttons for bold, italic, underline, and insert image.
Second, notice that the HtmlEditorExtender includes an event handler for the ImageUploadComplete event. The code for this event handler is below:
using System.Web.UI;
using AjaxControlToolkit;
namespace WebApplication1
{
public partial class _06_ImageUpload : System.Web.UI.Page
{
protected void MyHtmlEditorExtender_ImageUploadComplete(object sender, AjaxFileUploadEventArgs e)
{
// Generate file path
string filePath = "~/Images/" + e.FileName;
// Save uploaded file to the file system
var ajaxFileUpload = (AjaxFileUpload)sender;
ajaxFileUpload.SaveAs(MapPath(filePath));
// Update client with saved image path
e.PostedUrl = Page.ResolveUrl(filePath);
}
}
}
Within the ImageUploadComplete event handler, you need to do two things:
1) Save the uploaded image (for example, to the file system, a database, or Azure storage)
2) Provide the URL to the saved image so the image can be displayed within the HtmlEditorExtender
In the code above, the uploaded image is saved to the ~/Images folder. The path of the saved image is returned to the client by setting the AjaxFileUploadEventArgs PostedUrl property.
Not surprisingly, under the covers, the HtmlEditorExtender uses the AjaxFileUpload. You can get a direct reference to the AjaxFileUpload control used by an HtmlEditorExtender by using the following code:
void Page_Load()
{
var ajaxFileUpload = MyHtmlEditorExtender.AjaxFileUpload;
ajaxFileUpload.AllowedFileTypes = "jpg,jpeg";
}
The code above illustrates how you can restrict the types of images that can be uploaded to the HtmlEditorExtender. This code prevents anything but jpeg images from being uploaded.
Summary
This was the most difficult release of the Ajax Control Toolkit to date. We iterated through several designs for the AjaxFileUpload control – with each iteration, the goal was to make the AjaxFileUpload control easier for developers to use. My hope is that we were able to create a control which Web Forms developers will find very intuitive.
I want to thank the developers on the Superexpert.com team for their hard work on this release.
