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

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>File Upload Example</title>
</h:head>
<h:body>
<h:form>
<rich:fileUpload uploadLabel="Upload file"
acceptedTypes="jpg,jpeg,gif"
data="#{uploadFile.fileName}"
maxFilesQuantity="2"
immediateUpload="true"
maxFileSize="10000">
</rich:fileUpload>
</h:form>
</h:body>
</f:view>
</ui:composition>

Managed Bean

// UploadFile.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class UploadFile {
String fileName;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
}

Output: