Layouts

Three Panes Layout

This is a default layout which consists of three panes:

• Tree pane is the folder tree allowing users to navigate their file systems.
• Folder pane displays the content of the currently selected folder.
• Upload pane contains files ready to be uploaded.

Both the tree and upload panes are collapsible.

Image Uploader displays this layout when the Uploader.PaneLayout property is ThreePanes.

<aur:Uploader ID="Uploader1" runat="server" 
    PaneLayout="ThreePanes" />

$uploader = new Uploader("Uploader1");
$uploader->setPaneLayout("ThreePanes");

var u = $au.uploader({
    id: 'Uploader1',
    paneLayout: 'ThreePanes'
});

Uploading Files

To upload files in this layout, follow these steps:

1. In the tree pane select a folder containing necessary files and/or folders.
2. In the folder pane check desired files and/or folders or drag-and-drop them onto the upload pane. To check all files at once use the Check all option of the context menu.
3. Select necessary files and/or folders in Windows Explorer, Finder, or any other graphic shell you use and drop them onto the upload pane.
4. Repeat Steps 1-3 until all the necessary files are added to the upload pane.
5. Click the Upload button.

One Pane Layout

The one pane layout is more minimalistic than a default one. Here Image Uploader displays only the upload pane representing a list of files selected for upload.

To specify this layout set the Uploader.PaneLayout property to the OnePane value:

<aur:Uploader ID="Uploader1" runat="server" 
    PaneLayout="OnePane" />   

$uploader = new Uploader("Uploader1");
$uploader->setPaneLayout("OnePane");

var u = $au.uploader({
    id: 'Uploader1',
    paneLayout: 'OnePane'
});

Uploading Files

1. Add files to the upload pane using the following ways:
   • Select necessary files and/or folders in Windows Explorer, Finder, or any other graphic shell you use and drop them onto the upload pane.
   • Call the uploadPane.addFiles() method and select files in the standard Open File dialog.
   • Call the uploadPane.addFolders() method and select a folder in the standard Open Folder dialog.
2. Repeat Step 1 until all the necessary files are added to the upload pane.
3. Click the Upload button.

See Also

Reference

• PaneLayout PropertyPaneLayout (ASP.NET)PaneLayout (PHP)paneLayout (JavaScript)

Manual

• View Modes
• Customizing Appearance