This documentation is for the old version. Go to the latest Upload Suite docs

Photo Order Sample

This demo is a simple photo print ordering application which allows users to select photos, choose print format, paper type, and a number of copies, and upload these photos with order information to the server.

Features

The application highlights the following features:

Working with the upload list items via JavaScript.
Use of the Thumbnail class.
Quality meter.
Appearance customization, including custom HTML buttons.
File filtering by extension and image dimensions.
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

Working With the Upload List Items via JavaScript

In this sample, additional information is displayed when the user selects images in the upload list. To display that kind of data, properties of currently selected items are accessed via JavaScript. And for that several ImageUploader class members are used:

The SelectionChange event is raised, when the user selects or deselects items in the upload list. The handler of this event displays additional information, such as a larger thumbnail and order details.
The UploadFileSelected property specifies if a certain file is in the selection.
The UploadFileDescription property determines the description of the selected files. In this demo the description keeps the order information such as number of prints, print format, and paper type.

In short, the algorithm is as follows:

Register a handler for the SelectionChange event.
Implement the handler that will go through all items in the upload list and display order details and thumbnails for selected items.

Another JavaScript function implemented in this demo is itemChange(). It is called when the user changes some order details. These details are written into the the UploadFileDescription property.

Thumbnail Class

The Thumbnail class is used here to display an additional thumbnail of the currently selected picture in the upload list. The Guid property of this class is used to link this thumbnails with an appropriate element of the upload list.

A more complex example of using this class can be found in the Customizing Upload Pane topic.

Quality Meter

The QualityMeterFormats property is used to set the print formats for which the information will be displayed. You can read more about this feature of Image Uploader in the Adjusting Quality Meter topic.

Appearance Customization

Photo Order sample, ActiveX
Figure 1. Application appearance of the ActiveX version.

Photo Order sample, Java
Figure 2. Application appearance of the Java version.

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.

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.

Other criteria for filtering may be image dimensions. In this demo, the MinImageWidth and MinImageHeight properties determine the minimal size of images to upload, though any combination of maximum and minimum allowed dimensions can be used. More information about dimensions restriction can be found in the Specifying Restrictions for Image Dimensions 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 completely equivalent to one of the Basic Demo Sample. See that topic for more information.