JSF 2.0 file upload - walkthrough?

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

可能我推荐PrimeFaces FileUploader吗？