PrimeFace FileUpload

It is an input component which is used to upload file to the server. It allows us to upload file from the browser to the server. It includes HTML5 features and has nice user interface with progress bar and other useful butttons.

PrimeFaces selects the most appropriate uploader engine by detection and it is possible to force one or the other usign an optional configuration param.

The <p:fileUpload> component is used to create file upload button in JSF application.

FileUpload Attributes

Attribute	Default value	Type	Description
required	false	Boolean	It is used to mark component as required.
validator	null	MethodExpr	It is used to set validator for the component.
requiredMessage	null	String	It is used to set message to be displayed when required field validation fails.
update	null	String	It is used to set update after fileupload completes.
process	null	String	It is used to set process in fileupload request.
fileUploadListener	null	MethodExpr	A method to invoke when a file is uploaded.
multiple	false	Boolean	It allows choosing of multiple file uploads from native file browse dialog.
auto	false	Boolean	It is used to set file uploading automatically.
label	choose	String	It is a label of the browse button.
allowTypes	null	String	It is used to set the allows types for file.
sizeLimit	null	Integer	It is used to set file size limit.
fileLimit	null	Integer	It is used to set maximum number of files allowed to upload.
invalidSizeMessage	null	String	It is used to set message to display when size limit exceeds.
fileLimitMessage	null	String	It is used to set message to display when file limit exceeds.
accept	null	String	It is used to set filters files in native file browser dialog.
sequential	false	Boolean	It is used to allow sequential file uploads.

Example

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

JSF File

// fileUpload.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>File Uploads</title>
</h:head>
<h:body>
<h:form>
<p:fileUpload fileUploadListener="#{fileUpload.handleFileUpload}" mode="advanced" dragDropSupport="false"
update="messages" sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</h:body>
</html>

ManagedBean

// FileUpload.java

package com.javatpoint;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.FileUploadEvent; 
@ManagedBean
public class FileUpload {
public void handleFileUpload(FileUploadEvent event) {
FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}

Output:

Click on the choose button and upload a file.