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.
7 Comments
Please share how to create restful webservice in oracle apex. Please share
ReplyDeleteOk and thanks for your valuable comment.
Deletewhat about if the blob (pdf) is stored in a column in a table?
ReplyDeleteI request to you please watch video again there I am previewing pdf from table in the region.
Deletewhat if the blob (pdf) is stored in a column in a table in APEX?
ReplyDeletehello
ReplyDeletei 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
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.
DeleteIf you have any doubts, Please let me know