JSF 2.0 file upload - walkthrough? - file

Question

I have looked around for a while looking for a complete guide for this. I've been working with JSF like 2 days now and am trying to make a page that will upload a pdf file to a server, putting its file path into a database along with other user-inputted text fields.
This is my form (so far)
<h:form enctype="multipart/form-data">
<h:outputText value="Name: " />
<h:inputText id="name" size="40" value="#{resumeBean.name}" required="true"/> <br/>
<h:outputText value="Position Sought: "/>
<h:inputText id="position" size="40" value="#{resumeBean.position}" required="true"/> <br/>
<h:outputText value="Date: " />
<h:inputText id="date" size="40" value="#{resumeBean.date}" required="true" /> <br/>
<h:outputText value="File to upload: " />
<t:inputFileUpload value="#{bean.resume}" /> <br/>
<h:commandButton value="submit" action="#{bean.submit}" />
<h:messages />
</h:form>
and this bean to handle the file
package com.example;
import java.io.IOException;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import org.apache.commons.io.FilenameUtils;
import org.apache.myfaces.custom.fileupload.UploadedFile;
#ManagedBean
#RequestScoped
public class Bean {
private String name, position, date;
private String fileName;
private UploadedFile resume;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPosition() {
return position;
}
public void setPosition(String position) {
this.position = position;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public void setResume(UploadedFile resume) {
this.fileName = resume.getName();
this.resume = resume;
}
public UploadedFile getResume() {
return resume;
}
public String getFileName() {
return fileName;
}
public void submit() throws IOException {
String fileName = FilenameUtils.getName(resume.getName());
String contentType = resume.getContentType();
byte[] bytes = resume.getBytes();
// Now you can save bytes in DB (and also content type?)
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(String.format("File '%s' of type '%s' successfully uploaded!", fileName, contentType)));
}
}
web.xml :
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="timesheet2" version="3.0">
<display-name></display-name>
<welcome-file-list>
<welcome-file>faces/login.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<filter>
<filter-name>MyFacesExtensionsFilter</filter-name>
<filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>MyFacesExtensionsFilter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
</web-app>
but from here I have no idea how to continue, help please?
thanks in advance

Answer 1

BalusC has made a blog post about File Uploading by building a custom tag component, pure JSF based for JSF 2.0 and 2.1. Since JSF 2.2, there's a JSF component for file uploading: <h:inputFile>.
Also, you can look another implementations like PrimeFaces FileUpload and RichFaces FileUpload.

Answer 2

Might I recommend the PrimeFaces FileUploader?