ADF: Show image files from database as a popup in ADF Web Application

This post explains how to show the image files (.jpg/.png/.pdf etc..),  stored in the database in a blob column, as a popup in the ADF Web Application. 

To show the file from server (file system), you can see Ashish's blog 

Show uploaded file (pdf/text/html/xml/image) content on page -Oracle ADF

In this post, I will show you how to invoke the popup from a table component and show the image corresponding to the row in the popup.

1. Add the Link component as a cloumn in the table.

2. Add a popup component and add a inlineFrame inside the popup.

3. Set the source of the inlineFrame as Servlet.

Script to create the table and steps to configure the DataSource in Weblogic can be downloaded from here.

• Create a servlet as below.

The code is available in the application attached at the end of this post. Two things which you need to take care if while writing the Servlet. 

1. Give the correct JNDI name as defined in the Weblogic Server. You coud also use DriverManager class if you don't want to create the DataSource. Sample code for DeviceDriver class is attached below.   
   
2. Make sure that you give the correct content type for the response. In the above Servlet, I am using the content type from the value which is stored already in the database. If not available, I am using custom ContentTypes class to derive the content type based on the file name. 
   

• Configure the Servlet in the web.xml. Open the web.xml and add the newly created servlet (ImageServlet). Then add the Servlet mapping (/imageServlet)for this servlet.
  
  
  
  

• Follow the below steps to add the popup feature.

1. Add the Link component as a column in the table. [This is on the assumption that you already have a af:table in your page which displays the data from the table]. Set the Icon property to show a image in that column. Remove the text property.
2. Add a popup component to the same column and set the id property to 'popupImage'
3. Add a panelWindow  to the popup component.
4. Add a inlineFrame to the panelWindow and set the source to the Servlet. Source = '/imageServlet?imageID=#{row.ImageId}'. imageID is the parameter being used in the servlet.  #{row.ImageId} gets the Id value from the VO Row.
5. Add showPopupbehaviour to the Link component and set the PopupId same as the id property of the Popup component 'popupImage'.
   
   
   
   

• Now we can run the page.
  
  
  
  

Sample application can be downloaded from here.

Feel free to point out if anything is missing/wrong in this blog