Two panes mode is a classic layout which came from Aurigma Image Uploader 1.0 for ActiveX. Usage experience shows that it is the friendliest to computer novices. In this mode, on the left side one see the folder tree and on the right side—the content of the selected folder. The user simply needs to check all files they want to upload and click the Send button.
![]() |
---|
The only shortcoming of this layout is that when the user navigates to another folder, the checked files become unchecked, so the files can be uploaded only from one folder at a time. |
Here is how Image Uploader looks in different operating systems when working in this mode.
Figure 1. Windows
Figure 2. Mac OS X
Figure 3. Linux
Uploading Files
To upload files in this layout, follow these steps:
- In the tree pane select the folder where necessary files are located.
- To check a single file, click the checkbox on the thumbnail of this file. To check multiple files, select the necessary files with the mouse and click the checkbox on one of the highlighted thumbnails. All other the selected files will be automatically checked.
- Click the Send button.
Setting Two Panes Layout Mode
To set the two panes layout mode, use the PaneLayout property:
JavaScript | ![]() |
---|---|
<script type="text/javascript" src="iuembed.js"></script> <script type="text/javascript"> var iu = new ImageUploaderWriter("ImageUploader", 710, 500); //...Other params and event handlers iu.addParam("PaneLayout", "TwoPanes"); //...Other params and event handlers iu.writeHtml(); </script> |
Customizing Two Panes Layout
You can customize this layout in the following ways:
- Select a view mode for files in the upload pane.
- Show or hide the buttons on the top or create custom buttons.
- Show or hide the controls on thumbnails that allow thumbnail rotation and so on or create custom controls.
- Customize appearance of single thumbnails—specify their background and foreground colors, borders.
- Enable or disable the context menu in the upload pane.
- Enable or disable single thumbnails.
- Change the width of the folder tree pane.
- Change the background color of the panes.
- Change the text labels.