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.
![]() |
---|
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
Figure 1. Application appearance of the ActiveX version.
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 the one of the Basic Demo Sample. See that topic for more information.
See Also
Samples
Samples by Platforms
Basic Demo Sample
Reference
SelectionChange Event
UploadFileSelected Property
UploadFileDescription Property
Thumbnail Class
Guid Property
QualityMeterFormats Property
ShowButtons Property
FileMask Property
MinImageWidth Property
MinImageHeight Property
AutoRecoverTimeOut Property
AutoRecoverMaxTriesCount Property
Manual
Customizing Upload Pane
Adjusting Quality Meter
Customizing Buttons
Restricting Files by Extensions and Types
Specifying Restrictions for Image Dimensions
Configuring Automatic Upload Recovery