Added : February 5th 2024
On a recent customer project I was able to use Oracle APEX 23.2.2 which has a significant number of new capabilities. One facility was the new Image Upload, which provides a wide range of options to allow users to easily take/select images and crop, format and upload and then tag them to records in a bespoke application.
As an example, let’s start with looking at the new “Image Upload” page item.
Let’s set some values, starting with a display as “Block Dropzone”. There are various options to select different dropzones or file browsers.
We can actually run this now and we get to see this highly functional page item.
OK – but what was the point of the “Capture Using” setting then? Well, if APEX detects it is running on a mobile device, then if you specify Main Camera or Selfie Camera in the settings, then that camera will be used as default – although once control is passed to the mobile device then either camera can be toggled. In “desktop” mode this setting has no effect, you can only select existing files. e.g.
If I run the application on my iPhone, and by that I mean just accesing it via the browser, it does not have to be run as a PWA, and I press “Choose Image” I get to see something quite different. Me …well – I get to see the camera I selected, which is the Main Camera, but I can use the phone to swop to another camera and take a picture with the Selfie camera even if that was not the camera defaulted.
Lovely. I can then chose to “retake” or “Use Photo”. If I accept what I have then control is returned to APEX and that image is then displayed. Note that the default image size is circa 1.6MB.
Note that if we change from the block dropzone to Icon Dropzone we get an extra “Preview Size” parameter which is set to “Auto”.
If we change that to “extra large” then we can show different sized thumbnail images – this may be useful for you depending on the images you are working with.
On thing that is certainly a great feature is the ability to turn cropping on. This is not a plugin, but a native feature of APEX 23.2 and it’s quite a useful facility to allow the user to edit their images prior to uploading. If we turn cropping on, the we can see a selection of Aspect Ratios that we can select. We’ll keep ours at “Original” and show the cropping in action when we select an image.
My image is now displayed in an editor when I select it.
I’ll use the new APEX facility to crop out some of my background.
As well as being able to crop the images, we can also set some restrictions on size, both width and height in pixels, and physical file size. If we set a maximum file size, then APEX will automatically scale the image to fit the maximum we set.
Here I have set it to 100 KB and so when I do the upload APEX will take care of this for me. We can see that it is managed to scale it down to from 1.6MB to just 96.31 KB, based on the maximum 100 KB limit I specified.
Let’s see what the results look like. By default the images are stored in APEX_APPLICATION_TEMP_FILES – though we can use page processing to store the images in a BLOB in a custom table of course.
I query the table with a classic report to show an uncropped image and also a cropped one so we can see the difference. Both are running with the compression at 100KB.
There is also the facility to upload multiple files too, should that be needed for your use case.
In summary, this is an excellent enhancement to Oracle APEX for those needing to take, crop, resize and load images.