JSF File Upload Control

1. JSF File Upload Control This Learning Module describes the use of the JSF File Upload component – for allowing users to select and save images to blobs and clobs through Server-Side EGL programming.

2.  File Upload Control – 1 of 4 • Many leading-edge applications have requirements to display, save and manipulate graphic files. You’ve seen that JSF Image components can be used to display graphics. However, it is a common requirement to allow users to update them through the browser. To do this, we introduce you to the File Upload component. Let’s have a look! • Create a new web .JSP page named: fileUpdatePage.jsp – use a Style Template. • Drag an HTML table into the page: 4 Rows/2 columns. Width: 60% • In column 1, add the text shown in this screen capture. • Optionally, select the column horizontally align right, give the column a custom color, and make the text smaller and bold • In row 1, column 2 drag/drop an Enhanced Faces Component Images control • In row 2, column 2 drag/drop a File Upload control

3.  File Upload Control – 2 of 4 - JSFHandler • From the JSFHandler, replace the existing boilerplate code with the statements in the Notes section. Let’s have a look and see what’s new in here… • The fileNameIn/Out string variables will be used to load a blob variable from an image file on your machine. This blob value (image) could come from a database as well • The LOBLIB. Is a set of EGL API’s that provide useful functions for manipulating blobs. In our case, we are using: • loadBlobFromFile – which uses the filespec associated with the fileNameIn variable to initialize the blob variable • updateBlobToFile – which writes out a new file, from the value in the blob variable • Be sure to Ctrl/S (save) before continuing

4.  File Upload Control – 3 of 4 Bind Variables From Page Designer: • Select the Image file • From Properties • Specify File: • From the folder icon, select Bind... • Choose the img blob from Page Data • Specify Type: image/gif • From Page Data • Drag and Drop img blob on top of the FileUpload Control • Drag and Drop changeImg into the HTML table – where it will create a Submit Button • Drag and Drop writeBlobToFile into the HTML table – where it will create a Submit Button

5.  File Upload Control – 4 of 4 Prepare for the test • Recall that in the JSFHandler the filespec pointed to: c:/r1.jpg. You will need to: • From \WebContent\images: • Select and Copy the r1.jpg file • From Windows Explorer or My Computer paste the file directly onto the C: (root) drive • Run the page and try out the: Upload, Change and Write buttons • Note that after clicking writeBlobToFile – you can use the Browse… button to go see it, as: c:/r1bk.jpg