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:

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.

Thumbnails view
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

<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.

Icons view
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

<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.

List view
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

<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

Details view
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

<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.

Advanced details view
Figure 5. Advanced details table in the upload pane.

Advanced details view
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

<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>