This demo application shows how to use Image Uploader with the ShellComboBox class to build user interface similar to the Open File dialog.

Features

The application highlights the following features:

  • Use of the auxiliary ShellComboBox control.
  • Appearance customization, including custom HTML buttons.
  • Folder upload.
  • File filtering by extension.
  • Automatic connection recovery.
Note

To find information about how this demo is implemented using a specific platform, see the Samples by Platforms topic.

Client-Side Code

ShellComboBox Control

The ShellComboBox class allows adding a dropdown menu with the folder tree, similar to the one in the Address Bar of Windows Explorer. You add this menu to the page using the ShellComboBoxWriter and bind it to the Image Uploader object using the ShellComboBox.ParentControlName property. Having this additional control, there is no need to display the tree pane, which duplicates the navigation functionality, so this pane is hidden using the TreePaneWidth property.

Appearance Customization

Open File Dialog sample, ActiveX
Figure 1. Application appearance of the ActiveX version.

Open File Dialog sample, Java
Figure 2. Application appearance of the Java version.

All the buttons seen in the user interface of this sample are custom. In order to replace standard buttons with custom HTML versions, the standard ones are hidden using the ShowButtons property. Then, appropriate Image Uploader methods are bound to the new buttons via their onclick handlers. For more details, see the Customizing Buttons topic.

Folder Upload

Image Uploader allows the user to mark whole folders for upload. To display folders in the folder content pane, set the ShowSubfolders property to true. To allow folder uploading, use the AllowFolderUpload property.

File Filtering

This application also demonstrates how to allow users to upload images only of certain types. Files of other types simply will not be shown while browsing. Extensions of the allowed files are listed as a value of the FileMask property. For more information, see the Restricting Files by Extensions and Types topic.

Automatic connection recovery

Conditions for automatic connection recovery are specified using the AutoRecoverTimeOut and AutoRecoverMaxTriesCount properties. For more details about connection recovery, see the Configuring Automatic Upload Recovery topic.

Server-Side Code

To complete the upload started by Image Uploader, some actions on the server side should be performed. The upload script of this application is almost equivalent to the one of the Basic Demo Sample. The only difference is that now images are sent in several batches, and, therefore, only POST fields with index 1 (such as SourceFile_1, FileName_1, etc.) are used.