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.
