⚡ Instant File Preview in Oracle APEX Without Page Submit

-

🚩Introduction 

  • In modern Oracle APEX applications, it is important to make file handling smooth and easy for users. One useful feature is showing a file preview during upload without submitting the page. This allows users to quickly check images or PDF files before saving them.

  • Instead of waiting for a page reload, users can instantly preview the uploaded file using an iframe and JavaScript. This removes unnecessary page refreshes, making the application faster, more efficient, and easier to use.

📑 Why This Approach Is Needed

In Oracle APEX applications, users often need to upload and preview files like images or PDFs before saving them. Using a full page submit for preview can slow down the process and make the experience less smooth and less interactive.

This approach is useful when:

  • You want to provide instant file preview without page refresh

  • The application needs to feel fast and interactive

  • You want to avoid unnecessary page submissions

  • Better user experience and usability is a priority

  • Files like images and PDFs need to be validated visually before upload 

By using this approach, applications become more interactive and responsive. It also reduces unnecessary server load and provides a modern user experience. Overall, it keeps the implementation simple, efficient, and easy to maintain.

👉 Use Case: Instant File Preview Without Page Submit in Oracle APEX

In Oracle APEX, users often need to upload files like images or PDFs and check them before saving. Instead of submitting the page to preview the file, we can use JavaScript with an iframe to show the selected file instantly on the same page. This avoids page reloads and makes the experience smoother.

In this blog, we will see how to preview uploaded files from a file browse item using JavaScript and display them in an iframe without page submit. This helps users quickly verify their files, improves responsiveness, and keeps the application fast, interactive, and easy to use.

Step 1: 

In the Page Designer, create a region and select the type as Static Content and in the Source section, under the HTML Code, copy and paste the below code.
---- HTML Code for File Preview using iFrame ----

<iframe id="new-file" class="iframe-style" style="width:100%;height:500px;"></iframe>

Step 2: 

Click on the page and in the properties, navigate to the Function and Global Variable Declaration, we need to copy and paste the Javascript code below.
---- Function and Global Variable Declaration for File Preview ----

function getURL(input, iframSrc) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#' + iframSrc).attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

Step 3: 

Now, create the page item and select the type as File Upload.

 Step 4: 

Create the dyanamic action of type Change event for the created page item and create the true action of type Execute Javascipt code and copy and paste the below Javascript code.
---- JavaScript Code to Trigger File Preview ----

var fileInput = document.getElementById("P10_FILE_UPLOAD"); //Replace your Page Item
var file = fileInput.files[0];

if (file) {
  getURL(this.triggeringElement, "new-file") //Pass the Iframe ID
}


Step 5: 

Now save and run the page, you will see the file upload item. Now upload the file and you will see the preview of the uploaded file.




🔥 Conclusion

Thus, in Oracle APEX, files can be previewed instantly without submitting the page by using JavaScript and an iframe. This removes page reloads, improves performance, and makes the experience smoother for users. It also keeps the application simple, fast, and easy to use while handling files more efficiently.


Comments

Post a Comment

Popular posts from this blog

🔍 Extending Smart Search Filter for Multiple Regions

-
Image
🚩Introduction  In Oracle APEX, the Smart Search filter is a convenient feature that allows users to quickly search data in a Classic Report or Cards region without writing custom code. However, this functionality is limited to a single region , which can be restrictive when a page contains multiple regions that should respond to the same search input. In this tutorial, you will learn how to extend the Smart Search filter to work with multiple regions on the same page . We will implement a solution that allows one Smart Search input to drive filtering across multiple Classic Report ,Cards regions etc. By the end of this tutorial, you’ll have a clear, reusable approach for coordinating search behavior across regions, improving both usability and consistency in your Oracle APEX applications without breaking the declarative nature of APEX. 📑 Why Extending the Smart Search Filter Is Needed The built-in Smart Search filter in Oracle APEX works well when a page contains a single sear...
Read more

💡 Designing Dynamic QuickPicks in Oracle APEX

-
Image
🚩Introduction  Oracle APEX provides Quick Picks as a convenient way to allow users to populate page items with predefined values using a single click. While static Quick Picks are useful, real-world applications often require these values to be generated dynamically based on business rules, user roles, or underlying data. This blog explores how to implement Dynamic Quick Picks in Oracle APEX page items , enabling developers to build more intelligent, flexible, and user-friendly forms by driving Quick Pick values directly from database queries and runtime logic.  📑 Why Dynamic Quick Picks Are Needed   Static Quick Picks in Oracle APEX are useful for simple filtering, but Dynamic Quick Picks become essential when: Filter values must be generated at runtime based on current data, user role, or context Applications require data-driven filters instead of hardcoded values The same Quick Picks must adapt across multiple pages or regions Filter options depend ...
Read more

📌Track Active Tab switch in Region Display Selector without any plugins

-
Image
🚩Introduction  In Oracle APEX applications, Region Display Selector components helps to organize multiple regions efficiently. However, APEX does not provide a built-in declarative option to detect which tab is active when users switch between them, making it challenging to trigger conditional logic based on tab selection. This can be solved by creating the custom dyanamic action to capture the tab change. This approach enables dynamic actions like refreshing regions or executing custom logic whenever a tab becomes active, without requiring any plugins. 📑Why It is Essential to Track Tab Selection in Region Display Selector In APEX applications, pages often organize multiple regions under a Region Display Selector to separate content like Details, History, or Reports. While this improves layout, users actions on different tabs often require specific logic to run, such as refreshing a region, loading dynamic content, or updating page items. Without capturing which tab is active, de...
Read more