Oracle APEX - How to Create a File Preview Functionality

Hi everyone, welcome to my channel! My name is Magaly, I'm an Oracle APEX Developer, passionate about JavaScript, CSS, and of course Oracle APEX!

In this tutorial, I walk you through creating a File Preview, without using any JavaScript libraries or plug-ins. Just with a bit of JavaScript and the use of only one HTML tag. We also talk about what Promises are and how to use them!

This approach works with various file types like images, pdfs, multimedia files, etc (please note that there are some file types that might not be supported).

- Topics Discussed:
0:00 Intro
0:40 Use Case
1:15 Preview & Download Buttons Creation
3:52 Creating our Preview Region
6:10 Creating our Dynamic Action
7:16 Promises Overview
8:12 Preview Functionality (JavaScript)
15:10 Conclusion

(Approach compatible with the latest APEX versions - in video using version 22.2.1 for reference).

[pvrmsc]

Great... thanks a lot for your tutorial, After uploading the completed file in my workspace and trying to run and enter the user name and password it's not allowing please can you check.

[mohamedsameer]

Great thanks for this tutorial. Can you please make a video for PDF report generation based on sql query and custom template without any reporting tools. Mainly the file should be downloaded or send as an email attachment.

[skamransajjad]

Can you change the resolution of your videos? the fonts are so small to read, especially for me with weak rear eyesight.

[jporrata]

Hi Magaly, Nice tutorial, However am having problem with calling the add image modal page and getting back to the normal page. When I refresh the report the preview button does not work at all. I need to submit the page in order for the button to work again. Am I missing something? Thanks for any help you can give on this.

[skamransajjad]

How to preview the file in new tab instead of the model dialog?

[ik_vlogs]

How can display a file from a file system/directory in apex?

[xoldmanit]

Hello, I saw the file preview video, it was very good and useful, I have two questions
First, can this method be used to preview Windows office files?
Second, is it possible to open and edit the file with Office and save it in Blob?

[md.manjurmurshed]

Good Job carry on..I am waiting for the next tutorial

[yakaka]

Multiple Issues. Unable to login after import. Page item not found. Display error on APEX.GET_URL

[rmathew]

if multiple files attached, using Preview region with Inline-Dialog template is not opening respective attached files. It opens the previous attached file. Instead of Inline-Dialog, if used other templates then it opens respective attached files. Any solution?

[juancarlosarce]

can you help me? (It doesn't work when previewing pdf documents when installed as PWA) Any solution?

[chetanghogale]

I tried this it supports image and pdf but I want it support Excel and word files. Can we make it work. If yes please let me know the process. Thanks. This session was very helpful

[ar]

can we open Excel file or Word file or txt file etc. also?

[mitrutene]

Hi. Where can I find the CSS for your defined classes?

[youshark]

Thank you,
you are amazing.
Life is Good with YOU.

[fdellipriscoli]

great tutorial I will try it on my workspace and use it for my daily work. Thanks!!!

[Mrsurajahuja]

Hi When i am using this i am getting Fetch api can not suppor javascript scheme. The apex_page.get_url is giving me the value starting with how do i resovle that

[GS-hczp]

Hi Magaly, thanks. I implemented view pdf in my project following your tutorial, however issue i am getting is that pdf size is smaller and not fitting the pop up window size. what i am missing?

[CarlosRomero-ryrp]

Hello,
The function works fine on a normal page.
But in a MODAL page it does not work and generates errors

[vladimirtrajkoski]

what is username and password to sign in to application?