Skip to main content

The 🆕 Way to In-Line Files with APEX

Published 2 min readMarkdown
Part of seriesOracle APEX Shorts
The 🆕 Way to In-Line Files with APEX

Introduction

I love finding new ways to do things in APEX. Recently, I was required to do an in-line preview of PDF files for an Archival system file I was working on. I started using my previous approach of an iframe and remembered that APEX 24.1 introduced Declarative File Download Support. Maybe I could use that to do an in-line preview?

👉
In this post, I will show you how to preview files in the browser with just an SQL statement!

Declarative File Download

The requirement was to allow users to download or in-line preview attachments for archived invoices. Using the APEX Content row Region type, I built a nice UI to show available attachments.

Download

The Action for the download icon populates a page item P12_DL_FILE_ID with the ID of the selected file.

Oracle APEX Declarative File Download Action

Page Item P12_DL_FILE_ID has a dynamic action with an Action of ‘Download’:

Oracle APEX Declarative File Download Action Dynamic Action

  • View File As ‘Attachment’ causes the file to be downloaded.

  • If you select ‘Multiple Files’, files are exported as a zip file.

  • The SQL query must have three specific columns: the file BLOB content, the file name,,, and the file mime type.

  • In my example, the files are stored in Oracle OCI Object Storage. The function oci_utl_pk.get_file fetches the file from Object Storage and returns the BLOB content.

In-Line Preview

We need to create a new modal page to get an in-line preview. The drawer style is quite effective, especially for PDF files, as it shows the document on a full-height modal page.

Oracle APEX File In-Line Modal Page

Create a page item with a dynamic action:

Oracle APEX File In-Line Dynamic Action

  • Use the ‘Download’ action again.

  • This time, choose ‘Inline’ for ‘View File As’ property.

  • The SQL query does not change.

  • Ensure that the dynamic action is fired on initialization so the file is loaded as soon as the modal opens.

💡
If the file cannot be viewed in-line in the browser, e.g., ZIP, Word, Excel, or PowerPoint, APEX will download it instead of displaying it in-line.

Conclusion

Sometimes, it is the small things that make our lives easier as developers. One of those things is downloading and previewing files in line with just an SQL statement!

About the author

  • I’m Jon Dixon, an Oracle APEX developer and consultant at Cloud Nueva. I write about APEX, ORDS, the Oracle Database, and how AI is changing the way we build software. This blog is where I share practical examples, lessons learned, and ideas from my work.

Works perfect!!! Thanks for sharing it.

Jon Dixon This is very useful and informative blog. Thanks for sharing it.

I have implemented the same in my application. But when I preview the PDF file withing a Drawer and when I try to close (X icon) the drawer I see the below javascript error and it wont close. Any idea how to fix this? This happens in my Mozilla browser. In Chrome it works fine.

Uncaught DOMException: Permission denied to access property "apex" on cross-origin object pe https://feuqalhqafx5hod-sodadevdb.adb.us-ashburn-1.oraclecloudapps.com/i/24.2.0/apex_ui/js/minified/devToolbar.min.js?v=24.2.0:4 fe https://feuqalhqafx5hod-sodadevdb.adb.us-ashburn-1.oraclecloudapps.com/i/24.2.0/apex_ui/js/minified/devToolbar.min.js?v=24.2.0:4

Ssssuarez1y ago

This is so useful. Going to go add it to some of my client's exisitng APEX apps. TY.

on friday i does this with a application process and now .. i changed it in this way ! many thx

1