Serving Static Workspace Files in Oracle APEX with Javascript

Question

I am incorporating browser notifications into Oracle APEX and I'm having trouble showing a custom icon in the notification. These icons can be adjusted to your liking by providing a URL to the location of the image. In Oracle APEX, you can upload static files and reference them using the #WORKSPACE_IMAGES#image.png, however, the #WORKSPACE_IMAGES# part does not get replaced when I use it in JavaScript. How do I get the URL of a static workspace file (png image) in JavaScript? I have tried using the following strings for the URL parameter of the notification:

showNotification(
    // "https://developers.google.com/web/images/web-fundamentals-icon192x192.png", // Works
    // "r/xxxxx/files/static/v71/image.png",                                        // Works, but is subject to change
    // "#WORKSPACE_IMAGES#image.png",                                               // Does not work
    // "&WORKSPACE_IMAGES.image.png",                                               // Does not work
    // "#IMAGE_PREFIX#image.png",                                                   // Does not work
    // "&IMAGE_PREFIX.image.png",                                                   // Does not work
    notification.title,
    notification.body,
    () => parent.focus()
);

const showNotification = (icon, title, body, onclick) => {
    // Let's check if the browser supports notifications
    if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
    }

    // Let's check whether notification permissions have already been granted
    else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        let notification = new Notification(title, {
            icon: icon,
            body: body,
        });

        notification.onclick = onclick;
    }

    // Otherwise, we need to ask the user for permission
    else if (Notification.permission !== "denied") {
        Notification.requestPermission();
    }
};

These work:

https://developers.google.com/web/images/web-fundamentals-icon192x192.png
r/xxxxx/files/static/v71/image.png (the URL of the image once I rendered it normally using an APEX Image Display Item)

These don't:

#WORKSPACE_IMAGES#image.png
&WORKSPACE_IMAGES.image.png
#IMAGE_PREFIX#image.png
&IMAGE_PREFIX.image.png

Extra information

We are using Oracle APEX 20.2 on an Autonomous Database

Thanks in advance!

Edit: I ended up uploading the image to a domain handled by a hosting provider so I can access the image via that url.

Tony Andrews Tony Andrews · Accepted Answer · 2021-03-16T18:11:01

Replacements such as #WORKSPACE_IMAGES#image.png should work fine from Javascript - but only if that Javascript is rendered by APEX as part of the page, not if the Javascript is in a separate file. For example:

When the page is run:

Serving Static Workspace Files in Oracle APEX with Javascript

1 Answers