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

Customizing Pane Item Appearance

Sometimes it may be convenient to set up different appearances for different pane items, for example, depending on their state. Image Uploader provides a convenient API to accomplish this task.

Changing Appearance Based on Restrictions

Fig. 1. An item that cannnot be uploaded is highlighted

The Configuring Restriction Rules for Files section describes how one can specify different restrictions for files to upload, for example, you can allow uploading of images only of specific dimensions and so on. This is very convenient. However, when items that do not satisfy upload conditions are displayed, their appearance almost does not differ from the appearance of the "good" items. Here visual difference can help to make the functional difference between the items more obvious.

Note

This customization makes sense only for the two-pane or three-pane layout modes, as the user simply cannot add to the upload pane the files that cannot be uploaded.

Say, for example, you want to highlight with red the items that do not satisfy upload conditions. To do that you will need to check each item in the folder pane to know, if they satisfy your restrictions (using the PaneItemCanBeUploaded property), and if they do not, you will need to change their appearance with the PaneItemDesign property. Here is how you can write such a function.

JavaScript

function UpdateItemAppearance() {

	//Replace ImageUploader1 with the identifier of Image Uploader on your page
	var imageUploader = getImageUploader("ImageUploader1");
	
	var cnt = imageUploader.getPaneItemCount("FolderPane");
	
	//Iterate through all items on the folder pane
	for (var i = 1; i <= cnt; i++) {
	
		//Check if the item satisfies your upload restrictions
		if (imageUploader.getPaneItemCanBeUploaded(i) == false) {
		
			//If it does not, highlight it with red
			imageUploader.setPaneItemDesign("FolderPane", i, "ForegroundColor=red;" +
			"ForegroundOpacity=30;BorderLineStyleLeft=Dot;BorderLineStyleRight=Dot;" +
			"BorderLineStyleTop=Dot;BorderLineStyleBottom=Dot;BorderLineColorLeft=red;" +
			"BorderLineColorRight=red;BorderLineColorTop=red;BorderLineColorBottom=red");
		}
	}
}

Then, add this function as event handler for two events: page load and folder change (FolderChange).

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
function UpdateItemAppearance() {
	//...Body of this function is skipped for brevity...
}

var iu = new ImageUploaderWriter("ImageUploader1", 650, 400);

//...Other params...

//Set restrictions
iu.addParam("MaxFileSize", "1024");

//Add event handlers
iu.fullPageLoadListenerName="UpdateItemAppearance";
iu.addEventListener("FolderChange", "UpdateItemAppearance");

iu.writeHtml();
</script>

Changing Appearance Based on State

Fig. 2. An item that is going to be uploaded is highlighted

There is another example of highlighting items: you can highlight only those that are already checked for upload or added to the upload pane. To do that you will need to check each item in the folder pane, of they are selected for upload (using the PaneItemChecked property), and if they are, change their appearance. Here is a function that does it.

JavaScript

function UpdateCheckedItemAppearance() {

	//Replace ImageUploader1 with the identifier of Image Uploader on your page
	var imageUploader = getImageUploader("ImageUploader1");
	
	var cnt = imageUploader.getPaneItemCount("FolderPane");
	
	//Iterate through all items on the folder pane
	for (var i = 1; i <= cnt; i++) {
	
		//Check if the item is going to be uploaded
		if (imageUploader.getPaneItemChecked(i) == false) {
		
			//If it, highlight it with green
			imageUploader.setPaneItemDesign("FolderPane", i, "ForegroundColor=green;" +
			"ForegroundOpacity=30;BorderLineStyleLeft=Solid;BorderLineStyleRight=Solid;" +
			"BorderLineStyleTop=Solid;BorderLineStyleBottom=Solid;BorderLineColorLeft=green;" +
			"BorderLineColorRight=green;BorderLineColorTop=green;BorderLineColorBottom=green");
		}
	}
}

Then, add this function as event handler for the UploadFileCountChange event, as it is raised each time the user adds another item for upload.

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
function UpdateCheckedItemAppearance() {
	//...Body of this function is skipped for brevity...
}

var iu = new ImageUploaderWriter("ImageUploader1", 650, 400);

//...Other params...

//Add event handler
iu.addEventListener("UploadFileCountChange", "UpdateCheckedItemAppearance");

iu.writeHtml();
</script>

Customizing Pane Item Appearance

Changing Appearance Based on Restrictions

Changing Appearance Based on State

See Also

Reference

Manual