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