RadUpload is built over the standard <input type=file> (File Input) element. This html element is very limited in functionality, and one of its largest limitations lies in its inability to change its visual appearance. A very small number of CSS styles can be applied to file inputs and they are different between different browsers.

The following image illustrates how RadUpload works around the limitations of the file input element:

• A TextBox (marked as 2 in the image below) and a Button (3) are placed below a transparent File Input (1). When the user clicks with the mouse on the Button, or types text in the TextBox, the File Input receives the mouse and keyboard events because it is on top of the other controls.

• Using javascript, these events are set to the visible TextBox and Button in order to synchronize their content and appearance.

Note
The html elements in the image above are offset a bit for clarity.

The EnableFileInputSkinning property controls whether the TextBox and Button are used to affect the appearance of the file input element:

• When EnableFileInputSkinning is true, RadUpload displays the controls as described above. The File Input has the input.ruFileInput CSS class applied, the TextBox has input.ruFakeInput, and the Button has two CSS classes - input.ruButton and input.ruBrowse.

• When EnableFileInputSkinning is false, the TextBox and the Button aren't rendered, and the File Input is visible. In this mode the ruStyled CSS class from span.ruFileWrap is removed.