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.

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.

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