How to Upload and Dispay Images in Oracle Apex Application

– kamal hossain
dbhossain@yahoo.com

Step : 1

Let us take a look how our final page will look like :

Fig : 1 showing the application final look.

In the above example its a vehicle information of a driver. He has so many vehicles for rent, He wants to upload the
vehicle General informations like ( make, model, lic, reg no...etc) with vehicle picture for passenger's consideration.

To do so we need to follow the below Steps :

Step : 2
DATABASE TABLE : TB_DRVER_VEHICLE

Fig : 2 Database table and it's structure

Let us go to database using SQL plus and create the above table.

In Fig-2 showing the database table structure. Here RWN is the automatic created unique row number , that is defined
as primary key. Here you can change RWN to any desired column name.

Step : 3
Now log in to your Apex Application Workspace and create a new Blank Page and name it to Vehicle List .
After creating new page now get into the page and take a Form Region as shown in Figure -3

Fig-3 : Form region

and press “Next >” button from the top right of the page.

Fig : 4 Form with report

then Click “Form with Report” as shown in Fig -4 and click “Next>” button.

Fig : 5 Select Table Owner (Schema)

Now you have to select database user under where your database table resides. In my example (fig – 5) i have put it
under TAXI database user, now select your database user and press “Next>” button.
 Fig : 6 Database Table

in this page you have to select database table where your image will be uploaded. In my example the database table
name is “TB_DRVER_VEHICLE” now you put your own table name and click “Next>” button.

Fig : 7 Choice of Report page layout

In this page you have to change the following field as shown in the Fig : 7

Implementation : Change from Interactive to Classic

Page Name & Page Title : change it to your way that you want to show, but it is not mandatory in this
stage to change this two field's value.
Now press “Next>” button.

Fig : 8 List of Column

in this page you have to select the column names . You have to select all the columns as shown in Fig – 8

and Press “Next>” button.

Fig : 9 Icon list for details button in the report

in this page you have to select the button icon, this icon will be shown in the report grid and will work with each row to
show the details of every row information for edit or displaying.

Now click “Next>” button.

Fig : 10 form page number and it name & title

in this page you have to set the Form page where you will input the vehicle image and other information.
Change the following field as shown in Fig-10

Page Number : Page number must be the same as you assigned in Fig-7.

In my example in fig-7 it was assigned 27 so, here i have kept the same number 27. It was necessary because in Fig-1
we have shown the final layout.
We want to keep the Input and the display ( report) in the same page. You can put separate page number then you have
to go to other page to view the vehicle image and other information

Now Press “Next>” button.

 Fig : 11
in this page you have to select primary key, i discussed at the beginning RWN is my primary key in the database Table.
So, you select your primary key column and press “Next” button. You need not to put any value on
Primary key column-2 in this example.

Now press “Next>” button.

Fig : 12
in this page you have to select Existing trigger as shown in Fig-12. This trigger generating the RWN column value.

Now Click “Next>” button.

Fig : 13
in this page you have to select the column name, select all column that listed as shown in fig-13 and click “Next>”
button.

Fig : 14
In this page set all the action button property “Yes” as show in Fig- 14 and click “Next>” button.

Next page you will shown the Form and Report page confirmation, Now click “Finish” button.
Now go inside your application page, in this example my page is 27.

Fig : 15

Now you can see two Regions created

10 : New vehicle
10 : Vehicle List
10 – 10 this is sequence value of the regions,
( in your case it may show same or different number other than 10 -10)
in the fig-15 it is showing 10 for both region, you have to change to make it unique. Click “vehicle List “ region and
change the “Sequence” filed value 10 to 9 then Apply changes.

Now you will notice “Vehicle List “ region staying top over “New Vehicle” Region. I have done this because according
to our final looking we want to put report top and editor just below of it.

In this stage if you run the Application your page will be look as shown in Fig- 16
Fig : 16

Now in your page go to the Buttons section as shown in Fig-17, here you will see 2 create button has been created.
Change the button level that is under “Vehicle List” region to “New Car”

Fig : 17
Now click “create” button of under “Vehicle list” region and go the property of “ Text label / alt” and change the
property value “create” to “New Car”. Then Apply changes.

Now go back to page and take a look to the Button section and you can see the changes that you have done.

Now if you want to apply the look and feel as we have decided in fig-1 then we have to place all the the Text filed's
position of the “New Vehicle” region from vertical to horizontal.

To do so, go inside the page and then go to the items section as shown in fig-18. You can see two up and down arrow
as showing in fig-18. Now click this arrow.

Fig : 18

when you click that arrow you will see a popup window and that is shown in fig-19
fig – 19

now you can see in the fig-19 there is a column named “New Line”

now you have to put the second row to last row new line = No
then you will be able to set the property of those text filed horizontally instead of vertically as shown in fig-20

Fig : 21

in the fig -21 i have changed the label also. You can change respective field label as your own way.

In this stage if you run the application then you can see all the new vehicle fields are placed Horizontally.
But field width too long that not adjusted with page width.

Now you can change the field width. Now click each field under “new vehicle” region except RWN and User Name.
Now change the width property to 12 and Apply changes one by one.

After changing the field width property you can run the page and see we are almost close to our desired look.

Now click the user name field and go to its property of “Display as “ and make this value “hidden”
we dont want to make in use in this example, if you want you can keep it.

Now similarly go to the property of “Display as “ for Aircon filed and set this value “Select List”
and set below property
Display extra value : No
Display NULL value : Yes
Null display value : - SELECT-
List of values definition : STATIC2:YES;Y,NO;N
and press “Apply Changes”

run application and you will notice air condition filed has been changed to Select List and Yes and No two property
added.

Now go back application page and click the vehicle list region and click report attributes from the second top and you
will see then fig-22

Fig : 22

from here you can change the label of Column heading and change the column show , here you uncheck the checkbox
of username and for this in the run time this filed will not be appeared.

Now run the application and enter data for vehicle and its image and press create button.

And you will see the records that i have added in this case in the fig - 23

fig : 23
in the fig-23 all values showing in he report instead of image.

Now go back to the page then click vehicle list region -> Report attributes then go to the CARIMG column and click
the property of “BLOB Download Format Mask” and after clicking a popup window will be appeared
as shown in fig – 24
in the popup window keep the value as shown in fig-24 and press apply

Fig : 24

now to go the new vehicle region and go the property of Carimg ...file browse filed ->
property of storage type = BLOB column specified in item source attribute.
Now apply changes.
Now you have to run the application but in this stage you will not shown the image in the report.
Now you have to create another vehicle record and browse file and select an image and press create
button, you will see the image showing in the report but size is too big.

Now we have to formate the image so that it shows as thumbnail view according to our desired
layout.

Now click vehicle list region and go to its Region source property as shown in fig – 26

fig : 26
now copy the below query source code and paste it directly to the region source
and apply changes.

--------------------------------------------------------------------
select RWN,
USERNAME,
CARMAKE,
CARMODEL,
NOSEAT,
DECODE(AIRCON,'Y','Yes','N','No') as AIRCON,
REGNO,
decode(nvl(dbms_lob.getlength(CARIMG),0),0,null,
'<img style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius:
4px;" '||
'src="'||
apex_util.get_blob_file_src('P27_CARIMG',RWN)||
'" height="75" width="75" alt="Product Image" title="Product Image" />')
detail_img
from TB_DRVER_VEHICLE
----------------------------------------------------------------------

Note : here P27_CARIMG is due to my page no is 27, if your page no is different other than 27 then
please change it to PXX_CARIMG

Now click the vehicle list region -> Report attributes -> detial_img column
the set the display as property to “Standard Report Column”
Apply Changes

Now run the application and you will see your desired page.

Thank you for Your patience

- kamal hossain