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

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.

select 

EMPNO,

ENAME ,

mimetype,

 EMPNO as REMOVE

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.

declare

v_url varchar2(200):=:P5_PDF_URL;

begin

htp.p('<embed src="'||v_url||'" width="500" height="500">');

end;

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
Event:-Click
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
$(this.triggeringElement).parent().data('id')

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

var str = apex.item( "P5_EMPNO" ).getValue();
 console.log(str);
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:-
https://apex.oracle.com/pls/apex/f?p=81446:5

For Oracle APEX Video Tutorial:-

If You Like This Tutorial Please Like Share And Comment.