Skip to main content

Oracle APEX: Capture Text File Content in a Page Item

This blog demonstrates how to upload a text file in Oracle APEX and store its contents directly into a page item. Using JavaScript’s file reader API, the file is read on the client side without server upload. Once read, the content is dynamically assigned to a page item, allowing immediate use in forms or processes. 

We can approach this in two ways. First, the text file can have a structured format: the first row contains the name with a colon, the second row contains the email with a colon, and the third row contains the remarks with a colon. When the user uploads this kind of text file, the content is read and the corresponding values are set into the appropriate page items.

Second, we can simply upload any text file, and its entire content is set into a single APEX page item.

I created this blog for learning purposes, to explore the different options we can implement using APEX.

Step1: Create Apex Page with Following components.

P3_File Upload Item

P3_Name Text Field

P3_Mail Text Field

P3_Remarks Text Field

P3_Content Text Area

Submit1 Button

Submit2 Button

Step2: For the first button (submit1), add a Dynamic Action on Click and paste the following code

var fileInput = document.getElementById("P3_FILE");

if (fileInput && fileInput.files.length > 0) {

    var file = fileInput.files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

        var lines = e.target.result.split(/\r?\n/);

        lines.forEach(function(line) {

            var parts = line.split(':'); // split label and value

            if(parts.length >= 2) {

                var label = parts[0].trim().toLowerCase();

                var value = parts.slice(1).join(':').trim(); // in case value has ":"


                if(label === 'name') {

                    $s("P3_NAME", value);

                } else if(label === 'email') {

                    $s("P3_MAIL", value);

                } else if(label === 'remarks') {

                    $s("P3_REMARKS", value);

                }

            }

        });

    };

    reader.readAsText(file, "UTF-8");

} else {

    alert("Please select a file first.");

}

From the above code, you can see that we are setting values to the page items based on the uploaded text document.

Step3: For the first button (submit2), add a Dynamic Action on Click and paste the following code

var fileInput = document.getElementById("P3_FILE");

if (fileInput && fileInput.files.length > 0) {

    var file = fileInput.files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

        $s("P3_CONTENT", e.target.result);

    };

    reader.readAsText(file, "UTF-8");

} else {

    alert("Please select a file first.");

}

From the above code, all the content of the text file is set into the content page item

Step4: Save and run the application.

Demo_Application_Link









Comments

Post a Comment

Popular posts from this blog

APEX - Tip: Fix Floating Label Issue

Oracle APEX's Universal Theme provides a modern and clean user experience through features like floating (above) labels for page items.  These floating labels work seamlessly when users manually enter data, automatically moving the label above the field on focus or input.  However, a common UI issue appears when page item values are set Dynamically the label and the value overlap, resulting in a broken and confusing user interface. once the user focuses the affected item even once, the label immediately corrects itself and displays properly. When an issue is reported, several values are populated based on a single user input, causing the UI to appear misaligned and confusing for the end user. Here, I'll share a few tips to fix this issue. For example, employee details are populated based on the Employee name. In this case, the first True Action is used to set the values, and in the second True Action, paste the following code setTimeout(function () {   $("#P29_EMAIL,#P29_...
Post a Comment
Read more

Oracle APEX UI Tip: Display Page Title Next to the APEX Logo

In most Oracle APEX applications, every page has a Page Title displayed at the top. While useful, this title occupies vertical space, especially in apps where screen real estate matters (dashboards, reports, dense forms). So the goal is simple: Show the page title near the APEX logo instead of consuming page content space. This keeps the UI clean, professional, and consistent across all pages. Instead of placing the page title inside the page body:         ✅ Fetch the current page title dynamically         ✅ Display it right after the APEX logo         ✅ Do it globally, so it works for every page All of this is achieved using:         ✅ Global Page (Page 0)         ✅ One Dynamic Action         ✅ PL/SQL + JavaScript Simple, effective, and reusable. 1️⃣ Create a Global Page Item On Page 0 (Global Page), create a hidden item:      P0_PAGE_TITLE This item wi...
Post a Comment
Read more

Interactive Grid Tips (Part-1)

Selection Toolbar Events Validation Styling Advanced Selection 1 Get Selected Row Primary Key Return selected row PK values to a page item. Two approaches depending on APEX version. Selection APEX 24.2+ Before 24.x Copy // Initialization JavaScript Function function (options) { options.defaultGridViewOptions = { selectionStateItem: "P22_SELECTED_IDS" }; return options; } Copy var ig$ = apex.region( "EMP" ).call( "getViews" , "grid" ); var model = ig$.model; var selectedIds = []; ig$.view$.grid( "getSelectedRecords" ).forEach( function (rec) { selectedIds.push(model.getValue(rec, "EMPNO" )); }); $s ( "P22_SELECTED_IDS" , ...
1 comment
Read more