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 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 last drawn image will be used. You may specify absolute URLs to images as well as relative.
![]() |
---|
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
Refresh Method
Send Method
Stop Method
SelectAll Method
DeselectAll Method
ButtonAddAllToUploadListImageFormat Property
ButtonAddFilesImageFormat Property
ButtonAddFoldersImageFormat Property
ButtonAddToUploadListImageFormat Property
ButtonAdvancedDetailsCancelImageFormat Property
ButtonDeleteFilesImageFormat Property
ButtonDeselectAllImageFormat Property
ButtonPasteImageFormat Property
ButtonRemoveAllFromUploadListImageFormat Property
ButtonRemoveFromUploadListImageFormat Property
ButtonSelectAllImageFormat Property
ButtonSendImageFormat Property
ButtonStopImageFormat Property
RemoveIconImageFormat Property
RotateIconClockwiseImageFormat Property
RotateIconCounterclockwiseImageFormat Property
CacheGuiGraphics Property
GuiGraphicsVersion Property