JSF 2.0 File upload

First of all, this (old) question and answer assumes JSF 2.0/2.1. Since JSF 2.2 there's a native <h:inputFile> component without the need for 3rd party component libraries. See also How to upload file using JSF 2.2 <h:inputFile>? Where is the saved File?

The easiest way would be using Tomahawk for JSF 2.0. It offers a <t:inputFileUpload> component.

Here's a step-by-step tutorial:

Create a blank dynamic web project for Servlet 3.0 and JSF 2.0. The web.xml must comply Servlet 3.0 spec and already contain the JSF servlet:

<?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="YourProjectName" version="3.0">

    <display-name>Your Project Name</display-name>

    <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>*.xhtml</url-pattern>
    </servlet-mapping>

</web-app>

The faces-config.xml must comply JSF 2.0 spec:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
    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-facesconfig_2_0.xsd"
    version="2.0">

</faces-config>

Download Tomahawk 1.1.10 for JSF 2.0. Extract the zip file, go to the /lib folder and copy all *.jar files into your /WEB-INF/lib.

It are 18 files, of which batik*.jar and xml*.jar are unnecessary for using alone the t:inputFileUpload component. You could leave them away.

Configure the Tomahawk extensions filter in web.xml. It's the one who's responsible for handling multipart/form-data requests which is required to be able to send files over HTTP.

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

Note that the <servlet-name> must match the exact <servlet-name> of the FacesServlet as you've definied in web.xml.

Create a simple Facelet, upload.xhtml:

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:t="http://myfaces.apache.org/tomahawk"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Tomahawk file upload demo</title>
    </h:head>
    <h:body>
        <h:form enctype="multipart/form-data">
            <t:inputFileUpload value="#{bean.uploadedFile}" />
            <h:commandButton value="submit" action="#{bean.submit}" />
            <h:messages />
        </h:form>
    </h:body> 
</html>

Note the enctype="multipart/form-data" attribute on <h:form>, this is very important in order to be able to send files with HTTP.

Create a simple managed bean, com.example.Bean:

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 UploadedFile uploadedFile;

    public void submit() throws IOException {
        String fileName = FilenameUtils.getName(uploadedFile.getName());
        String contentType = uploadedFile.getContentType();
        byte[] bytes = uploadedFile.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)));
    }

    public UploadedFile getUploadedFile() {
        return uploadedFile;
    }

    public void setUploadedFile(UploadedFile uploadedFile) {
        this.uploadedFile = uploadedFile;
    }

}

That should be it. Open it by http://localhost:8080/projectname/upload.xhtml.

As to your concrete questions:

what should i do to pass the file from the JSF to the managed bean and then transform it to a byte[](To be able to handle it over to the EJB)?

This is answered above.

How can a servlet help me?

It is able to process and control HTTP requests/responses. In a JSF environment, the FacesServlet already does all the work.

Do i need a servlet to do this?

In a JSF environment, the FacesServlet is mandatory. But it's already provided by the API, you don't need to write one yourself. However, to be able to download files from a database, another servlet is definitely useful. You can find a basic example here: Servlet for serving static content.

Also i found that in some blog it mentions something about servlets 3.0, but i dont know if my working enviroment is ussing it, how can if i am ussing servlets 3.0(I am ussing JEE6)?

If you're using Servlet 3.0 container like Glassfish 3, JBoss AS 6, Tomcat 7, etc and the web.xml is declared as Servlet 3.0, then you're definitely using Servlet 3.0. Servlet 3.0 is part of Java EE 6.

For completeness, I just want to provide a fully functional self contained example of how this is done with JSF 2.2, either with non-Ajax and Ajax requests. Keep in mind JSF 2.2 uses different namespaces and you need to be working with a Servlet 3.0 container (as Tomcat 7.0.x, JBoss AS 6.x and 7.x and GlassFish 3.x are).

fileUpload.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
    <h:form enctype="multipart/form-data">
        <h:inputFile value="#{uploadBean.file}" />
        <h:commandButton value="Post Upload" action="#{uploadBean.upload}" />
    </h:form>
    <h:form enctype="multipart/form-data">
        <h:inputFile value="#{uploadBean.file}" />
        <h:commandButton value="Ajax Upload">
            <f:ajax listener="#{uploadBean.upload}" execute="@form"
                render="countOutput" />
        </h:commandButton>
    <!-- Counts the uploaded items -->
    <h:outputText id="countOutput"
        value="Files uploaded #{uploadBean.filesUploaded}" />
    </h:form>
</h:body>
</html>

UploadBean.java:

@ManagedBean
@ViewScoped
public class UploadBean {

    private int filesUploaded = 0;

    //javax.servlet.http.Part (Servlet 3.0 API)
    private Part file;
    private String fileContent;

    /**
     * Just prints out file content
     */
    public void upload() {
        try {
            fileContent = new Scanner(file.getInputStream())
                    .useDelimiter("\\A").next();
            System.out.println(fileContent + " uploaded");
            filesUploaded++;
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public int getFilesUploaded() {
        return filesUploaded;
    }

    public Part getFile() {
        return file;
    }

    public void setFile(Part file) {
        this.file = file;
    }
}

See also:

JSF 2.2: File upload with h:inputFile

I would recommend using a companent library like Tomahawk's <t:inputFileUpload> or PrimeFaces <p:fileUpload>.

BalusC also has a nice blog post about Uploading files with JSF 2.0 and Servlet 3.0.

JSF 2.0 File upload

Related

Recent Posts