PrimeFaces - File upload via Ajax

In this example, we will learn how to upload a file via Ajax in PrimeFaces.

JSF page

src/main/webapp/index.xhtml

<h:body style="margin-left:30px">
    <h2>PrimeFaces File Upload Example</h2>
    <h:form>
        <p:fileUpload update="content" auto="true" style="width:500px;"
                      fileUploadListener="#{fileUploadBean.handleUpload}"/>

        <p:panel id="content" style="border:none;">
            <p:outputPanel rendered="#{fileUploadBean.fileName ne null}">
                <h4>File name:</h4>
                #{fileUploadBean.fileName}
                <h4>File content:</h4>
                #{fileUploadBean.fileContent}
            </p:outputPanel>
        </p:panel>
    </h:form>
</h:body>

The manage bean

@ManagedBean
@ViewScoped
public class FileUploadBean {
    private String fileContent;
    private String fileName;

    public void handleUpload(FileUploadEvent event) {
        UploadedFile file = event.getFile();
        byte[] contents = file.getContents();
        fileContent = new String(contents);
        fileName = file.getFileName();
    }

    public String getFileContent() {
        return fileContent;
    }

    public String getFileName() {
        return fileName;
    }
}

mvn tomcat7:run-war

Output

Accessing URL: http://localhost:8080/index.xhtml

Clicking on 'Choose' button:

On selecting a file:

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• JDK 1.8
• Maven 3.3.9