Upload File and send text field values using JSF and Primefaces

In my previous post, I showed how to upload a file using JSF and primefaces.
In this blog I will show how to upload a file along with text field value.
In this blog I will add a text field to the form and a field in the controller with setters and getters. So to transfer text field value to the controller, I will add an event to text field to update the managed bean on blur event.

 <h:form enctype="multipart/form-data">
<h:outputLabel value="Text Field here"/>
 <h:inputText value="#{fileUploadController.summary}">
<f:ajax event="blur"/>
</h:inputText>
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
mode="advanced" update="messages, dt"  auto="true"/>
 <p:dataTable id="dt" var="filename" value="#{fileUploadController.filesList}">
<p:column>
 #{filename}
 </p:column>
 </p:dataTable>
<p:growl id="messages" showDetail="true"/>
 </h:form>



@ManagedBean
@SessionScoped
public class FileUploadController implements Serializable {
    private String summary;
    private List<String> filesList;
    public List<String> getFilesList() {
        return filesList;
    }
    public void setFilesList(List<String> filesList) {
        this.filesList = filesList;
    }
    public String getSummary() {
        return summary;
    }
    public void setSummary(String summary) {
        this.summary = summary;
    }
    public FileUploadController() {
        filesList = new ArrayList<String>();
    }
    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded. Textfield: "+summary);
        FacesContext.getCurrentInstance().addMessage(null, msg);
        UploadedFile file = event.getFile();
        System.out.println(file.getContents());
        filesList.add(file.getFileName());
        System.out.println("added to files list " + filesList + " with Summary field " + summary);
    }
}

And the result:

Uploading file Using JSF Primefaces

Following steps are involved in developing upload functionality in JSF and primefaces:

1) Add the file-upload library to project and configuring web.xml file
2) Writing the File Upload handler controller and maintaining a List of files uploaded
3) Writing the xhtml page for uploading a file and Datagrid to show the list of files uploaded

Let us start:

1) Add the file-upload library to project

       and configuring web.xml file

     <filter>
        <filter-name> File Upload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
        <init-param>
            <param-name>thresholdSize</param-name>
            <param-value>51200</param-value>
        </init-param>
        <init-param>
            <param-name>uploadDirectory</param-name>
            <param-value>D:\uploadedFiles</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name> File Upload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
    </filter-mapping>



2) Writing the File Upload Controller

@ManagedBean
@SessionScoped
public class FileUploadController implements Serializable {
    private List<String> filesList;
    public List<String> getFilesList() {
        return filesList;
    }
    public void setFilesList(List<String> filesList) {
        this.filesList = filesList;
    }
    public FileUploadController() {
        filesList = new ArrayList<String>();
    }
    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, msg);
        UploadedFile file = event.getFile();
        filesList.add(file.getFileName());
        System.out.println("added to files list " + filesList);
    }
}

3) Writing the xhtml page for uploading a file

<p:layoutUnit position="center">
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="{fileUploadController.handleFileUpload}"
mode="advanced" update="messages, dt" auto="true"/>
<p:dataTable id="dt" var="filename" value="#{fileUploadController.filesList}">
<p:column>
#{filename}
</p:column>
</p:dataTable>
<p:growl id="messages" showDetail="true"/>
</h:form>
</p:layoutUnit>


Result