How to Upload With PrimeFaces 3.2 Under Tomcat 6
by
·
Join the DZone community and get the full member experience.
Join For FreeA 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
Upload
PrimeFaces
Apache Tomcat
Published at DZone with permission of A. Programmer. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments