The file uploading example on pages 548—557 in chapter 13 of
the
Core JSF text shows how to upload an image file from a
client, store it on the server, and then display it in a JSF page.
I have modified the example so that it can also display uploaded text
files.
Here is an application that demonstrates both kinds of file uploads:
File Upload Application.
Here is a zipped NetBeans project that produces this application:
fileupload.zip
The file upload capability is accomplished through a custom JSF tag
(see chapter 11).
There are two parts to accomplishing file uploads in JSF pages:
- Moving the file from the client to the server
- Displaying the file contents in web pages
The authors have provided a custom tag,
corejsf:upload, that can
be used in JSF pages, provided that:
- The corejsf tag library is registered with the application
- The corejsf tag library is loaded in the JSF pages
that use the tag
- The h:form tag that encloses corejsf:upload has
its enctype attribute set to "multipart/form-data"
The example application shows how the tag is used:
- uploadImage.xhtml: Note the target attribute
whose value is the name of a file to be stored on the server
— part of the file name is taken from the id property of
the user bean
- uploadText.xhtml: Note the value attribute
specifying the fileText property of the user bean
— a location to store the file text as a string
This example uploads an image file to the server.
Note the location of the
upload subfolder relative to the
location of the top-level
.xhtml files.
- If you are running your web app directly from NetBeans, you will find the
uploaded file in the build/web/upload folder in your
NetBeans project
- If you are deploying your web app in a standalone Glassfish
instance, you will find the uploaded file on the server under
the applications folder
If you need to store the image in a database, you could store the image as
a
BLOB (binary large object).
Note that the text file is stored as a bean property, not a file on the server.
Note that the bean property setter could (and probably should) store
the string in a database table as a
CLOB (character large
object).
How the submitted files are displayed is shown in
submittedImage.xhtml and
submittedText.xhtml.
- submittedImage.xhtml: Displaying images is accomplished
using the h:graphicImage tag with a url attribute
whose value matches the target value when the file was uploaded
- submittedText.xhtml: For text files, use
the value attribute of a tag such as h:inputTextarea
and extract the string from user bean
Since file objects are not
url-encoded by the browser, they
have to be intercepted by a
filter servlet and converted into
HTTP request attributes.
The textbook authors have provided the filter servlet
(
UploadFilter.java), with help from an
Apache Commons
upload library.
JSF must be configured (using
web.xml or an annotation) to use
the filter servlet before handing the request to the JSF lifecyle.
The
corejsf tag library is made available by putting a file
named "
corejsf.taglib.xml" in the
WEB-INF folder.
This file identifies the "
upload" tag name and gives it a
renderer type of
com.corejsf.Upload.
Developing custom tags requires custom
HTML renderers. The authors provide one in
UploadRenderer.java.
Note the
rendererType attribute in the
@FacesRenderer
annotation. This ties the renderer to the
corejsf:upload
tag.
You need to add the
com.corejsf package (including
the
UploadFilter and
UploadRenderer classes) to
the
Source Packages folder of your project.
com.corejsf requires some Java packages that NetBeans does not
include by default. These are contained in the
Libraries folder
of the
fileupload example project:
- commons-fileupload-1.2.1.jar
- commons-io-1.4.jar
You need to add these to your team's NetBeans project:
- Right-click the Libraries node under
your project
- Select Add JAR/Folder...
- In the resulting file chooser, browse to the location of the example
fileupload folder and open the lib
subfolder
- Select archives above
- Click OK