Skip to main content

Inline Attachments for Oracle APEX Emails

Prior to APEX 21.2, when you add any attachments to APEX email using apex_mail.add_attachment procedure, then those attachments are always added with  Content-Disposition as attachment. This behavior can be verified when we view the received emails as plain text, For e.g. refer to the below screenshot of an email taken using the "Show Original" option in the Gmail web client.

Content-Disposition as "attachment"

APEX 21.2 has introduced a new feature that enables us to send attachments as inline attachments. There is a new parameter p_content_id added to apex_mail.add_attachment procedure. We can specify content_id for attachments and we can use this content_id to refer to the image in cid: scheme in img tags of HTML emails.

In one of my previous blogposts, Including Images in Oracle APEX Emails, I have discussed a few options using which we can include images in emails. One of the options is attaching images to an email and referring to attached images by file name in cid: scheme. This works in desktop email clients, but not in web email clients like Gmail. The reason is, APEX was always using Content-Disposition: attachment; for all attachments and there was no way to change it. Now, in APEX 21.2, when we specify p_content_id for any attachments, APEX will specify Content-Disposition as inline for those attachments and it will also specify the Content-ID. This change enables embedding images in email content in more reliably way and it would work in all email clients that support cid: scheme approach.

Content-Disposition as "inline"

So, let's build a quick demo page to test this new feature.

  • Create a new page and add a text item. In the demo, I have created page 42 and the item name is P42_EMAIL_TO. We will use this text item to enter the email address.
  • Add button next to the text item. Ensure, Button > Behavior > Action is set as "Submit Page". In the demo, I have created a button with the name SEND_EMAIL.
  • Upload any image file that you want to include in the emails to the "Static Application Files" section. In the demo, I have uploaded a file with the name ironman.jpg
  • Create a page process as below
    • Name: Testing Inline Attachments (or any other proper name)
    • Type: Execute Code
    • Server-side Condition
      • When Button Pressed: Select SEND_EMAIL button.
    • Source
      • Language: PL/SQL
      • PL/SQL Code: As below
    l_body        CLOB;
    l_body_html   CLOB;
    l_img_html    CLOB;
    l_id          NUMBER;
-- build html email body
    l_body_html := '<!DOCTYPE HTML>'
                   || '<html>'
                   || '<head>'
                   || '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'
                   || '<meta name="viewport" content="width=device-width">'
                   || '</head>'
                   || '<body style="background-color: #efefef; line-height: 1.5;">';

-- sending image as CID attachment
-- observe image src attribute src="cid:ironman.jpg"
-- email client will get the image from email attachments based on the content id specified
    l_img_html := '<h1>Below image is sent as inline attachment using 21.2 new inline attachments feature.</h1><img src="cid:ironman.jpg" alt="ironman"/>';
    l_body_html := l_body_html || l_img_html;
    l_body_html := l_body_html
                   || '</body>'
                   || '</html>';
    l_body := 'Please use HTML enabled email client to view this message.';
    l_id := apex_mail.send(
        p_to          => :P42_EMAIL_TO
        ,p_from        => ''
        ,p_body        => l_body
        ,p_body_html   => l_body_html
        ,p_subj        => 'Images as inline attachments'

-- here I am taking one image from "Static Application Files" uploaded in shared components 
-- p_content_id value should match with CID value specified at img src
-- p_content_id is new parameter added in APEX 21.2
    FOR img IN(
            filename = 'ironman.jpg'
            AND flow_id = :APP_ID
            p_mail_id      => l_id
            ,p_attachment   => img.blob_content
            ,p_filename     => img.filename
            ,p_mime_type    => img.mime_type
            ,p_content_id   => 'ironman.jpg'
-- optionally push email

Here is the link for the demo.

Thank you.


Popular posts from this blog

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ

Few tips on Gantt Charts

Oracle APEX offers several beautiful chart types which are based on Oracle JET Data Visualizations. Gantt Chart is one such beautiful and useful chart. However, when I have searched in Google for some help on Gantt Charts, there are not many blogs posts talking about it. So, I thought, I could write one with few basic tips which I have learned this year. I have used Gantt Chart to display employees calendar data and my targeted output was something like below. Pic-1 Looks simple, correct? However, it's little tricky to get there. Multiple Tasks Per Row: When I look at the output, first I thought, I will have to write a query which gives tasks data and employee data with 1 row per task. That is, if there are 10 tasks to be displayed, then there should be 10 rows in SQL query output. But, it's not correct. Instead, I should have 1 row for each task + 1 row for each employee (parent). So I need to write a query which will output data in below format. Pic-2 A