Telerik Extensions for ASP.NET MVC

This topic contains the following sections.

This topic provides description of the Upload HTML output, used CSS classes and some characteristics of the CSS styling.

HTML Output

The Upload renders the following HTML output:

<div class="t-widget t-upload">
    <div class="t-button t-upload-button">
        <input type="file" name="ClientID" id="ClientID" />

The ClientID corresponds to the Name() specified in the component's declaration.

If the browser supports the W3C File API (e.g. Firefox 5, Chrome 12, etc), the component renders a drop zone over which the user can drag and drop files from the computer's file system. The HTML markup changes client-side to the following:

<div class="t-widget t-upload">
    <div class="t-dropzone">
        <div class="t-button t-upload-button">
            <input type="file" name="ClientID" id="ClientID" />
        <em>drop files here to upload</em>

The Upload's HTML output resolves the main limitation of the file input element, namely, it is not stylable. This is accomplished by positioning an invisible <input type="file" /> element over styled content, so that it can receive clicks and open a file browser dialog. In order to support styled button of random size, the file input is made large by means of a large font-size, while its parent element has an overflow:hidden style applied.

If rendered, the dropzone has initially no border and background (but takes up space) until the user drags something over the web page. Dropping the file(s) over the dropzone has the same effect as choosing file(s) from the file browser dialog after clicking on the Select button.

During and after uploading, a file list is displayed, which shows the progress and status of each uploaded file. Its HTML output is the following:

<ul class="t-upload-files t-reset">
    <li class="t-file">
        <span class="t-icon t-success">uploaded</span>
        <span class="t-filename">some-uploaded-file.jpg</span>
        <button class="t-button t-button-icontext t-upload-action" type="button"><span class="t-icon t-delete"></span>Remove</button>
    <li class="t-file">
        <span class="t-icon t-fail">failed</span>
        <span class="t-filename">some-failed-file.jpg
            <span class="t-progress"><span style="width: 75%;" class="t-progress-status"></span></span>
        <button class="t-button t-button-icontext t-upload-action" type="button"><span class="t-icon t-retry"></span>Retry</button>
Upload Html

The dashed line in the image above shows how the the actual file input element is positioned. It is not visible by the user and is a lot larger than the "Select" button, but due to the overflow:hidden style of the button (which is a parent element of the file input), the file input element does not take up more space on the screen than necessary.

The icon before the file name shows whether the file upload is successful, unsuccessful or currently taking place. The button after the file name allows upload retrial (in case of previous fail) or removal of the file name from the list.

If automatic file upload is disabled, one more submit button is rendered below the file list:

<button class="t-button t-upload-selected" type="button">Upload files</button>

More information about buttons' HTML output and CSS classes can be found in the Buttons help article.

CSS Classes and Styling

The Upload component look depends on the styles associated with its CSS classes. Telerik Extensions for ASP.NET MVC use the so-called primitives, i.e. different HTML elements in the different components use the same CSS classes to provide a level of abstraction and allow common styling across the different components.

  • .t-widget - generic CSS class rendered by all Telerik MVC extensions; usually it defines border color, text color and background color, but not in this case
  • .t-upload - CSS class, which corresponds to the component's name; does not define any particular styles
  • .t-dropzone - defines padding, zero border and transparent background
  • .t-dropzone-active - applied to the dropzone when the user drags something over the web page; defines border color, background color and makes the text inside the em element show
  • .t-button - generic CSS class applied to all buttons inside Telerik MVC extensions; applies border, background and text color
  • .t-upload-button - applies default button width, middle vertical alignment, relative positioning and disables overflowing of the file input element
  • the file input element has absolute positioning applied, as well as zero opacity and 200px monospace font
  • .t-upload-files - applies border and background color
  • .t-reset - generic CSS class, which removes default browser margins, paddings and list styles
  • .t-file - not used for styling
  • .t-icon - generic CSS class applied to all elements that should have some icon as a background image
  • .t-filename - defines inline-block display, middle vertical alignment and minimum width
  • .t-success, .t-fail, .t-retry, .t-delete - define background position styles as all icons are located in a single sprite image; .t-loading uses a separate animated image

Notes on Styling Customizations

The file input element is not stylable and moreover, it is not visible. In order to customize the appearance of the Upload component, you should style the div.t-button element. Note that this may influence all other buttons used by Telerik MVC extensions, unless you use more specific selectors, for example:

.t-upload .t-button
  /* styles */

Changing the File Input ID

By default, the id and name attributes of the file input element match the specified Name(). However, you can change the ID by using HtmlAttributes:

<%= Html.Telerik().Upload()
        .InputHtmlAttributes(new { id = "id1" })

Note that HtmlAttributes apply to the Upload wrapper div, with the exception of the id attribute.

See Also