Implementing Profile Photo feature for Oracle APEX apps

Letting your users upload their profile photos/avatars to your APEX app is definitely a great way to improve your application. In this post, I will explain step-by-step, how to implement this.

First, you should have a CLOB column on your users table. Afterwards, on the user details page, synchronize page item for your User details Form region. I have my new column as page item "P65_PROFILE_PHOTO" and set its type to "Display Image". Then, we need a static content region on the user details page with the source HTML code:

<style> 

.ea-topnav-avatar {

    width: 22px; 

    height: 22px;

    border-radius: 50%;

    object-fit: cover;

    display: block;

    border: 1px solid #dcdcdc;

}

.ea-edit-profile-header {

    text-align: center;

    padding: 20px 0;

    margin-bottom: 20px;

}

</style>

<div class="ea-edit-profile-header">

    <div class="ea-edit-avatar-container">

    </div>

/* P65_PHOTO_DROPZONE is auto generated DOM element based on the page item P65_PHOTO. If you have a different name for your page item, change below as "YOUR_ITEM" +  "_DROPZONE" */

<button type="button" class="t-Button t-Button--icon t-Button--secondary" 

        onclick="$('#P65_PHOTO_DROPZONE').click();">

    <span class="fa fa-camera" aria-hidden="true"></span>

    <span class="t-Button-label">Change Photo</span>

</button>

</div>

In that static content region, add 2 page items:

P65_PHOTO is of type "File Upload" and P65_PHOTO_BASE64 is of type "Textarea" .

Now, we need another static content region on the page: "Photo Crop". This will be of template 'Inline Popup'  and static ID "crop-popup" to display cropping functionality as a popup when the photo is uploaded by the user. Source HTML code is:

<div style="max-width: 100%; margin-top: 15px; max-height:200px">

    <img id="image-to-crop" src="" style="display:block; max-width: 100%;">

</div>

In that static content region, create a new button "CONFIRM_CROP" which will execute a Dynamic action Execute Javascript Code on click.

For this snippet to work, add your page header's Javascript File URLs section "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" and CSS File URLs section "https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css". And we need a page process of type "Execute Code" when the page is submitted with the request "SAVEPHOTO":

Lastly, we need another dynamic action when P65_PHOTO is changed with Execute Javascript Code:

With that, we have a profile photo displayed on the user details page. You can display user's photo also on login page, navigation bar or navigation menu as you wish.