Ticker

6/recent/ticker-posts

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.

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.

Post a comment

5 Comments

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

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

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

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

    ReplyDelete

If you have any doubts, Please let me know