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:
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
