Preview PDF/Image into a Region in Oracle Apex - Javainhand Tutorial

Oracle APEX Tutorial - Preview PDF/Image into a Region in Oracle Apex

Hello Friends,

In this Oracle APEX Tutorial, I will tell you how can you show blob contents(PDF, Images) into Region in Oracle APEX.

Basically, I have already uploaded a video into my youtube Channel but that video in Hindi So most of the people can't understand that by I am writing this blog.

Let's Start Today Topic.

Preview PDF/Image into a Region in Oracle Apex

Basically Some time we need to Show our Pdf Files and Images into a particular Region rather than we download. It helps to download the right files.

Let's Start Our Implementation, follows the below steps.

Step 1:- Create a simple classic report type region into your page and add a condition that shows only PDF files and Image Files. Below Screenshot will help you.

from EMP
where ENAME is not null
and mimetype is not null
and upper(mimetype) like '%IMAGE%'

After Create Report Region Go to Remove Column and Change Column Property with Link and add a link 

Target URL:- javascript:void(null);
Link Text:- <span class="t-Icon fa fa-eye delete-note" aria-hidden="true"></span>
Link Attributes:-data-id=#REMOVE#

Step 2:-As you have seen in the above screenshot with the red mark also create two hidden items one for store EMPNO and one for store PDF/Image URL.

Step 3:-After Creating items now create one more PL/SQL Dynamic Content region where you want to display PDF/Images. The below screenshot will help you.
Use the Below code into PL/SQL Dynamic Content Region.

v_url varchar2(200):=:P5_PDF_URL;
htp.p('<embed src="'||v_url||'" width="500" height="500">');
You can change Width and Height According to you.

Step 4:-Before the Implement step 4 you have to learn how to make IMAGE URL in Oracle APEX.below Video link will help you.

After learning how to make an image URL in Oracle APEX.
Now Create a Click Dynamic Action
When Event
Selection Type:-jQuery Selector
jquery Selector:- .delete-note

Advanced Change Event Scope Static To Dynamic as you have seen in the above screenshot.

Create the first true action Set Value. The below screenshot and code will help you.
Set Type>Javascript Expression

Create the Second True Action Execute Javascript Code below screenshot and code will help you.

var str = apex.item( "P5_EMPNO" ).getValue();
var str1='here you can pass your image url'+str;
apex.item( "P5_PDF_URL" ).setValue(str1);

Create Third True Action Submit Page below screenshot will help you.

For Demo:-

For Oracle APEX Video Tutorial:-

If You Like This Tutorial Please Like Share And Comment.

Post a Comment


  1. Please share how to create restful webservice in oracle apex. Please share

  2. what about if the blob (pdf) is stored in a column in a table?

    1. I request to you please watch video again there I am previewing pdf from table in the region.

  3. what if the blob (pdf) is stored in a column in a table in APEX?

  4. hello
    i try your solution but it doesn't work

    404 Not Found
    2021-10-14T08:41:24.777Z | 005n^kBEcpcFw0KimTtlWJ0000Ud0001Wa

    The request could not be mapped to any database. Check the request URL is correct, and that URL to database mappings have been correctly configured

    1. ORDS have not configured properly. if you want to check that is this solution is working or not then go to apex.oracle.com if you created already any workspace here then check there.


If you have any doubts, Please let me know