Javatpoint Logo
Javatpoint Logo

RichFaces <rich:fileUpload>

It is used to upload files to the server. It provides lots of attributes that we can use in our application.

It has lot of features including multiple uploads, progress bars, restrictions on file types and restrictions on sizes of the files to be uploaded.

Style classes and skin parameters

The following table contains Style classes and corresponding skin parameters.

Class (selector) Function Skin Parameters Mapped CSS properties
.rf-fu It is used to define styles for the file upload control. generalBackgroundColor panelBorderColor background-color border-color
.rf-fu-hdr It is used to define styles for the header of the file upload control. headerBackgroundColor background-color, border-color
.rf-fu-lst It is used to define styles for lists in the file upload control. No skin parameters.
.rf-fu-cntr-hdn It is used to define styles for the file upload container when it is hidden. No skin parameters.
.rf-fu-btns-lft, .rf-fu-btns-rgh It is used to define styles for buttons on the left and right of the file upload control. No skin parameters.
.rf-fu-btn-add It is used to define styles for the Add button in the file upload control. trimColor panelBorderColor background-color border-color
.rf-fu-btn-cnt-add It is used to define styles for the content of the Add button in the file upload control. generalTextColor generalFamilyFont generalSizeFont color font-family font-size
.rf-fu-btn-add-dis It is used to define styles for the Add button in the file upload control when it is disabled. tableFooterBackgroundColor background-color border-color
.rf-fu-btn-cnt-add-dis It is used to define styles for the content of the Add button in the file upload control when it is disabled. tabDisabledTextColor generalFamilyFont generalSizeFont Color font-family font-size
.rf-fu-btn-upl It is used to define styles for the Upload button in the file upload control. TrimColor panelBorderColor background-color border-color
.rf-fu-btn-cnt-upl It is used to define styles for the content of the Upload button in the file upload control. generalTextColor generalFamilyFont generalSizeFont Color font-family font-size
.rf-fu-btn-clr It is used to define styles for the Clear button in the file upload control. trimColor panelBorderColor background-color border-color
.rf-fu-btn-cnt-clr It is used to define styles for the content of the Clear button in the file upload control. generalTextColor generalFamilyFont generalSizeFont color font-family font-size
.rf-fu-itm It is used to define styles for an item in the file upload control. panelBorderColor border-bottom-color
.rf-fu-itm-lft, .rf-fu-itm-rgh These classes are used to define styles for items on the left and right of the file upload control. No skin parameters.
.rf-fu-itm-lbl It is used to define styles for the label of an item in the file upload control. generalTextColor generalFamilyFont generalSizeFont color font-family font-size
.rf-fu-itm-st It is used to define styles for the status of an item in the file upload control. generalTextColor generalFamilyFont generalSizeFont color font-family font-size
.rf-fu-itm-lnk It is used to define styles for a link item in the file upload control. generalLinkColor generalFamilyFont generalSizeFont color font-family font-size
.rf-fu-inp It is used to define styles for the input field in the file upload control. No skin parameters.
.rf-fu-inp-cntr It is used to define styles for the input field container in the file upload control. No skin parameters.

Example

Here, in the following example, we are implementing <rich:fileUpload> component. This example contains the following files.

JSF File

// file-upload.xhtml

Managed Bean

// UploadFile.java

Output:

RichFaces Rich fileupload 1

Click on add icon to upload a file.

RichFaces Rich fileupload 2

Select file and click ok.

RichFaces Rich fileupload 3

After selecting, it shows status of uploaded file.

RichFaces Rich fileupload 4




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA