How to Preview Image Before Uploading in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial post, We will explore about the how to preview image before uploading in Oracle APEX.

Preview Image is a very important feature added to your application. If you have features like a preview image before upload then the user can easily check that he is uploading a correct image or not.

Preview Image Before Uploading in Oracle APEX

Basically, I am using some javascript code for archive preview image before uploading. I will give you a suggestion if you have some knowledge of javascript then you can easily understand the below code.

To follow the below steps for implementing a how to preview image before uploading in Oracle APEX.

Step 1:- you have to create a file browser item on your page you have to create a file browser item on your page and add the below code into the post text section.

  

<canvas id="image-preview" width="100" height="50"></canvas>

See the below screenshot for a better understanding.

Step 2:- After the creation of the P2_UPLOAD_IMAGE item, you have to create a dynamic action on the P2_UPLOAD_IMAGE item. Please follow the below instruction for creating dynamic action. For more understanding, you can follow the below screenshots.

Identification:- Upload And Preview Image

Event:- Change

Selection Type:- Item(s)

Item(s):- P2_UPLOAD_IMAGE

Step 3:-After creating the dynamic action now you have to create true action on that dynamic action and follow the below instructions. For more understanding, you can follow the below screenshots.

Identification:- Action>Exectue Javascript Code

Code:-

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 = "50px";

  } 

  canvas.width = img.width;

  canvas.height = img.height;

  ctx.drawImage(img, 0, 0);

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

}

This is how can you preview image before uploading in oracle apex with the help of javascript. you can also change the javascript code as per your requirements.

If you like this post then please share, subscribe and comment also.you can also watch the preview image before uploading the video in the youtube link below.

https://www.youtube.com/watch?v=XTao_pQALLg