Upload and View a File (image/pdf/doc) in a List of Oracle Apex Page

Uploading and viewing a file (image/pdf/doc) in the Oracle Apex page is sometimes problematic if we miss steps that we should do. But this is very easy and simple thing as I have experienced. I have kept the process in very easy 8 steps, kindly go through them, they are really easy and will take few minutes only!

1. INSERT 5 FIELDS IN DATA FOR FILE UPLOADING:

When we have decided to uplaod a file, we should have few db columns in our table:


FILE_LOB
FILE_NAME
FILE_MIMETYPE
FILE_UPDATEDATE
FILE_CHARACTERSET

here, the file_name is for holding the full image name (with extension) and file_characterset is used for determining whether it is a 32 bit or 64 bit characterset file.

2. FILE_LOB data type is BLOB OR CLOB?

generally, BLOG is used for binary files (pictures) and CLOB is used for character type (essay or sth like that)

3. what’s next? CREATE A PAGE

Now, do the following to create a page:

Create Page –> Forms — > Forms on a Table with Report –>
–> (write page name) –> (Write the table name) –>
–> (use a tab, write a tab name) –> select all columns (take all in the right box) –>
–> Next (select any edit button) –> Write a Page name –>
–> Manage by Database ROWID –> SELECT ALL (columns) –>
–> (insert,update,delete) Yes –> CREATE –>
–> RUN PAGE

4. EDIT THE PAGE

Now, to edit the page, click the bottom EDIT PAGE # link. now, double click on the REPORT NAME (visible at left side) in the content list of the page.

in the REGION SOURCE, there is a code. copy-paste the following code segments in place of dbms_lob.getlength(“FILE_LOB”) “FILE_LOB”,

dbms_lob.getlength("FILE_LOB") "FILE_LOB",
decode(nvl(dbms_lob.getlength(FILE_LOB),0),0,null,
'<img style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;" alt="" width="75" height="75" />')
detail_img,

    ## NOTE : in place of ‘P16_FILE_LOB’ you have to put page number of the page where the image is being uploaded. like, if your image upload page is Page No 7 then it will be ‘P7_FILE_LOB’

now, save this updates, CONFIRM SAVE.

5. EDIT REPORT ATTRIBUTES

double click on report name again and edit column attributes, select for

    Detail Image –> Standard Report Column

now save the updates.

6. SHOW IMAGE IN REPORT COLUMN

in the report page, select, ACTIONS and then SELECT COLUMNS. select DETAIL IMAGE to the right box with “>” and then save it.

7. LAST STEP: SELECT A ROW TO EDIT

click on edit button to edit data of any row.
click on ‘SHOW EDIT LINKS’ at the right bottom corner of the page.
click on the edit button at DOWNLOAD option.
A pop-up will come for EDIT PAGE ITEMS. find the SETTINGS, segment in that page. now in the following options, copy paste the Database fields of respective attributes.

MIME Type Column == FILE_MIMETYPE
Filename Column == FILE_NAME
Character Set Column == FILE_UPDATEDATE
BLOB Last Updated Column == FILE_CHARACTERSET

click on APPLY CHANGES.

8. UPLOAD A FILE AND VIEW IT IN THE GRID:

now upload a file in edit page of a row and then view the uploaded image/pdf/doc from the list in the grid. Hope it worked for you. have a nice day!

5 thoughts on “Upload and View a File (image/pdf/doc) in a List of Oracle Apex Page

  1. When i upload an image, it works. But when i upload any pdf or doc, it doesn’t show up 😦

    Can you please help me to rectify this issue. Its kinda urgent requirement from client. Appreciate your help at earliest

  2. PLease explain this part further:
    in the report page, select, ACTIONS and then SELECT COLUMNS. select DETAIL IMAGE to the right box with “>” and then save it.

  3. Mr. Faisal,

    Congratulations for these valuable orientations.
    I suppose the FILE_LOB field is a BLOB type?
    It’s ok for images, but I’m triyng to make a interactive report, on APEX 5.0.3, that exhibit a PDF as a display image field. It is possible?

    Regards,

    José Gustavo Lima

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s