Configuring AJAXUploader Styles
EO.Web AJAXUploader supports two UI layouts: standard layout and templated layout.
The standard layout consists of an input area, a progress area and a posted file
area. Standard layout can be overridden by
LayoutTemplate, which provides a custom UI layout template.
Using Standard Layout
Almost every UI element in the standard layout is customizable:
- File Input Element Style
A file input element contains a textbox and a browse button. You can use
TextBoxStyle and BrowseButtonStyle
to customize the style for the textbox and browse button respectively.
To display multiple input file elements in order to allow end user upload multiple files
at one time, set Rows to a number
greater than 1.
- ProgressBar Information
The default layout contains a progress area that includes a progress bar and a progress
text. Use ProgressBarSkin to
specify one of the built-in skin for the progress bar. Use
ProgressTextFormat to specify the format of the progress text.
Optionally, you can specify the progress information to be displayed in a dialog
by specifying ProgressDialogID
property.
- Uploaded Files Information
The default layout displays an uploaded files area that lists all uploaded file
with options to delete them. The label displayed for each file is customizable through
PostedFileLabelFormat.
- Upload, Cancel and Delete Button's Text and Style
EO.Web AJAXUploader provides several properties to allow you configure the text
and style of upload, cancel and delete buttons:
UploadButtonStyle, UploadButtonText,
DeleteButtonStyle, DeleteButtonText,
CancelButtonStyle, CancelButtonText.
In addition, you can use UseLinkButton
property to specify those buttons to be link buttons instead of push buttons.
Using Custom Templated Layout
EO.web AJAXUploader supports LayoutTemplate,
through which you can specify a completely different layout than the standard layout.
Using LayoutTemplate, you can:
- Adjust the location of different area. For example, the file input elements are
on top of the progress information area in the default layout. Using LayoutTemplate You
can move it below the progress information area;
- Omit certain elements. For example, the default progress information area consists
of a progress bar and a progress text. Using LayoutTemplate you can only include
the progress bar but not the progress text.