How to insert Image into database without page submit in Oracle Apex

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

Step 3: Create Ajax callback function to insert data into database table. Select Process tab from the left side pane and select Ajax callback. Right Click and select "Create Process".

Set the below properties of newly created process:

    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.