Before You Started with HTML5/Flash Uploader

Introducing HTML5/Flash Uploader

HTML5/Flash Uploader is a powerful upload component designed for Web 2.0 projects as well as image-oriented and upload-enabled solutions. It provides rich functionality which allows to solve a lot of specific tasks and makes it possible to meet requirements posed both for the upload workflow and the upload tool.

The most significant HTML5/Flash Uploader features are client-side image processing, including such actions as resizing, rotating, and watermarking. User-friendly upload is indicated with a progress bar. Moreover, there is a possibility to customize HTML5/Flash Uploader GUI elements as well as the uploaded data format. Some features supported in Flash Uploader are not supported in HTML5 Uploader and vice versa; for more information see the comparison.

Hence, if HTML5/Flash Uploader is the tool you need, let us describe it in a more detailed fashion. To begin with HTML5/Flash Uploader, you need to download Upload Suite SDK from http://www.aurigma.com/downloads/upload-suite location. Here the SDK is available in the following packages:

• UploadSuite.exe, Windows-only installer
• UploadSuiteNoSetup.zip, ZIP archive

The steps to install both packages are listed in the Installation and Deployment Notes topic.

The present article considers the process of embedding HTML5/Flash Uploader into a project. The main advantage of HTML5/Flash Uploader is that it is designed for the integration with both work-in-progress and completed projects.

HTML5 Uploader vs Flash Uploader Comparison

In general, both uploaders are interchangeable. They can display thumbnails for images and create resized copies of images before the uploading. They allow configuring file restrictions. They have configurable user interface.

What are the differences?

First of all, Flash Uploader is opened using a Flash plugin, while HTML5 Uploader does not require it. Although Flash plugin is just an additional obstacle for a user, it has its own benefits - it can work even on those browsers which are not advanced enough to load HTML5 Uploader (first of all, old IE, such as IE9 and older).

Some of HTML5 Uploader features are not available in Flash Uploader, including:

• Drag-and-drop support.
• Some extended JavaScript API that allows building a custom uploader user interface.
• Some additional watermarking options.
• Customizing the uploader appearence is more difficult in Flash.

Summarizing, it is a good idea to use both uploaders together. HTML5/Flash Uploader may automatically detect when it may use HTML5 Uploader and if it cannot, it will use Flash Uploader as a fallback option. However you should note, that if you are building some advanced features of the uploader, they may fail on a fallback version and keep it into an account.

Supported Browsers

Embedding HTML5/Flash Uploader into Project

Upload Suite SDK includes several tools intended to insert HTML5/Flash Uploader into a web page. Each tool has its own pros and cons; this allows you to choose the one which meets your requirements better. Carefully read descriptions of these tools below; it would help you to make the right decision.

HTML5/Flash Uploader ASP.NET

HTML5/Flash Uploader ASP.NET was developed especially for the ASP.NET server platform. It represents a set of ASP.NET server controls which allow to deploy and configure HTML5/Flash Uploader in Microsoft Visual Studio in design mode. Its another advantage is that it significantly simplifies handling uploaded data and saves you the trouble of parsing POST request yourself. This tool is intended most of all for ASP.NET developers; here it enables them to use HTML5/Flash Uploader in a straight-forward way just as the other ASP.NET server controls.

So, if you are going to use HTML5/Flash Uploader in an ASP.NET application, this tool is the best choice. See Quick Start with HTML5/Flash Uploader ASP.NET to get started.

HTML5/Flash Uploader PHP

This tool can be used with PHP platform only. HTML5/Flash Uploader PHP contains a collection of PHP classes intended for deploying and configuring HTML5/Flash Uploader as well as handling uploaded data. HTML5/Flash Uploader PHP has nearly the same functionality as HTML5/Flash Uploader ASP.NET.

Thus, HTML5/Flash Uploader PHP is the best solution for PHP applications. Read the Quick Start with HTML5/Flash Uploader PHP topic and see for yourself.

