Image Preview Before Save on Oracle Apex

Image Preview During Selection on Oracle Apex

Topic Introduction: Image Preview During Selection Oracle Apex, Here we will discuss how to show an Image or Photo at a region on Oracle Apex before saving a selected file on the browse item. The source code and description are given below clearly.

1. Create a blank page

2. Create a region for file browse item

3. Create a sub-region for previewing the browse file.

4. Create a Page Item in the main region

5. Create a Dynamic Action

Event: Change.
Selection type: item(s)
item(s): P113_IMAGE

Action: Execute JavaScript Code

6. Copy and paste the below code on Execute JavaScript code of Dynamic Action

try {

var canvas = $x('image-preview');

var ctx    = canvas.getContext('2d');

var img = new Image;

img.src = window.URL.createObjectURL(this.triggeringElement.files[0]);

img.onload = function() {

  if (img.width > 200) {

   canvas.style.width = "250px";

  } else {

    canvas.style.width = img.width + "px";

  }

  canvas.width = img.width;

  canvas.height = img.height;

  ctx.drawImage(img, 0, 0);

  $("#container-img-preview").show();

}

} catch (e) {

console.log(e);

}

7. Copy and Paste below HTML code on sub-regions Source => HTML Code

<canvas id="image-preview" 

style="text-align: center; 

margin-left: 100px; 

margin-top: 30px;

border: 1px solid black;">

</canvas>

8. Use the below CSS for adjusting the height and width type to Page Properties Inline box:

canvas#image-preview{  

text-align: center;  

margin-left: 100px;  

margin-top: 30px;  

border: 1px solid black; 

 width: 240px !important;

}

Now run the page and select an image to then we will see the selected image in the sub-region.