HTML5/Flash Uploader User Interface

Supported technologies: Adobe FlashHTML 5

This topic overviews HTML5/Flash Uploader user interface.


The control layout can be divided into three parts, namely Top Pane, Upload Pane, and Status Pane. These parts are highlighted in the following screenshot.

HTML5/Flash Uploader Layout

Let us consider these parts in detail.

Top Pane

This part displays a customizable title as well as links to add files to the upload list and clear it. This pane contains the Change view box on the right that allows users to switch between file display modes.

All the captions displayed on this pane can be modified via the properties of the TopPaneTopPane (ASP.NET)TopPane (PHP)topPane (JavaScript) class.

Upload Pane

This part represents the upload list. It allows browsing user-selected files using one of the available view modes. The order of files in the upload list determines the upload order. To re-arrange files added to the Upload Pane drag them onto the pane. This part can be customized through the properties of the UploadPaneUploadPane (ASP.NET)UploadPane (PHP)uploadPane (JavaScript) class.

Each file in Upload Pane can be provided with a description, rotated (for image files only), and removed from it. To perform these actions use the additional controls.

Status Pane

The information displayed on the Status Pane depends on HTML5/Flash Uploader state. Thus, when a user adds files to the upload list, Status Pane displays a total number of files in this list and looks like a screenshot above. If a user clicks Upload the upload starts and Status Pane indicates this process using progress bar and status information.

Status Pane

Information providing by this pane can be configured using the StatusPaneStatusPane (ASP.NET)StatusPane (PHP)statusPane (JavaScript) class properties.

When upload starts the Upload button is replaced with the Cancel which terminates the upload process. Both these buttons can be customized through the ImageUploaderFlashImageUploaderFlash (ASP.NET)ImageUploaderFlash (PHP)imageUploaderFlash (JavaScript) class.

View Modes

HTML5/Flash Uploader is intended for mass file upload, so it allows users to browse selected files. These files are displayed in the Upload Pane part of the control layout using one of the available view modes. There are three view modes, namely tiles, thumbnails, and icons. Users can change view mode with the Change view box located on the Top Pane. Moreover, you can set a default mode using the UploadPane.ViewModeViewMode (ASP.NET)ViewMode (PHP)viewMode (JavaScript) property.


This view is intended for displaying files of various types. Here each file appears as a thumbnail (or icon for non-image files), with a file name and details ('last modified' date, image dimensions, and file size) on the right. This is the most informative mode; however, it requires much space to display the user-selected file. Thus, the number of files displayed at a time is smaller than in other views.

Tiles View Mode


This mode is mostly used for browsing image files. It displays files as large thumbnails without any additional information. However, if users want to know a file name or size, they just need to move the mouse pointer over the thumbnail. This mode allows simultaneously to display more files than the previous one.

Thumbnails View Mode


This view is used to browse files of various types. It displays user-selected files as small icons with names on the right. The advantage of this view is that more files can be seen at a time.

Icons View Mode

Additional Controls

Additional controls appear when a mouse pointer hovers over thumbnails or icons. Using these controls a user can remove files from the upload list, rotate images, and add descriptions to files. The layout of additional controls depends on selected view mode.

Tiles Thumbnails Icons

The additional controls themselves can be customized using the properties of the PaneItemPaneItem (ASP.NET)PaneItem (PHP)paneItem (JavaScript) class.

Image Preview

Image Preview is an additional window which appears when a user double-clicks an image item in the Upload Pane regardless of selected view mode.

Image Preview

See Also