AJAX-enabled Sample
This demo application shows how to use Image Uploader within AJAX web interface. The application utilizes jQuery Tabs widget to switch between Image Uploader and gallery displaying uploaded files without reloading the page.
Features
The application highlights the following features:
- Displaying thumbnails in a two-pane layout.
- Uploading files with 120x120 thumbnails.
- Handling Image Uploader events to switch tabs.
- Saving and restoring upload list while switching tabs.
To find information about how this demo is implemented using a specific platform, see the Samples by Platforms topic.
Client-Side Code
Image Uploader Appearance
Image Uploader appearance and thumbnail settings are equal to the ones specified within the Basic Demo Sample.
Tabbed Interface
This sample application uses AJAX web interface composed of two tabs. The first tab contains Image Uploader itself, the second one displays uploaded images. The first tab is selected by default on the application startup, and it is switched to the second one when the upload completes.
Saving and Restoring Upload List
When the user switches tabs Image Uploader Java is reinitialized whenever it is hidden and then shown. It means that all the files selected for upload will be discarded during reinitialization. To avoid it the demo application saves the upload list content every time the gallery tab is selected and restore it whenever the Image Uploader tab is switched back. This functionality is implemented using the SaveUploadList() and LoadUploadList() methods. See the Using Image Uploader in AJAX Applications and Restoring Upload Pane Content topics for details.
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 one of the Basic Demo Sample.