p:fileUpload does not set uploaded file in backing bean [duplicate]

Question

I am facing a problem with <p:fileUpload> of PrimeFaces. I created a Facelet page to upload a file as below:

<h:form id="welcomeForm">
    <p:fileUpload value="#{fileUploadController.uploadedFile}" mode="simple" />
    <h:commandButton value="Submit" action="#{fileUploadController.submit}" />
    <h:message for="welcomeForm" />
</h:form> 

And a backing bean as below:

public class FileUploadController {   

    private UploadedFile uploadedFile;

    public FileUploadController() {
    }       

    public UploadedFile getUploadedFile() {
        return uploadedFile;
    }

    public void setUploadedFile(UploadedFile uploadedFile) {
        this.uploadedFile = uploadedFile;
    }

    public void submit() {    
        // Get information you from the uploaded file
        System.out.println("Uploaded file name : " + uploadedFile);
    }

} 

When I click the Submit button, the method submit() is called but it the result is as below :

INFO: Uploaded file name : null

How is this caused and how can I solve it?

Answer 1

Please read the <p:fileUpload> chapter of the PrimeFaces User Guide.

Getting started with FileUpload

First thing to do is to configure the fileupload filter which parses the multipart request. FileUpload filter should map to Faces Servlet.

<filter>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

Simple File Upload

Simple file upload mode works in legacy mode with a file input whose value should be an UploadedFile instance.

<h:form enctype="multipart/form-data">
    <p:fileUpload value="#{fileBean.file}" mode="simple" />
    <p:commandButton value="Submit" ajax="false"/>
</h:form>

---

import org.primefaces.model.UploadedFile;

public class FileBean {
    private UploadedFile file;
    //getter-setter
}

Please note the enctype="multipart/form-data" attribute of the form. This is mandatory for HTML in order to be able to send files to the server. The filter is mandatory for JSF in order to extract the data from multipart/form-data requests. Without either of them, either the command action won't be invoked, or all properties will be null.

Answer 2

I think that the problem is that the simple upload doesn't support ajax. you should add ajax="false":

<h:form id="welcomeForm">
    <p:fileUpload value="#{fileUploadController.uploadedFile}" mode="simple" />
    <h:commandButton value="Submit" action="#{fileUploadController.submit}" ajax="false" />
    <h:message for="welcomeForm" />
</h:form> 

Or use the primefaces autouploader.