Skip to main content

Command Palette

Search for a command to run...

The 🆕 Way to In-Line Files with APEX

Updated
•2 min read
The 🆕 Way to In-Line Files with APEX
J
Hi, thanks for stopping by! I am focused on designing and building innovative solutions using AI, the Oracle Database, Oracle APEX, and Oracle REST Data Services (ORDS). I hope you enjoy my blog.

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!

P

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

S
sssuarez1y ago

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

T

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

1