Over a million developers have joined DZone.

How to Upload With PrimeFaces 3.2 Under Tomcat 6

· Java Zone

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.

A few months ago I wrote the “How to upload with PrimeFaces under Tomcat 6” tip which was using the PrimeFaces 2.2 version. Since then, PrimeFaces has been changed and the current version, 3.2, has a lot of new great features. In this tip, we will explore all these features.

For start, you will need the following JARs, under your /lib folder (you can take them separately from web, or if you take this complete example from http://www.filefactory.com/file/3lnbxg0x85d/n/primeFileUpload.rar, then they are already included):


- primefaces-3.2.jar (this is what I’ve used, but you can take the latest Prime Faces library from PrimeFaces site – http://www.primefaces.org).
- jsf-api-2.0.2-FCS.jar (again, take the latest, if you consider that you need it)
- jsf-impl-2.0.2-FCS.jar
- el-api-2.2.jar
- el-impl-2.2.jar
- commons-io-1.4.jar
- commons-fileupload-1.2.jar

Next, I’ve configure the application descriptor, web.xml (depending on Prime Faces version, these configurations may be slightly different). In this descriptor I’ve configured Prime Faces upload filter and the ui-lightness-1.0.4 PrimeFaces theme:


<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
 "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">
<web-app>            
    <context-param>
        <description>Context param for JSTL 1.2 to work in Tomcat 6 sun RI
        </description>
        <param-name>com.sun.faces.expressionFactory</param-name>
        <param-value>com.sun.el.ExpressionFactoryImpl</param-value>
    </context-param>
    <context-param>
        <description>Parameter required by Mojarra 2.0</description>
        <param-name>com.sun.faces.allowTextChildren</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.VALIDATE_EMPTY_FIELDS</param-name>
        <param-value>true</param-value>
    </context-param>
    <!-- Adding a PrimeFaces theme --> 
    <context-param>
 <param-name>primefaces.THEME</param-name>
 <param-value>ui-lightness</param-value>
    </context-param>    
    <filter>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter
        </filter-class>
        <init-param>
            <param-name>thresholdSize</param-name>
            <param-value>10240</param-value> <!-- 10 Mb -->
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
    </filter-mapping>  
    <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>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>   
</web-app>
Next, I wrote a simple JSF page to test the Prime Faces upload component:
<html xmlns="http://www.w3c.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Prime Faces</title>
        <style type="text/css">
            .ui-fileupload {
                width: 800px;
                margin: 0 auto;
            }
        </style>
    </h:head>
    <h:body>
        <h:outputText value="PrimeFaces Single Upload" 
                              style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                mode="advanced"
                update="messages"
                label="Choose a file"
                sizeLimit="1048576"
                allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
                invalidFileMessage="You are allowed to upload only images !"
                />
            <p:growl id="messages" showDetail="true" sticky="true"/>
        </h:form>

        <h:outputText value="PrimeFaces Multiple Upload" 
                              style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                mode="advanced"
                update="messages"
                label="Choose a file"
                sizeLimit="10485760"
                multiple="true"
                allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
                invalidFileMessage="You are allowed to upload only images !"
                />
            <p:growl id="messages" showDetail="true" life="5000"/>
        </h:form>

        <h:outputText value="PrimeFaces Auto Upload" 
                              style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                 mode="advanced"
                 update="messages"
                 label="Choose a file"
                 auto="true"
                 sizeLimit="10485760"
                 allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                 invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
                 invalidFileMessage="You are allowed to upload only images !"
                 />
            <p:growl id="messages" showDetail="true" life="5000"/>
        </h:form>

        <h:outputText value="PrimeFaces Drag and Drop Upload" 
                              style="font:30px bold; margin-left:15%;"/>
        <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                 mode="advanced"
                 update="messages"
                 label="Choose a file or drag and drop it here"
                 sizeLimit="10485760"
                 allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                 invalidSizeMessage="The maximum file size allowed is 10 Megabytes !"
                 invalidFileMessage="You are allowed to upload only images !"
                 />
            <p:growl id="messages" showDetail="true" life="5000"/>
        </h:form>
    </h:body>
</html>
As you can see, p:fileUpload is very flexible and customizable, allowing us to specify upload characteristics with a few simple attributes. Going further, we need a managed bean capable of dealing with upload itself. A possible implementation (probably not the best, but for sure not the worst) is listed below:
package com.extensions;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import javax.faces.FacesException;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.primefaces.event.FileUploadEvent;

@ManagedBean(name = "fileUploadController")
@RequestScoped
public class uploadFilesBean {
   
    //Primitives
    private static final int BUFFER_SIZE = 6124;    
    private String folderToUpload;
    
    /** Creates a new instance of UploadBean */
    public uploadFilesBean() {
    }
    
    public void handleFileUpload(FileUploadEvent event) {
       
            ExternalContext extContext = 
                          FacesContext.getCurrentInstance().getExternalContext();
            File result = new File(extContext.getRealPath
                         ("//WEB-INF//files//" + event.getFile().getFileName()));
            System.out.println(extContext.getRealPath
                         ("//WEB-INF//files//" + event.getFile().getFileName()));

            try {
                FileOutputStream fileOutputStream = new FileOutputStream(result);

                byte[] buffer = new byte[BUFFER_SIZE];

                int bulk;
                InputStream inputStream = event.getFile().getInputstream();
                while (true) {
                    bulk = inputStream.read(buffer);
                    if (bulk < 0) {
                        break;
                    }
                    fileOutputStream.write(buffer, 0, bulk);
                    fileOutputStream.flush();
                }

                fileOutputStream.close();
                inputStream.close();

                FacesMessage msg = 
                            new FacesMessage("File Description", "file name: " +
                            event.getFile().getFileName() + "<br/>file size: " + 
                            event.getFile().getSize() / 1024 + 
                            " Kb<br/>content type: " + 
                            event.getFile().getContentType() + 
                                    "<br/><br/>The file was uploaded.");
                FacesContext.getCurrentInstance().addMessage(null, msg);

            } catch (IOException e) {
                e.printStackTrace();

                FacesMessage error = new FacesMessage(FacesMessage.SEVERITY_ERROR,
                                               "The files were not uploaded!", "");
                FacesContext.getCurrentInstance().addMessage(null, error);
            }       
    }    
}

The uploaded files goes to /WEB-INF/files folder.

Here it is a nice screenshot of Prime Faces upload:



That’s it ! Hope you like it !

Download a complete example tested under Tomcat 6 from here

The Java Zone is brought to you in partnership with JetBrains.  Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience.

Topics:

Published at DZone with permission of A. Programmer .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}