Aurigma Image Uploader 6.1 Dual
View Modes
See Also

View modes allow users to browse their images in a familiar way. There are five view modes that are available for use while working with Image Uploader. Four of them can be used both in the folder pane and in the upload pane. They are:

- Thumbnails view
- Icons view
- List view
- Details view

These modes can be switched by the user from the pane context menu. The fifth mode, advanced details view, is different from the others. It is used for the upload pane only and cannot be selected from the context menu.

# Thumbnails

In this view, images are displayed as thumbnails, and other files are displayed as icons. It is the default view and usually the most convenient.

Figure 1. Thumbnails in the folder pane.

A file name and a description (if any) are displayed under each image. If image rotation is enabled, rotation handles appear, when the mouse pointer hovers over a thumbnail.

Use the following code to display files initially in this mode.

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Other params and event handlers

    //For the folder pane
    iu.addParam("FolderView", "Thumbnails");
    //For the upload pane
    iu.addParam("UploadView", "Thumbnails");

    //...Other params and event handlers

    iu.writeHtml();
    </script>

This mode is rather informative and friendly, but thumbnail generation markedly slows the process of folder scanning.

# Icons

In this view, all files are displayed as icons.

Figure 2. Icons in the folder pane.

It is one of the two tersest views of all available file information, only the name is displayed. But the advantage of this view is that more files can be seen at a time, and folder content is loaded faster into the pane.

Use the following code to display files initially in this mode.

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Other params and event handlers

    //For the folder pane
    iu.addParam("FolderView", "Icons");
    //For the upload pane
    iu.addParam("UploadView", "Icons");

    //...Other params and event handlers

    iu.writeHtml();
    </script>

# List

In this view, all the files are displayed as very small icons, listed in columns. This view is also rather concise like a previous one, it displays only file names.

Figure 3. A list in the folder pane.

The advantage of this view is that more files can be seen at a time, and folder content loads faster into the pane.

Use the following code to display files initially in this mode.

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Other params and event handlers

    //For the folder pane
    iu.addParam("FolderView", "List");
    //For the upload pane
    iu.addParam("UploadView", "List");

    //...Other params and event handlers

    iu.writeHtml();
    </script>

# Details

In this view, a table, in which each row corresponds to a file, is displayed. The table contains four columns:

- File name
- File size
- File type
- Last modification date

Figure 4. Details table in the folder pane.

This view shows more information about files, and it still takes little time to load folder content into the pane.

Use the following code to display files initially in this mode.

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Other params and event handlers

    //For the folder pane
    iu.addParam("FolderView", "Details");
    //For the upload pane
    iu.addParam("UploadView", "Details");

    //...Other params and event handlers

    iu.writeHtml();
    </script>

# Advanced Details

This view mode is unlike the previous four. There are several differences that contrast this mode with them:

1. It is used only in the upload pane.
2. It supports a background image which can be specified using the UploadPaneBackgroundImageFormat property.
3. It is not intended to be interchangeable with the other modes.
4. It cannot be selected from the context menu.

Figure 5. Advanced details table in the upload pane.

Figure 6. Advanced details table in the upload pane, while the upload is in progress.

At first sight, this view looks like the details view, but with thumbnails instead of icons. The actual difference goes further. During the upload a progress bar for each package will be displayed. If the FilesPerOnePackageCount property is `1` a progress bar will be displayed opposite the uploading item. Use the SilentMode property to hide a dialog with progress bar and make the control appearance similar to the screenshot above. The background colors of the corresponding rows will also change according to the upload state - pending, in progress, or error. This mode is best suitable if you want to upload files instantly when they were added to the upload pane.

Use the following code to display files in this mode and configure the instant upload.

JavaScript | Copy Code
--- | ---
    <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("UploadView", "AdvancedDetails");

    iu.addParam("FilesPerOnePackageCount", "1");

    iu.addParam("EnableInstantUpload", "true");

    iu.addParam("UploadPaneBackgroundImageFormat", "Url=BackgroundImage.jpg;Width=200;Height=200;Position=BottomRight");

    //...Other params and event handlers

    iu.writeHtml();
    </script>

# See Also

##### Samples

Concurrent Upload Sample

##### Reference

FolderView Property
UploadView Property

##### Manual

Layouts
Customizing Appearance
Adding a Custom Progress Bar