Aurigma Image Uploader 6.0 Dual
Customizing Pane Item Appearance
See Also

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

# See Also

##### Manual

Customizing Upload Pane
Changing Background Colors for Panes
Configuring Restriction Rules for Files

##### Reference

PaneItemCanBeUploaded Property
PaneItemDesign Property
FolderChange Event
PaneItemChecked Property
UploadFileCountChange Event