Before Upload Image, Preview and Get Details Information on Oracle APEX

Image uploads are a common requirement in many Oracle APEX applications, whether you're building employee management systems, product catalogs, customer portals, or document management solutions. Providing users with an image preview and displaying file information before the upload significantly improves the user experience and helps prevent accidental uploads.

In this article, you'll learn how to implement an image preview feature and display important file details such as the file name, size, type, and dimensions before uploading the image in Oracle APEX.

Advantages

• Improves user confidence by confirming the correct file was selected.
• Reduces mistakes caused by uploading the wrong image.
• Displays useful file information before submission.
• Enhances the overall user experience.
• Enables client-side validation before the upload process.

Information You Can Display

Before uploading the image, you can present the following details:

• File Name
• File Type (MIME Type)
• File Size
• Image Width
• Image Height
• Image Preview

These details are available directly from the browser using JavaScript, so no server processing is required.

Benefits of This Approach

• Instant image preview without uploading the file.
• Faster user feedback.
• Reduced unnecessary server requests.
• Better form validation.
• Improved usability for desktop and mobile users.

Common Use Cases

This feature is useful in applications such as :

1. Employee Profile Management
2. Product Management Systems
3. Customer Registration
4. Student Information Systems
5. Inventory Applications
6. E-commerce Platforms
7. Document Management Systems

👉 Working Process

• Step 1 : Create the following two page items.

1. P92_BLOB_CONTENT
   • Type: File Upload
   • Display As: Inline File Browse
   • Storage Type: BLOB column specified in Item Source attribute
   • MIME Type Column: (Specify your MIME type column)
   • Filename Column: (Specify your filename column)
2. P92_BLOB_INFO
   • Type: Text Field
   • Pre Text:

   
   
   <div id="container-img-preview" style="display:none; text-align:center;">
       <canvas id="image-preview"
               width="100"
               height="100"
               style="border:1px solid black;
                      box-shadow:0 0 5px 2px #0000ff8c;
                      border-radius:8px;
                      animation:breathingGlow 2.5s ease-in-out infinite;">
       </canvas>
   </div>
   
   <div id="file-info"
        style="padding-left:20px !important;
               font-weight:bold;
               color:blue;
               user-select:none;
               -webkit-user-select:none;
               pointer-events:none;">
   </div>
   
   <style>
   @keyframes breathingGlow {
       0%,100% {
           box-shadow: 0 0 5px rgba(0,123,255,.4);
           transform: scale(1);
       }
       50% {
           box-shadow: 0 0 22px rgba(0,123,255,.9);
           transform: scale(1.02);
       }
   }
   </style>
   
   

• Step 1 : Create a Dynamic Actions on Change Event of Item P92_BLOB_CONTENT

1. Dynamic Actions
   • Event: Change
   • Selection Type: Item(s)
   • Item(s): P92_BLOB_CONTENT
2. True Action
   • Action: Execute JavaScript Code
   • Fire on Initialization: On
   • Code:

     
     var fileInput = document.getElementById("P92_BLOB_CONTENT");
     
     if (fileInput.files.length > 0) {
         var file = fileInput.files[0];
         var fileName = file.name;
         var fileSize = file.size;
         var fileType = file.type;
     
         var fileSizeReadable = (fileSize / 1024).toFixed(2) + " KB";
         if (fileSize > 1048576) {
             fileSizeReadable = (fileSize / 1048576).toFixed(2) + " MB";
         }
     
         document.getElementById("file-info").innerHTML =
             "File Name : " + fileName + "<br>" +
             "File Type : " + fileType + "<br>" +
             "File Size : " + fileSizeReadable;
     
         if (file.type.startsWith("image/")) {
     
             var canvas = $x("image-preview");
             var ctx = canvas.getContext("2d");
             var img = new Image();
     
             img.src = URL.createObjectURL(file);
     
             img.onload = function () {
                 if (img.width > 200) {
                     canvas.style.width = "100px";
                 } else {
                     canvas.style.width = img.width + "px";
                 }
     
                 canvas.width = img.width;
                 canvas.height = img.height;
     
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(img, 0, 0);
     
                 $("#container-img-preview").show();
                 apex.item("P92_BLOB_INFO").show();
                 URL.revokeObjectURL(img.src);
             };
         } else {
             $("#container-img-preview").hide();
             apex.item("P92_BLOB_INFO").hide();
         }
     
     } else {
         document.getElementById("file-info").innerHTML = "";
         $("#container-img-preview").hide();
         apex.item("P92_BLOB_INFO").hide();
     
     }
     

Demo Output