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.