How to insert and show blob images in form and report of Oracle Apex

 ---------------------Source Code-------------------------

CREATE TABLE emp_test (

emp_id number generated always as identity(start with 1 order),

emp_name varchar2(100),

emp_photo blob,

photo_file_name varchar2(100),

photo_mime_type varchar2(100),

photo_last_update timestamp,

constraint emp_test_pk primary key (emp_id) 

);

-------------------show image-------------------

<div class="img-box">

    <img src="" alt="Photo" id="preview_img_id" />

</div>


-------------------css code---------------------

.img-box {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}


.img-box img {

    width: 120px;

    max-height: 130px;

    min-height: 100px;

    border: 1px solid #ddd;

    padding: 5px;

}


--------------------Report----------------------

select 

       decode(nvl(dbms_lob.getlength(EMP_PHOTO),0), 0, null,

       '<img src="'||apex_util.get_blob_file_src('P15_EMP_PHOTO', EMP_ID)||'" id="emp_img_id" />') photo      

  from EMP_TEST

  where EMP_ID = :P15_EMP_ID





Comments

Post a Comment

Popular posts from this blog

How to create and show html report by ajax callback and print report in Oracle Apex

Image
 Codes related to the tutorials ==========================HTML Code======================= declare cursor c1 is select rownum sl, item_name, item_no from items where cat_id = apex_application.g_x01 and item_type = apex_application.g_x02; begin htp.p(' <div id="print_area"> <div class="rpt-main"> <div class="rpt-header"> <h2>ABC COMPANY LIMITED</h2> <p>Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</p> </div> <div class="rpt-content"> <span>'||get_category(apex_application.g_x01)||' Report</span> <table class="rpt-tbl"> <thead> <tr> <th>SL#</th> <th>Item Name</th> <th>Item No</th> </tr> </thead> <tbody>'); for i in c1 loop htp.p('<tr> <td>'||i.sl||'</td> <td>'||i.item_name||'</td> <td>'||i.item_no||'...
Read more

CRUD Operation from HTML

Image
 -----------------------------CRUD OPERATION from html------------------------- ----------------------------html template-------------------------- <!DOCTYPE html> <html>     <head>         <title>Personal Information</title>         <!-- Latest compiled and minified CSS -->         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />         <style>             .main-container {                 margin: 0 auto;                 display: flex;                 flex-direction: column;             }             .section-top {                 width: 600px; ...
Read more