Quick Start with HTML5/Flash Uploader ASP.NET

Adding Control to Page

To add HTML5/Flash Uploader ASP.NET into a web page just walk through the following steps:

1. Create new ASP.NET Web site (in Visual Studio 2008 menu File -> New -> Web Site...).

   

2. Add HTML5/Flash Uploader ASP.NET to the toolbox:

   • Right-click on the tab of toolbox where you want to add this control and select Choose Items....
   • Find the ImageUploaderFlash in the .NET Framework Components tab.
   • If you cannot find this component, click Browse... and find the Aurigma.ImageUploaderFlash.dll assembly. This DLL can be found in HTML5/Flash Uploader installation folder (typically this is C:\Program Files\Aurigma\Upload Suite 8.5.81\HTML5-Flash\).
   • Click OK on both Open and Choose Toolbox Items dialogs.

   

3. Open the page where HTML5/Flash Uploader should be placed in the design mode, then drag and drop the ImageUploaderFlash item into the desired position.

   

4. Set this page as a start page. To do this, right-click this page (default.aspx) in Solution Explorer and select the Set As Start Page menu option.

Adding UploaderModule to Application

You should add the UploaderModule module to a web application in order to make the application working properly with HTML5/Flash Uploader. To do it, depending on the IIS version and mode you should add the following element to web.config file:

<add name="UploaderModule" type="Aurigma.ImageUploaderFlash.UploaderModule"/>

either to the <httpModules> (IIS6 and IIS7 in classic mode) or <modules> (IIS7 in integrated mode) section. As a result the web.config file will look as follows:

<configuration>
   <!-- other sections -->
   <system.web>
        <!-- other sections -->
	<!-- IIS6 or IIS7 in Classic mode -->
        <httpModules>
            <!-- other modules -->
            <add name="UploaderModule" type="Aurigma.ImageUploaderFlash.UploaderModule"/>
        </httpModules>
        <!-- other sections -->
   </system.web>
   <!-- other sections -->
   <system.webServer>
        <!-- other sections -->
	<!-- IIS7 in Integrated mode --> 
	<!-- 	Remove <httpModules> and uncomment this section 
		if you use Integrated mode instead of Classic. 
		You can check the pipeline mode in the 
		Application Pool basic settings.

		Alternatively, you can add this param (not recommended): 
		<validation validateIntegratedModeConfiguration="false"/>

        <modules>
            <add name="UploaderModule" type="Aurigma.ImageUploaderFlash.UploaderModule"/>
        </modules>
	-->
        <!-- other sections -->
   </system.webServer>
   <!-- other sections -->
</configuration>

Defining Uploader Type

By default, HTML5/Flash Uploader has HTML5 Uploader enabled. If a user opens a page in a HTML5-compliant browser (see the supported browsers table), HTML5 Uploader is displyed. Otherwise Flash Uploader comes up. You can change this behavior by defining upload technology in your application (you will need this customization if you plan to use one the features which are not supported by HTML5 Uploader). Use the Type property to perform this. The property possible values are "html|flash" (default value), "flash|html", "html", and "flash".

The following snippet configures HTML5/Flash Uploader to use the Flash control by default, and the HTML5 control if the client browser does not support flash:

<aur:ImageUploaderFlash ID="Uploader1" runat="server" 
        Type="flash|html">
</aur:ImageUploaderFlash>

Uploading Files

Let us examine HTML5/Flash Uploader ASP.NET usage by the example of a simple file catalog. Suppose that the catalog requires a user to upload files of various types and displays links to download these files. To perform this task we can phase it as follows.

Configuring Control

There are two ways to configure HTML5/Flash Uploader. The first is to use the list of control properties in Properties editor. See the HTML5/Flash Uploader ASP.NET Reference for the detailed information about available properties.

The second way is to modify ImageUploaderFlash properties in the source of an ASP.NET page declaratively. See the source code of the main page of our catalog (default.aspx) below.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Aurigma.ImageUploaderFlash" namespace="Aurigma.ImageUploaderFlash" tagprefix="aur" %>

<!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>ASP.NET Control Sample</title>
</head>
<body>
    <form id="form1" runat="server">
        <aur:ImageUploaderFlash ID="Uploader1" runat="server" 
                Height="480px" Width="650px" 
                AutoSave="true"
                DestinationFolder="~/Catalog"
                LicenseKey="XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX">
            <UploadSettings RedirectUrl="catalog.aspx" />
            <Converters>
                <aur:Converter Mode="*.*=SourceFile" />
            </Converters>
        </aur:ImageUploaderFlash>
    </form>
</body>
</html>

On this page we set mandatory parameters, such as HTML5/Flash Uploader identifier and its dimensions, as well as optional parameters required by our file catalog. Here we enable the autosave feature and set a page to which the user will be redirected when the upload successfully completes. To configure HTML5/Flash Uploader to send original files we use the ImageUploaderFlash.Converters property which accepts a set of Converter instances. Each instance specifies what will be uploaded (original file as is, thumbnail created from original image file, icon associated with original file, or original file compressed into ZIP archive) for each of the user-selected files. Since we need to upload only original files, we set one converter with the SourceFile mode. Read more about converters in the Configuring Files to be Uploaded in HTML5/Flash Uploader topic.

One more significant property is ImageUploaderFlash.LicenseKey which specifies trial or full license key. If license key is not set HTML5/Flash Uploader will not send files (the exception is usage of uploader on localhost domain). See the Registering HTML5/Flash Uploader topic for details.

Handling Upload

This sample demonstrates how to configure the autosave feature of HTML5/Flash Uploader ASP.NET. This feature saves you the trouble of writing server-side upload script yourself. All you need is to set the AutoSave property to true. Then specify the folder where you want to save files via the DestinationFolder property. The code snippet above demonstrates how these properties can be specified. Now all the files sent by HTML5/Flash Uploader will be saved to this folder.

Displaying Uploaded Files

On the configuring step we set the UploadSettings.RedirectUrl property to the "catalog.aspx" value. It means that HTML5/Flash Uploader will redirect users to this page after the upload is successfully completed. It would be convenient to list links to the uploaded files here. To implement this functionality we iterate through all the files stored in the /Catalog folder and display a link to each of them. See the source code below.

catalog.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Catalog.aspx.cs" Inherits="Catalog" %>

<!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>Catalog</title>
</head>
<body>
    <asp:DataList ID="DataList1" Width="100%" RepeatLayout="Table" RepeatDirection="Vertical"
        RepeatColumns="1" runat="server">
        <HeaderTemplate></HeaderTemplate>
        <ItemTemplate>
            <a href="<%# catalogPath + System.IO.Path.GetFileName(Container.DataItem.ToString()) %>" target="_blank">
               <%# System.IO.Path.GetFileName(Container.DataItem.ToString()) %>
            </a>
        </ItemTemplate>
        <FooterTemplate></FooterTemplate>
    </asp:DataList>
</body>
</html>

catalog.aspx.cs:

using System;

public partial class Catalog : System.Web.UI.Page
{
    protected string catalogPath;

    protected void Page_Load(object sender, EventArgs e)
    {
        catalogPath = "Catalog/";
        DataList1.DataSource = System.IO.Directory.GetFiles(Server.MapPath(catalogPath));
        DataList1.DataBind();
    }
}

/bin
	Aurigma.ImageUploaderFlash.dll
/Catalog
catalog.aspx
catalog.aspx.cs
default.aspx
		

Make sure that the /Catalog folder has enough permissions to save files to.

Uploading Images

One more example of HTML5/Flash Uploader usage is an image gallery. Suppose, it requires a user to upload original images along with their downsized copies. This task can be divided into the same phases as the previous one.

Configuring Control

The configuration of the HTML5/Flash Uploader ASP.NET used for our image gallery is almost the same as for the file catalog described above.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Aurigma.ImageUploaderFlash" namespace="Aurigma.ImageUploaderFlash" tagprefix="aur" %>

<!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>ASP.NET Control Sample</title>
</head>
<body>
    <form id="form1" runat="server">
        <aur:ImageUploaderFlash ID="Uploader1" runat="server" 
                Height="480px" Width="650px" 
                AutoSave="true"
                DestinationFolder="~/Gallery"
                LicenseKey="XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX">
            <UploadSettings RedirectUrl="gallery.aspx" />
            <Converters>
                <aur:Converter Mode="*.*=SourceFile" />
                <aur:Converter Mode="*.*=Thumbnail" 
                               ThumbnailHeight="120" 
                               ThumbnailWidth="120" 
                               ThumbnailFitMode="Fit" />
            </Converters>
        </aur:ImageUploaderFlash>
    </form>
</body>
</html>

The difference is that we set an additional converter to specify a thumbnail which will be created for each image file and will be fitted to 120x120 pixels. Read more about converters in the Configuring Files to be Uploaded in HTML5/Flash Uploader topic.

Handling Upload

The gallery uses the autosave feature as well as the file catalog. So it releases you from necessary to handle the upload by yourself.

Pay attention that the names of files stored in the destination folder are not equal to the original filenames. Each name has a suffix corresponding to the converter used to create this file (except for the SourceFile one). In our sample we set two converters, that is why there are two files stored for each user-selected file:

• name.ext, the original file specified with the first converter
• name.ext_Thumbnail1.jpg, a downsized copy of the original image configured with the second converter

See the ConvertedFile.Name property description for a full list of possible suffixes.

Displaying Uploaded Images

On the configuring step we specified the UploadSettings.RedirectUrl property to the "gallery.aspx" value. It means that HTML5/Flash Uploader will redirect users to this page after the upload is successfully completed. It would be convenient to display uploaded images here. To implement this functionality we iterate through all the files stored in the destination folder and display each thumbnail (file with _Thumbnail1 suffix) as a link to its original image (no suffix). See comments in the source code below.

gallery.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gallery.aspx.cs" Inherits="Gallery" %>
<%@ Import Namespace="System.Collections.Generic" %>

<!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 id="Head1" runat="server">
    <title>Gallery</title>
</head>
<body>
    <asp:DataList ID="DataList1" Width="100%" RepeatLayout="Table" RepeatDirection="Vertical"
        RepeatColumns="4" runat="server">
        <HeaderTemplate></HeaderTemplate>
        <ItemTemplate>
            <a href="<%# galleryPath + ((KeyValuePair<string, string>)Container.DataItem).Key %>" target="_blank">
                <img src="<%# galleryPath + ((KeyValuePair<string, string>)Container.DataItem).Value %>" />
            </a>
        </ItemTemplate>
        <FooterTemplate></FooterTemplate>
    </asp:DataList>
</body>
</html>

gallery.aspx.cs:

using System;

public partial class Gallery : System.Web.UI.Page
{
    protected string galleryPath;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        galleryPath = "Gallery/";
        System.IO.DirectoryInfo dir = new System.IO.DirectoryInfo(Server.MapPath(galleryPath));
        //A key-value pair collection. Key - name of the original file, value - thumbnail filename
        System.Collections.Generic.Dictionary<string, string> files = 
            new System.Collections.Generic.Dictionary<string, string>();

        //Iterate through all files
        foreach (System.IO.FileInfo file in dir.GetFiles())
        {
            int pos = file.Name.IndexOf("_Thumbnail1");
            //The file is not a thumbnail, so it is a source file
            if (pos == -1)
            {
                //Construct name of the corresponded thumbnail
                string thumbnailName = file.Name + "_Thumbnail1.jpg";
                //Check if this thumbnail exists
                if (System.IO.File.Exists(dir.FullName + thumbnailName))
                {
                    files.Add(file.Name, thumbnailName);
                }
            }
        }

        DataList1.DataSource = files;
        DataList1.DataBind();
    }

/bin
	Aurigma.ImageUploaderFlash.dll
/Gallery
default.aspx
gallery.aspx
gallery.aspx.cs
		

Make sure that /Gallery folder has enough permissions to save files to.

See Also

Reference

• HTML5/Flash Uploader ASP.NET Reference
• ImageUploaderFlash Class

Manual

• Configuring Files to be Uploaded in HTML5/Flash Uploader
• Configuring Common Upload Settings in HTML5/Flash Uploader
• Registering HTML5/Flash Uploader
• Installation and Deployment Notes
• Saving Uploaded Files in HTML5/Flash Uploader ASP.NET

MSDN

• Walkthrough: Creating and Registering a Custom HTTP Module