View Modes

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.

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

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

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

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

<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

Reference

• FolderView Property
• UploadView Property

Samples

• Concurrent Upload Sample

Manual

• Layouts
• Customizing Appearance
• Adding a Custom Progress Bar