HTML5/Flash Uploader JavaScript

Contrary to the first two tools, this one is compatible with any HTTP-compliant server platform. It is a base for both HTML5/Flash Uploader ASP.NET and HTML5/Flash Uploader PHP. HTML5/Flash Uploader JavaScript is more complicated in comparison with the ones previously described; it requires configuring HTML5/Flash Uploader parameters manually and does not provide any facility for handling uploaded data. However, it is more flexible and can be used not only with ASP.NET or PHP. See the Quick Start with HTML5/Flash Uploader PHP topic for more information.

Evaluating HTML5/Flash Uploader

After you insert HTML5/Flash Uploader into a page, try to upload some files. Most likely, the upload process will not start and the following message will appear:

No valid license key for current DNS/IP address specified. If you see this message, please contact site administrator.

To get rid of this message and allow HTML5/Flash Uploader to upload files, you should register a license key. This key can be trial or full. Full keys are required for a production purpose and will be considered below.

Trial keys allow to evaluate HTML5/Flash Uploader on any domain during the 30-day period. Another limitation of the evaluation version is the trial message which is shown whenever you start the upload. You can find the detailed instructions on how to obtain and register trial license keys in the Registering HTML5/Flash Uploader topic.

Moreover, there are two alternative ways to evaluate HTML5/Flash Uploader. The first one is to use it on localhost domain where it always works as a full version. The second way is to register development keys which can be used for development purposes only. To obtain development keys just create support case and request them.

Integrating HTML5/Flash Uploader with Project

HTML5/Flash Uploader is designed to be easily integrated with the existing solution, including both look and feel and uploaded data format. It provides rich functionality to replace buttons by your images, customize colors, fonts and other appearance settings. See the Customizing Appearance in HTML5/Flash Uploader topic for details. As for the uploaded data, you can adapt the POST request format for comparability with your server-side API. Here you can add your custom fields as well as rename and remove default ones. Find the detailed information about this feature in the Uploading Additional Data Uploading Additional Data in HTML5/Flash Uploader ASP.NET Uploading Additional Data in HTML5/Flash Uploader PHP , and POST Field Reference topics.

Moving Project to Production Server

First of all, before moving HTML5/Flash Uploader-enabled project to your production server you need to obtain and register full license keys. These keys should be associated with the domain name or IP address of your server. Carefully read the Registering HTML5/Flash Uploader topic before purchase keys.

Secondly, you need to copy HTML5/Flash Uploader redistributable files along with your application code to the production server. Depending on the way you have embedded HTML5/Flash Uploader into your project you should use the following files:

• For HTML5/Flash Uploader ASP.NET use Aurigma.ImageUploaderFlash.dll file.
• For HTML5/Flash Uploader PHP use /ImageUploaderFlashPHP folder.
• For HTML5/Flash Uploader JavaScript use /Scripts folder.

Probably, you might need to configure your server a bit before publishing your solution. For instance, to grant read and write permissions for folders you are going to upload files to or set the limitation for maximum POST request length. Find details in the Configuring HTML5/Flash Uploader ASP.NET and Configuring HTML5/Flash Uploader PHP topics.

Troubleshooting

If you encounter a problem during installation, evaluation, or upload; try to find a solution in the knowledge base available in the Troubleshooting section. It contains information on how to resolve typical problems which may occur with HTML5/Flash Uploader.

If this information does not help and the problem still occurs, feel free to create a support case and report us about it.

See Also

Manual

• Changes in HTML5/Flash Uploader ASP.NET API between Versions 1 and 8
• Changes in HTML5/Flash Uploader PHP API between Versions 1 and 8
• Changes in HTML5/Flash Uploader JavaScript API between Versions 1 and 8
• Quick Start with HTML5/Flash Uploader ASP.NET
• Quick Start with HTML5/Flash Uploader PHP
• Quick Start with HTML5/Flash Uploader JavaScript