10.4. <rich:fileUpload>

⁠10.4.1. Basic usage

Basic usage requires the fileUploadListener attribute. Use the attribute to reference a listener function on the server side after each file is uploaded. The listener should process files as required, such as storing them in the session/db/filesystem/ directory. The component itself does not store uploaded files, so if the listener is not implemented they are not stored anywhere.

⁠

Example 10.6. Basic usage

<rich:fileUpload fileUploadListener="#{bean.listener}" />

⁠10.4.2. Upload settings

Files are uploaded to either the temporary folder (different for each operating system) or to RAM (random-access memory), depending on the value of the org.richfaces.fileUpload.createTempFiles context parameter of the web.xml settings file for the project. If the parameter is set to true, the files are uploaded to the temporary folder.

To limit the maximum size of the uploaded files, define the byte size with the org.richfaces.fileUpload.maxRequestSize context parameter of the web.xml settings file for the project.

⁠10.4.3. Sanitizing file upload input

Any file is accepted by rich:fileUpload component by default. There are three parameters available for limiting what can user upload to the server:

maxFilesQuantity: The maxFilesQuantity parameter defines maximum number of files allowed to be uploaded. After a number of files in the list equals to the value of this attribute, "Add" button disappears and nothing could be uploaded even if you clear the whole list. In order to upload files again you should rerender the component.
acceptedTypes: The acceptedTypes parameter defines comma separated list of file extensions accepted by component. The component does not provide any feedback when rejecting file. For introducing feedback for rejection, use ontyperejected parameter.
ontyperejected: The ontyperejected parameter defines event handler when file does not meet conditions stated by acceptedTypes parameter.

⁠10.4.4. Interactivity options

Set the immediateUpload attribute to true to upload files as soon as they are added to the list, rather than waiting for the user to press the Upload button.

The text labels used in the component can be completely customized. Labels for the various controls of the component can be set using the following parameters:

addLabel: The addLabel parameter sets the label for the Add button.
clearAllLabel: The clearAllLabel parameter sets the label for the Clear All button.
clearLabel: The clearLabel parameter sets the label for the Clear button.
uploadLabel: The uploadLabel parameter sets the label for the Upload button.

The <rich:fileUpload> component provides a built-in progress bar to indicate the progress of each file that is uploaded. This progress bar can be replaced with a <rich:progressBar> component added to the progress facet. Refer to Section 15.8, “<rich:progressBar>” for details on the <rich:progressBar> component.

To disable the <rich:fileUpload> component, use the disabled attribute.

⁠10.4.5. `<rich:fileUpload>` client-side events

There are a number of event handlers specific to the <rich:fileUpload> component:

filesubmit is triggered before a file is uploaded.
uploadcomplete is triggered after all files in the list have finished uploading.

⁠10.4.6. Reference data

component-type: org.richfaces.FileUpload
component-class: org.richfaces.component.UIFileUpload
component-family: org.richfaces.FileUpload
renderer-type: org.richfaces.FileUploadRenderer
handler-class: org.richfaces.view.facelets.FileUploadHandler

⁠10.4.7. Style classes and skin parameters

⁠

Table 10.4. Style classes (selectors) and corresponding skin parameters

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