Preview an Image Before Upload Oracle APEX

April 15, 2020Posted inAPEX
Preview

Sometimes we face the requirement like how to show the image before image upload. There are some easy steps to preview images before upload.

  • Create a blank page with two region. One for file browse option and second is sub-region for showing images. 
  • Create a Page Item on change event dynamic action:
Event=>Change.
selection type=>button
Action=> Execute JavaScript Code
  • Copy and paste the following code on Execute JavaScript code and also define affected elements in this solution as per screenshot.
Copy Code
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);
}

  • Copy and Paste below HTML code inside the second sub-region:
Copy Code
<canvas id="image-preview" 
style="text-align: center; 
margin-left: 100px; 
margin-top: 30px;
border: 1px solid black;">
</canvas>

  • Use below CSS for adjusting the height and width:
Copy Code
canvas#image-preview{  
text-align: center;  
margin-left: 100px;  
margin-top: 30px;  
border: 1px solid black; 
 width: 240px !important;
}


Demo

You might like:

Tags: