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 Appearance

By default, Image Uploader has the appearance of a standard Windows control. But sometimes you may want to customize its appearance to integrate it with your page design more closely. Besides, you can display your custom buttons, or even make your own progress bar. This topic outlines what you will need to achieve this.

In this topic:

Image Uploader Appearance Settings

The figures below demonstrate what elements of Image Uploader can be changed and what properties are responsible for the changes. If you click the property name, you will get to the reference description of this property.

Note

Appearance customization parameters take effect only if the UseSystemColors property is false.

Two Panes Layout

The following screenshot shows Image Uploader with the two panes layout. In this mode, you can change the settings of the tree pane and the folder pane. To customize the tree pane (on the left), you may change its width and background color. To customize the folder pane, you may specify:

  • Its background color.
  • Whether to show the buttons on the top and a context menu.
  • What text and in what color to display where needed.
ButtonUncheckAllText Property ButtonCheckAllImageFormat Property ButtonCheckAllText Property ButtonUncheckAllImageFormat Property ButtonStopImageFormat Property ButtonSendImageFormat Property ButtonSelectAllImageFormat Property ButtonDeselectAllImageFormat Property EditDescriptionTextColor Property EditDescriptionText Property DescriptionEditorButtonCancelText Property DescriptionEditorButtonOkText Property TreePaneWidth Property ShowDescriptions Property ShowButtons Property ButtonSelectAllText Property ButtonStopText Property ButtonDeselectAllText Property ButtonSendText Property BackgroundColor Property

Three Panes Layout

The screenshot below shows Image Uploader with the three panes layout. When using this layout, for the folder pane, you may specify its height in addition to the settings mentioned above. To customize the upload pane (on the bottom), you may specify:

  • Its background color.
  • The image displayed when no files are selected for the upload.
  • Whether to show the buttons on the top and a context menu.
  • What text and in what color to display where needed.
PaneBackgroundColor Property TreePaneBorderStyle Property TreePaneBackgroundColor Property PaneBackgroundColor Property PaneBackgroundColor Property FolderPaneBorderStyle Property FolderPaneBackgroundColor Property FolderView Property UploadPaneBorderStyle Property UploadPaneBackgroundColor Property UploadView Property ButtonRemoveFromUploadListImageFormat Property ButtonRemoveAllFromUploadListImageFormat Property ButtonAddToUploadListImageFormat Property ButtonAddAllToUploadListImageFormat Property ButtonPasteImageFormat Property MenuArrangeByModifiedText Property MenuArrangeByPathText Property MenuArrangeByTypeText Property MenuArrangeBySizeText Property MenuArrangeByNameText Property MenuArrangeByUnsortedText Property MenuArrangeByText Property MenuArrangeByText Property FolderPaneHeight Property ButtonRemoveFromUploadListText Property ButtonRemoveAllFromUploadListText Property ButtonAddToUploadListText Property ButtonAddAllToUploadListText Property ButtonPasteText Property ShowUploadListButtons Property DropFilesHereText Property DropFilesHereImageFormat Property ShowContextMenu Property MenuRemoveAllFromUploadListText Property MenuRemoveFromUploadListText Property MenuInvertSelectionText Property MenuDeselectAllText Property MenuSelectAllText Property MenuIconsText Property MenuListText Property MenuDetailsText Property MenuThumbnailsText Property MenuRefreshText Property MenuAddAllToUploadListText Property MenuAddToUploadListText Property MenuInvertSelectionText Property MenuDeselectAllText Property MenuSelectAllText Property MenuIconsText Property MenuListText Property MenuDetailsText Property MenuThumbnailsText Property

One Pane Layout

This screenshot shows the one pane layout of Image Uploader. This layout consists only of the upload pane with no properties, specific to this mode.

ButtonStopImageFormat Property ButtonStopText Property ButtonAddFilesImageFormat Property ButtonAddFilesText Property ShowButtons Property ButtonAddFoldersImageFormat Property ButtonSendImageFormat Property ButtonAddFoldersText Property ButtonSendText Property

Browse for Folder Dialog

This dialog appears in one pane layout mode when the user clicks the Add Folder button.

IncludeSubfoldersText Property

Adding Folders Dialog

This dialog displays folders that are being added for upload.

AddFolderDialogTitleText Property AddFolderDialogButtonCancelText Property AddFolderDialogButtonSkipAllText Property AddFolderDialogButtonSkipText Property

Thumbnail View

The thumbnail view can be used in the folder pane and in the upload pane. You can change the size of the displayed thumbnails, the spacing between them, and different text labels appearing depending on the other settings.

