Preview Blob Column to New Browser Tab in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We are going to see How to Preview Blob Column to New Browser Tab in Oracle APEX.

Actually one of my friend ask me this question that if we upload any pdf or image file in the database table so can we preview that file to new browser tab or not then i have used  below method to preview pdf or image file into new browser tab in Oracle APEX.

Let's understand more about what we did to do for achieving this task. As we all know that every image or pdf file which is available on the internet they have a specific address that means image or pdf file address. If you copy that image address and paste to new browser tab then image becomes display.

As you can see in the above screenshot that image file have a specific image address. Before we are proceeding in this blog post, I will request to please learn first how to make an image or pdf URL in Oracle APEX.

I hope after watching the video of make image url, Now you would have learned make Image URL. The following steps will be help to preview blob column to new tab in Oracle APEX.

Step 1:-Create a Classic or Interactive Report. I am using the EMP Table and I have added blob type column like (image,mimetype,filename) for achieving this task. You can select your required table where you want to do this task.

SELECT
EMPNO,
ENAME,
MIMETYPE
EMPNO AS CLICK_HERE
FROM
EMP
WHERE
ENAME IS NOT NULL
AND MIMETYPE IS NOT NULL

Step 2:- We need  a link in the report for that we will use CLICK_HERE column. Now Go to the preview column property and change CLICK_HERE column type as a Link Column Type after that go to the link properties and add the below given information. I am sharing the below a screenshot for your help.

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

Step 3:-Now we need two page items which will store empno and dynamic URL so create two page item. I am sharing the below a screenshot for your help.

Step 4:- Now we need a click event dynamic action with two true actions where first true action will set the value of empno to the P3_EMPNO and second true action will get that empno number to the variable and (window.open())use the Window interface's open() method to preview blob file.

Dynamic Action Name:-Set Item Value And Preview
When Event:-Click
Selection Type:-Jquery Selector
jQuery Selector:- .click-here

First True Action(Set Value):-

Set Value:-
Execute Javascript:-$(this.triggeringElement).parent().data('id')
Affected Item:-P3_EMPNO

Second True Action(Execute JavaScript):-

Execute Javascript:-
var str = apex.item( "P3_EMPNO" ).getValue();
console.log(str);
window.open('use image url link in below '+str, '_blank');

You can change Jquery class. That's all for today I think (Dynamic Preview Blob Column to New Tab in Oracle APEX) post will helpful for you. If you like this post then share your view in the comment box.

Click here for the DEMO

Watch Oracle Apex Video Tutorial:-