This demo shows how to create a custom upload pane using the Thumbnail control and how to upload additional information along with each file.
The application highlights the following features:
To find information about how this demo is implemented using a specific platform, see the Samples by Platforms topic.
Figure 1. Application appearance of the ActiveX version.
Figure 2. Application appearance of the Java version.
The main goal of this sample is to demonstrate how to create a custom upload pane. To add such a pane to your page, do the following:
-1. This way the folder pane becomes the height of the tree pane.
For more information about creating custom upload panes, see the Customizing Upload Pane topic.
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.
In short, the following algorithm is used to create a custom upload pane:
GUIDs are used to access items in the upload list. But using them to search items directly would make the application work too slow. Instead, a hash table is used to map GUIDs and indices in the upload list. This way the search operation becomes extremely fast.
The Thumbnail class is used here to display thumbnails of images in the upload list. The Guid property of this class is used to link each thumbnail with an appropriate element of the upload list. And the ParentControlName property links the thumbnail with the main Image Uploader control.
You can read more about the Thumbnail class usage in the Customizing Upload Pane topic.
In this sample, descriptions are sent as built-in
Description_N POST fields, and titles are sent as
additional POST fields. The BeforeUpload event handler is
used to set both these fields:
There are other ways to send extra data using Image Uploader, and they are described in the Uploading Additional Data with Files topic.
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. The only
difference is that now additional form data are sent along with images, and, therefore, additional POST
fields are parsed (in this case, only the