PreviewThumbnailBorderColor Property PreviewThumbnailBorderHoverColor Property PreviewThumbnailInactiveSelectionColor Property PreviewThumbnailActiveSelectionColor Property DimensionsAreTooSmallText Property DimensionsAreTooLargeText Property FileIsTooSmallText Property FileIsTooLargeText Property CmykImagesAreNotAllowedText Property IncorrectFileInactiveUnselectedTextColor Property IncorrectFileInactiveSelectedTextColor Property IncorrectFileActiveUnselectedTextColor Property IncorrectFileActiveSelectedTextColor Property DisplayNameInactiveUnselectedTextColor Property DisplayNameInactiveSelectedTextColor Property DisplayNameActiveUnselectedTextColor Property DisplayNameActiveSelectedTextColor Property PaneItemDesign Property ShowDescriptions Property UploadPaneAllowRotate Property FolderPaneAllowRotate Property AllowRotate Property EnableRemoveIcon Property UploadPaneShowDescriptions Property FolderPaneShowDescriptions Property ThumbnailVerticalSpacing Property ThumbnailHorizontalSpacing Property PreviewThumbnailSize Property AllowMultipleRotate Property AllowMultipleRemove Property RotateCounterIconClockwiseTooltipText Property RotateIconClockwiseTooltipText Property RemoveIconTooltipText Property RotateIconCounterclockwiseImageFormat Property RotateIconClockwiseImageFormat Property RemoveIconImageFormat Property PreviewThumbnailInactiveDropHighlightedColor Property PreviewThumbnailActiveDropHighlightedColor Property LargePreviewIconTooltipText Property LargePreviewIconImageFormat Property EditDescriptionTooltipText Property DescriptionTooltipText Property

QualityMeterHeight Property QualityMeterBorderColor Property QualityMeterLowQualityColor Property QualityMeterAcceptableQualityColor Property QualityMeterHighQualityColor Property QualityMeterFormats Property QualityMeterBackgroundColor Property

Progress Dialog

This is a standard progress dialog that appears during upload. It consists of a progress bar, status information, and a thumbnail of the image being uploaded.

ProgressDialogPreviewThumbnailSize Property MessageUserSpecifiedTimeoutHasExpiredText Property MessageUnexpectedErrorText Property MessageBoxTitleText Property MessageRedirectText Property KilobytesText Property MegabytesText Property SecondsText Property MinutesText Property HoursText Property ProgressDialogWidth Property ProgressDialogWaitingForRetryText Property ProgressDialogCancelButtonText Property MessageServerNotFoundText Property MessageNoInternetSessionWasEstablishedText Property MessageNoResponseFromServerText Property MessageCannotConnectToInternetText Property MessageUploadFailedText Property MessageUploadCancelledText Property MessageUploadCompleteText Property ProgressDialogTitleText Property ProgressDialogEstimatedTimeText Property ProgressDialogPreparingDataText Property ProgressDialogCloseWhenUploadCompletesText Property ProgressDialogSentText Property

Message Box

This dialog appears whenever some error occurs, or when a warning message should be displayed for the user.

MessageSwitchAnotherFolderWarningText Property MessageRetryOpenFolderText Property MessageMaxTotalFileSizeExceededText Property MessageMaxFileSizeExceededText Property MessageMaxFileCountExceededText Property MessageFileSizeIsTooSmallText Property MessageDimensionsAreTooSmallText Property MessageDimensionsAreTooLargeText Property

Loading Files

If a folder selected in the tree pane contains too many items, it may take some time to create the full list of the files. While this operation is in progress, the corresponding text message will be displayed to the user.

LoadingFilesText Property

Advanced Details List

This view mode is available for the upload pane and shows the details of the upload process. You can specify the background settings of the upload pane and different items, and change the text labels.

AdvancedDetailsGridLineStyle Property AdvancedDetailsIdleItemBackgroundColor Property AdvancedDetailsFailedItemBackgroundColor Property AdvancedDetailsInProcessItemBackgroundColor Property AdvancedDetailsGridLineColor Property ButtonAdvancedDetailsCancelText Property ButtonAdvancedDetailsCancelImageFormat Property
ListColumnLastModifiedText Property ListColumnFileNameText Property ListColumnFileTypeText Property ListColumnFileSizeText Property UploadPaneBackgroundImageFormat Property

Confirm File Delete Dialog

The dialog that appears in Java version of Image Uploader and asks the user to confirm that they really want to delete uploaded or selected files.

DeleteFilesDialogTitleText Property DeleteSelectedFilesDialogMessageText Property DeleteUploadedFilesDialogMessageText Property

Authentication Dialog

The dialog that appears in the Java version of Image Uploader when the user should enter their credentials.

AuthenticationRequestButtonCancelText Property AuthenticationRequestPasswordText Property AuthenticationRequestDomainText Property AuthenticationRequestLoginText Property AuthenticationRequestButtonOkText Property AuthenticationRequestBasicText Property AuthenticationRequestNtlmText Property

Unix File System

The tree pane on *NIX operating systems is slightly different from the tree panes on other systems. For *NIX users, you can change text that labels the home directory and the root directory.

UnixFileSystemRootText Property UnixHomeDirectoryText Property

Specifying Parameters of Image Uploader

The most convenient way to change the default value of a property is to use the addParam functions declared in the iuembed.js when initializing Image Uploader. For example:

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

//...Any other params...

iu.addParam("BackgroundColor", "#ff0000"); 
iu.addParam("PreviewThumbnailSize", "150"); 

//...

iu.writeHtml();
</script>

See the Configuring Image Uploader topic for more details.

You can also change properties in runtime. However, it is convenient only if you create the control dynamically or need to change appearance on-the-fly, for example, as a response to some user actions.

See Also

Manual