1. Image Uploader 6.5 Dual
  2. Using Image Uploader
  3. Customizing Image Uploader
This documentation is for the old version. Go to the latest Upload Suite docs

Customizing Buttons

There are several ways of changing Image Uploader appearance for better integration with your site design. One of them is to change buttons: you may create custom command buttons or simply change the appearance of standard buttons.

Adding Custom HTML Buttons

To create a custom command button you should hide default buttons using the ShowButtons property and create your own buttons in HTML (for example, using the IMG element). After this, add the onclick event handler for each custom button and call the appropriate method of Image Uploader. Here is a short sample how to do it:

JavaScript
<img src="Images/SelectAll.gif" onclick="getImageUploader('ImageUploader').SelectAll();" />
<img src="Images/DeselectAll.gif" onclick="getImageUploader('ImageUploader').DeselectAll();" />
<img src="Images/Upload.gif" onclick="getImageUploader('ImageUploader').Send();" />
<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 610, 500);

//...Any other params...

iu.addParam("ShowButtons", "false");

//...

iu.writeHtml();
</script>

When no images are selected for upload, it makes sense to disable the Send button. To check if Image Uploader has anything to send, use the property named UploadFileCount in the event UploadFileCountChange. If UploadFileCount is 0, you should disable the button, otherwise - enable it.

Replacing Standard Image Uploader Buttons with Images

In Image Uploader, you may also replace its standard button images with your own. To do that you only need to initialize the appropriate properties with suitable values. Here's an example of how to replace a full set of buttons for OnePane layout provided that the appropriate images are in the same directory as the page:

JavaScript
<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 610, 500);

//...Other params...

iu.addParam("ButtonAddFilesImageFormat",
	"Width=20;Height=20;UrlNormal=files1.gif;UrlPressed=files2.gif;UrlDisabled=files3.gif");
iu.addParam("ButtonAddFoldersImageFormat",
	"Width=20;Height=20;UrlNormal=folders1.gif;UrlPressed=folders2.gif;UrlDisabled=folders3.gif");
iu.addParam("ButtonSendImageFormat",
	"Width=20;Height=20;UrlNormal=send1.gif;UrlPressed=send2.gif;UrlDisabled=send3.gif");
iu.addParam("ButtonStopImageFormat",
	"Width=20;Height=20;UrlNormal=stop1.gif;UrlPressed=stop2.gif;UrlDisabled=stop3.gif");

//...Other params...

iu.writeHtml();

</script>

As you may have noticed, an initialization string has the following general syntax:

variable1=value1;variable2=value2;...

This string is case insenitive, and of all the variables only Width and Height are necessary. If either of them is omitted, standard buttons will be displayed. If both of them are present and no images are provided, no button will be displayed. If images are provided, they will be resized to the specified dimensions when necessary.

In any given moment every button may be in one of six predefined states, and there is an appropriate variable corresponding to each of the states:

Variable State
UrlNormal The button is not pressed, not hovered over, and not in focus
UrlNormalFocused The button is in focus
UrlHover The button is hovered over
UrlHoverFocused The button is hovered over and in focus
UrlPressed The button is pressed
UrlDisabled The button is disabled

It is recommended to specify images for all states, though for some states they may be omitted. In this case the last drawn image will be used. You may specify absolute URLs to images as well as relative ones.

Note

Besides standard buttons you can also customize icons that appear on thumbnails and allow manipulating these thumbnails: rotate, preview, and so on. Properties that specify such icons have names ending in IconImageFormat.

An important difference between the icons and the buttons is that the former have only three states: UrlNormal, UrlHover, and UrlPressed.

Keep in mind that every time the user visits the page with Image Uploader, button images will be re-downloaded. To avoid this, enable caching of GUI controls using the CacheGuiGraphics property. If its value is set to true, button images will be stored in browser file cache.

Also, do not forget to maintain proper version of custom images via the GuiGraphicsVersion property. When you change these images, increase this value so that Image Uploader automatically updated the cache. Otherwise, users will have to clear the cache manually.

See Also

Reference