Preview Oracle cloud storage images in APEX
How to show your Oracle Cloud stored images?
Let's say you wanted to store your images on external storage and that your pick was to use always free ATP environment which comes with equally good 20GB of online space included. This makes it a perfect place for all your APEX application files, images etc.....if you choose not to store them in database or on application servers.
First thing first we have to be able to manage images on the Cloud Storage. Here I will point you to an excellent blog by Adrian Png that covers all steps on how to do this part.
It takes you from creating Cloud credentials all the way to creating APEX application that can upload, download and delete images in your buckets. Thanks again Adrian for sharing.
Today's 2 cent will be in how do we now display these images we uploaded in our reports or even better in an image gallery.
If you have seen my previous post on how to create simple and responsive image gallery in APEX using fotorama.js library today's post will make all the sense. From this point on I will assume you have all these things configured and working.....
Let's first see how would we simply show a preview of an image on page 1 bucket content region which is a classic report based on web source list_objects_in_bucket that we created earlier.
Note here we are assuming that your images are in bucket storage that is not public else you could simply access your images with direct urls. Since private buckets are secured and require authentication we will not be able to use a direct links here.
Firstly lets add a new column to report, there are few ways how we can do this easiest one is to edit the query in Local Post Processing
We are simply rendering a link IMG_URL to page 3 and passing through file name and a bucket name. Page 3 will if you got your download working retrieve the file from the cloud which we will use in our report.
Currently on page 3 there is a before Header process:
which is the same process as original on Adrian's post running web
How does this help? We will change column setting HTML expression of IMG_URL to
Here <img src="#IMG_URL#" /> will do the trick of displaying the image in report column for us. Please note we also need to disable Escape special characters. If you were to have public images this same trick with direct url set in the query above should do the same trick. Difference is that we are using REST calls to authenticate with CI storage.
The result will be that now we have our Cloud images shown in a report.
OK, a small tweak to this would be to turn this report into an image gallery now based on images coming from Oracle Cloud storage. How? We will use same trick as on my image gallery post.
Create a new region as a copy of your classic report, edit its Local Post Processing to
select nvl(LISTAGG('<img src="'Save your change and report should only have IMAGES column now. Edit its HTML Expression to be:
|| APEX_PAGE.GET_URL (
p_page => 3,
p_items => 'P3_BUCKET_NAME,P3_OBJECT_NAME',
p_values => :P1_BUCKET_NAME || ','|| NAME) || '">', ' ') WITHIN GROUP (ORDER BY TIMECREATED)
, 'No data found')
as IMAGES
from #APEX$SOURCE_DATA#
Where NAME like 'test/%' --to filter result set
<div class="fotorama" data-allowfullscreen="true" data-nav="thumbs" data-fit="contain" data-width="100%" data-ratio="800/600" data-minwidth="350" data-maxwidth="350" data-minheight="300" data-maxheight="100%" >#IMAGES#</div>
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js
https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css
Save and run the page. You should see gallery working.
Leaving you with an app preview. Again all credits go to Adrian as his tips did all the heavy lifting. ;)
Happy APEXing,
Lino
Lino
