In this section, we'll learn how to display images in our Oracle APEX application without relying on a page item. This method is perfect for situations where we need to show an image directly from a database table column, a file, or a URL without first loading it into a specific page item. We'll cover how to achieve this using a dynamic action and a PL/SQL procedure, making our application more efficient and flexible. By the end of this tutorial, we'll be able to display images dynamically, improving the user experience and reducing page load times. This technique is useful for reports, dashboards, and custom user interfaces where a static page item isn't the best solution. You can vind a visual solution from here. STEP 1: Create a blank page. STEP 2: Create a region and set it properties like- Name: Emp Type: ...
This feature allows users to upload and save Binary Large Objects (BLOBs), such as images, PDFs, or other file types, directly to a database without requiring a full page reload or form submission. This process is very simple but little bit tricky. By leveraging AJAX and JavaScript, the BLOB data is transmitted in the database table, providing a smoother and faster user experience. You you feel that it will better any type of visual guidance then please follow this tutorial- Insert Image Without Page Submit
Implementing this feature, we need to follow the below steps-Step 1: Create a blank page . In my case, I have created a blank page first and then create region and set it properties as like-
Name : Emp Info
Type : Static Content
Column : 3
Column Span : 8
Template : Standard
Template Options:
Header : Hidden
Item Spacing: Slim
Keep default for others properties
Step 2: Create neccessary page items and buttons.
- P35_LAST_NAME
- P35_EMAIL
- P35_HIRE_DATE
- P35_JOB_ID
- P35_IMAGE_UPLOAD
Create 2 Button
1. BTN_SAVE, 2. BTN_EXIT
Name : INSERT_DATA
Type : Execute Code
Source :
Location : Local Database
Language : PL/SQL
PL/SQL Code:
DECLARE
l_emp_id NUMBER;
BEGIN
SELECT NVL(MAX(employee_id),0) + 1
INTO l_emp_id
FROM emp ;
INSERT INTO emp(
employee_id
, last_name
, email
, hire_date
, job_id
, emp_doc
)
VALUES(
l_emp_id
, apex_application.g_x01
, apex_application.g_x02
, apex_application.g_x03
, apex_application.g_x04
, apex_web_service.clobbase642blob(SUBSTR(apex_application.g_clob_01, INSTR(apex_application.g_clob_01,',')+1))
);
END ;
Step 4: Create 2 javascript function in page level to execute the ajax callback process. Select page and open "Function and Global Variable Declaration" code editor. Paste the below code here-
function readImage(inputFile, callback) {
var inputItems = document.getElementById(inputFile);
const file = inputItems.files[0];
if (file) {
const reader = new FileReader() ;
reader.onload = function(e) {
var blob = e.target.result ;
callback(blob);
}
reader.readAsDataURL(file) ;
} else {
callback(null);
}
}
function saveData() {
readImage('P35_IMAGE_UPLOAD', function (img) {
apex.server.process(
'INSERT_DATA'
, {
x01: $v('P35_LAST_NAME') ,
x02: $v('P35_EMAIL') ,
x03: $v('P35_HIRE_DATE') ,
x04: $v('P35_JOB_ID') ,
p_clob_01: img ,
}
, {
dataType: 'text',
success: function() {
apex.region('display-emp').refresh();
}
}
)
});
}
Step 5: Select "BTN_SAVE" button and create a dynamic action here. Select newly created true action and change it properties like below-
Action: Execute Javascript Code
Code: saveData();
Step 6: Create an interactive Report to display the Stored data. Follow the below steps to create that report. Create a region and set its properties like below-
Name: Display Emp
Type: Interactive Report
Source > Type: SQL Query
SQL Query:
SELECT last_name
, email
, hire_date
, job_id
, '<img src="data:image/jpeg;base64,'||apex_web_service.blob2clobbase64(emp_doc)||'" width="60px" height="60px" style="border:1px solid gray"/>' AS img
FROM emp
Column : 3
Column Span : 8
Static Id : display-emp
That's it. Let's enjoy.
Comments
Post a Comment