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 features comparison table.

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/Products/ImageUploader/FreeTrial.aspx 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.

Note

If your project is already based on a previous version of HTML5/Flash Uploader you can easily upgrade it to the latest one using the upgrading guidelines.

Features Comparison

Feature Flash Uploader HTML5 Uploader
Display thumbnails for photos * *
Resize images before upload (can send both original file and resized copies) * partially supported1)
Maintain EXIF *
Upload additional data along with files * *
Upload files of any type * *
Configurable look-and-feel * *
Multilingual support * *
Configurable file restrictions (type, size, dimensions) *
HTTPS support * *
Client-side requirements Flash player a browser with HTML5 support (see the table below)
Add photos for upload through the open file dialog * *
Drag-and-drop support *
Watermarking *

1) - HTML5 Uploader does not support the feature in Safari.

Supported Browsers

OS Browser HTML5 Uploader Flash Uploader
Windows Internet Explorer *
Mozilla Firefox since 6.0 *
Google Chrome since 13.0 *
Opera *
Mac OS Safari since 3.2 *
Mozilla Firefox since 6.0 *
Google Chrome since 13.0 *
Linux Mozilla Firefox since 6.0 *
Google Chrome since 13.0 *

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 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, 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 ASP.NET and Configuring 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.