HTML5/Flash Uploader Architecture

Supported technologies: Adobe Flash

What is HTML5/Flash Uploader?

HTML5/Flash Uploader is the solution intended to make mass file upload easier. It is simply embedded into HTML code of your web page and does not require end-user to download and install it manually. A modern appearance and intuitive user interface make HTML5/Flash Uploader attractive for end-users as well as clear for computer novices. Here is a common workflow to upload files with HTML5/Flash Uploader:

Users visit a page where HTML5/Flash Uploader resides and select as many files as they want via a standard Open File dialog.
When all the files are added, they click Upload.
HTML5/Flash Uploader prepares a HTTP POST request with user-selected files and additional data and sends it to the server page specified in its settings. This page receives and processes the request and performs any other upload-related actions.
Progress bar with estimated remaining upload time is shown during the upload process; users always know the upload time, and they can always stop the upload if it takes too long.

Additionally, HTML5/Flash Uploader is able to apply automatic client-side data optimization before sending it. For instance, it can resize images and compress files to ZIP archives (Flash only). This way the add-on reduces traffic, uploading time, and server disk amount used to store your data.

The figure below demonstrates HTML5/Flash Uploader architecture:

Let us consider its main parts in detail.

How Does It Work Client-Side?

On the client-side, HTML5/Flash Uploader consists of two parts which implement almost similar functionality:

Flash control (aurigma.imageuploaderflash.swf)
HTML5 control (aurigma.htmluploader.control.js)

Both parts implement a common functionality, namely, user interface for selecting and sorting files, pre-upload file processing, and sending files via HTTP POST request.

HTML5/Flash Uploader JavaScript loads the Flash control and provides an API for configuring HTML5/Flash Uploader and manipulating it at runtime, i.e. change properties, call methods, and handle events. HTML5/Flash Uploader JavaScript also helps to debug integration of the control with your web service by displaying notifications if some parameters have inconsistent values. These notifications can be disabled when you are ready to go live with your Web site. Find details in the Using HTML5/Flash Uploader at Runtime article.

How Does It Work Server-Side?

Since HTML5/Flash Uploader sends files and data in HTTP POST request, the server-side part is represented with a web server which hosts your application. This server performs all the upload-related tasks, such as receiving and saving uploaded files to necessary folders, updating a database, sending email notifications, and etc. In a word, this part implements the internal logic of your application which uses HTML5/Flash Uploader.

When developing this part you may implement your own upload script which will parse the POST request received from HTML5/Flash Uploader. In this case you can use any server platform which is able to receive HTTP POST request. Another way is to use HTML5/Flash Uploader ASP.NET or HTML5/Flash Uploader PHP. They both get the uploaded data, parse it, and provide a typed access to files and text fields on the server side. The built-in autosave feature allows you to create your upload solution without writing a line of code. Refer the Saving Uploaded Files in HTML5/Flash Uploader ASP.NET or Saving Uploaded Files in HTML5/Flash Uploader PHP topic depending on the platform you are going to use HTML5/Flash Uploader with.

HTML5/Flash Uploader ASP.NET

HTML5/Flash Uploader ASP.NET is set of ASP.NET server controls which allow to deploy and configure HTML5/Flash Uploader in Microsoft Visual Studio in design mode. Moreover, it significantly simplifies handling uploaded data and saves you the trouble of parsing POST request yourself. The Quick Start with HTML5/Flash Uploader ASP.NET topic gives outlook on how to use it in your web solution.

HTML5/Flash Uploader PHP

HTML5/Flash Uploader PHP implements almost the same functionality and offers the same advantages as HTML5/Flash Uploader ASP.NET. It allows PHP developers to work with HTML5/Flash Uploader in a usual way as with a common PHP object. Find detailed information in the Quick Start with HTML5/Flash Uploader PHP topic.