Layouts
Image Uploader has three different-looking layouts that determine its appearance. To specify, which one of them should be used, set the PaneLayout property.
One Pane Layout
Consists of the upload list with drag-and-drop support. This list allows specifying one of the five view modes.
In one pane layout mode, Image Uploader displays a single panel, which represents a list of files selected for upload. The user can fill this list by dragging files and dropping them onto the panel.
This layout may be convenient in custom applications, which are written in languages, other than HTML.
Uploading Files
To upload files in this layout, follow these steps:
- Select files in one of the ways:
- Select necessary files in Windows Explorer, Finder, or any other graphic shell you use and drop them onto the Image Uploader upload pane.
- Click the Add Files button and select files in the standard Open File dialog.
- Click the Add Folders button and select folders in the standard Browse for Folder dialog.
- Repeat Step 1 until all the necessary files are added to the upload list.
- Click the Send button.
Setting One Pane Layout Mode
To set the one pane layout mode, use the PaneLayout property:
<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", "OnePane");
//...Other params and event handlers
iu.writeHtml();
</script>Customizing One Pane 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.
- Enable or disable single thumbnails.
- Change the pane background color.
- Change the text labels.
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.
Two Panes Layout
Consists of the folder tree and the folder content list. The folder content list allows specifying one of the four view modes.
Two panes mode is a classic layout which came from Aurigma Image Uploader 1.0 for ActiveX. Usage experience shows that it is the most friendly one 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.
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 selected files will be automatically checked. To check all files just click the Check All button.
- Click the Send button.
Setting Two Panes Layout Mode
To set the two panes layout mode, use the PaneLayout property:
<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.
Three Panes Layout
Consists of the folder tree, the folder content list, and the upload list with drag-and-drop support. The folder content list and the upload list allow specifying one of the view modes.
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.
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:
<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.