Upload Files with JSF and MyFaces

The API provided by the Commons File Upload package gives you access to the parsed from data, but the getParameter() and getParameterValues() methods of the servlet request won't work. This is a problem, since these two methods are called by the standard JSF components that run behind regular input fields, checkboxes, radio buttons, and lists. The Servlets API provides two features (filters and request wrappers) that can be used to solve this problem. The next section describes how Apache MyFaces implements a filter that adds the much-needed support for file uploading without breaking the existing JSF components. In addition, MyFaces provides APIs for JavaBeans along with a custom JSF component that renders the <input type="file"> elements.

Configuring JSF and MyFaces Extensions

Currently, there is a main implementation of the JSF specification called JSF Reference Implementation (RI) and there is another one provided by Apache, which is known as MyFaces. There might be other JSF implementations, but JSF RI and MyFaces are the most popular. Many developers prefer the former because it's the "official" implementation from Sun, but MyFaces has some interesting extensions, such as the support for uploading files. You can use the MyFaces extensions together with the JSF RI from Sun if you want. You just have to put the myfaces-extensions.jar file together with the JAR files of JSF RI and commons-fileupload-1.0.jar in the WEB-INF/lib directory of your web application. Here are the JAR files that you need:

A class named MultipartRequestWrapper, which can be found in the org.apache.myfaces.component.html.util package, creates the bridge between MyFaces and Commons File Upload. This class extends HttpServletRequestWrapper, overriding the getParameterMap(), getParameterNames(), getParameter(), and getParameterValues() methods so that they can work properly with the multipart/form-data encoding. In addition, MultipartRequestWrapper provides two new methods, named getFileItem() and getFileItems(), that give you access to the uploaded files through the org.apache.commons.fileupload.FileItem interface.

The MyFaces ExtensionsFilter from the org.apache.myfaces.component.html.util package creates the MultipartRequestWrapper instance when it detects the multipart/form-data encoding. Therefore, you shouldn't be concerned about the parsing of the form data, but it's useful to know how this is implemented in case you want to change the way uploaded files are handled. In a typical application, you just have to configure the ExtensionsFilter in the web.xml descriptor of your web application so that it can intercept the HTTP requests before the FacesServlet of JSF:

<?xml version="1.0" encoding="UTF-8"?>



<!DOCTYPE web-app PUBLIC

    "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

    "http://java.sun.com/dtd/web-app_2_3.dtd">



<web-app>



    <context-param>

        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

        <param-value>client</param-value>

    </context-param>



    <servlet>

        <servlet-name>FacesServlet</servlet-name>

        <servlet-class>

            javax.faces.webapp.FacesServlet

        </servlet-class>

        <load-on-startup>1</load-on-startup>

    </servlet>



    <servlet-mapping>

        <servlet-name>FacesServlet</servlet-name>

        <url-pattern>/faces/*</url-pattern>

    </servlet-mapping>



    <servlet-mapping>

        <servlet-name>FacesServlet</servlet-name>

        <url-pattern>*.faces</url-pattern>

    </servlet-mapping>



    <filter>

        <filter-name>ExtensionsFilter</filter-name>

        <filter-class>

            org.apache.myfaces.component.html.util.ExtensionsFilter

        </filter-class>

        <init-param>

            <param-name>uploadMaxFileSize</param-name>

            <param-value>10m</param-value>

        </init-param>

        <init-param>

            <param-name>uploadThresholdSize</param-name>

            <param-value>100k</param-value>

        </init-param>

    </filter>



    <filter-mapping>

        <filter-name>ExtensionsFilter</filter-name>

        <servlet-name>FacesServlet</servlet-name>

    </filter-mapping>



    <welcome-file-list>

        <welcome-file>index.jsp</welcome-file>

    </welcome-file-list>



</web-app>