1. ® IBM Software Group © 2006 IBM Corporation 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. 2 Last update: 12/04/2007  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! fileUpdatePage.jsp  Create a new web.JSP page named: fileUpdatePage.jsp – use a Style Template. 4 Rows/2 columns. Width: 60%  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. 3 Last update: 12/04/2007  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. 4 Last update: 12/04/2007  File Upload Control – 3 of 4 Bind Variables From Page Designer:  Select the Image file  From Properties  Specify File: Bind... –From the folder icon, select Bind... img –Choose the img blob from Page Data image/gif  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. 5 Last update: 12/04/2007  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 c:/r1bk.jpg  Note that after clicking writeBlobToFile – you can use the Browse… button to go see it, as: c:/r1bk.jpg