This documentation is for the old version. Go to the latest Upload Suite docs

Adding View Mode Switch

Sometimes you may want to allow a user to switch between file view modes. Thumbnail view mode is usually the most convenient one, but it is the slowest way to display the folder content, that's why it would be preferable for a user to be able to switch to the detailed list view (or some other one), which works much faster.

It can be carried out in two ways. First of all, you can enable the right-click menu, which allows switching between various view modes (just set the ShowContextMenu property to true).

Another way is more obvious for the user - a separate drop-down list containing available options. It can be added through HTML. Image Uploader provides necessary functionality to implement such a list using HTML and JavaScript.

The idea is very simple. You add HTML element containing necessary view modes (<select>, <input type="radio">, or whatever), and change the FolderView property of Image Uploader at the onchange event.

Note

If you use a drop-down menu implemented via DHTML (without the SELECT element), you may encounter a problem with Z-order: if the drop-down menu overlaps with Image Uploader (or another ActiveX control), it will be drawn underneath this control. This happens because Internet Explorer always displays ActiveX controls as topmost elements. For this reason make sure that the drop-down menu has enough space to be expanded without overlapping with Image Uploader.

If you allow the user to switch between the view modes using not only the HTML control, but also the context menu of Image Uploader, you should also handle this situation. The SELECT element or other control you use should be updated if the user selects another view from the right-click menu. For that, the ViewChange event is exposed. It is raised when the view mode is changed. Just set a required value according to the FolderView property in the ViewChange event handler.

The code example is presented below. If you do not want to have any of the view modes, just remove an appropriate option.

JavaScript
<select id="selectView"
	onchange="getImageUploader('ImageUploader').setFolderView(this.options[this.selectedIndex].value);">
	<option value="0">Thumbnails</option>
	<option value="1">Icons</option>
	<option value="2">List</option>
	<option value="3">Details</option>
</select>

<br />
<br />

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
function ImageUploader_ViewChange(){
	document.getElementById("selectView").selectedIndex = getImageUploader("ImageUploader").getFolderView();
}

var iu = new ImageUploaderWriter("ImageUploader",750,500);

//...Any other params...

iu.addParam("Action", "Upload.aspx");

//...Any other event handler ...

iu.addEventListener("ViewChange", "ImageUploader_ViewChange");

//...

iu.writeHtml();
</script>

See Also

Reference