This layout is a combination of the two others. It joins flexibility of the one pane layout and convenience of the two panes layout. The left pane contains the folder tree (like in two pane mode), the upper right pane displays files in the selected folder, and the lower right pane is the upload list (like in one pane mode). Unlike in the two panes mode, the user does not check necessary files. Files for upload should be dragged from the folder content pane onto the upload pane. They can also be dragged from other windows.
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.
- Select the necessary files.
- Add files to the upload list in one of the ways:
- Drag and drop the files onto the upload pane.
- Click Add to Upload List in the context menu of the folder pane.
- Click the Add or Add All button.
- If you want to upload files from other folders, repeat Steps 1–3.
- Click the Send button.
Setting Three Panes Layout Mode
To set the three 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", "ThreePanes"); //...Other params and event handlers iu.writeHtml(); </script> |
Customizing Three Panes Layout
You can customize this layout in the following ways:
- Select a view mode for files in the folder pane and in the upload pane.
- Show or hide the buttons 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 menus.
- Enable or disable single thumbnails.
- Change the width of the folder tree pane.
- Change the height of the folder content pane.
- Change the background color of the panes.
- Change the text labels.
- Detach the upload pane from the Image Uploader and put additional HTML between them. For more details, see the Customizing Upload Pane topic.
- Create a custom upload pane using the Thumbnail control. An example of such a panel can be found in the Multiple Descriptions Sample. For more details, see the Customizing Upload Pane topic.
Upload Order
In this mode, the sort order of images in the upload pane determines the upload order. The sort order can be set using the UploadPaneSortMode property during initialization of Image Uploader or in run-time. The user can change the sort order via the context menu or dragging images onto the pane.