PrimeFace FileUpload

Primefaces Fileupload with primefaces tutorial, primefaces introduction, primefaces features, primefaces configuration, ajax, event, listener, actionlistener, ajax process, ui component, autocomplete, inputtextarea, boolean button, boolean checkbox, calendar, inputtext, inputmask, select one list box, select many box, select checkbox etc.

PrimeFace FileUpload

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

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

ManagedBean

// FileUpload.java

  1. package com.tpoint;  
  2. import javax.faces.application.FacesMessage;  
  3. import javax.faces.bean.ManagedBean;  
  4. import javax.faces.context.FacesContext;  
  5. import org.primefaces.event.FileUploadEvent;   
  6. @ManagedBean  
  7. public class FileUpload {  
  8. public void handleFileUpload(FileUploadEvent event) {  
  9. FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");  
  10. FacesContext.getCurrentInstance().addMessage(null, message);  
  11. }  
  12. }