Reference a file from UI component code

UI Builder
1

In my custom UI component, I want to define a function to play a sound. I’ve uploaded an mp3-file to the component into the folder src/lib/.
My function definition is:

function play() {
  var audio = new Audio('./lib/beep.mp3');
  audio.play();
}

What happens is that, the relative path ./lib/beep.mp3 points to the Backendless file system and not to my UI component lib-folder.

How can I address folders from within my UI component code?

Regards,

2

Hello @Klaas_Klever

Could you clarify what you mean here:

points to the Backendless file system and not to my UI component lib-folder

Your UI component folder in any case under the BL file system.
Also will be helpful if you will provide examples where describe how it looks now and what you want to achieve.

Regards, Dima

3

I’m getting an error like this:

GET https://eu.backendlessappcontent.com/15D1E631-1E7E-C5D5F00/E9DFBE7D-69AE89C1911BB2D/files/ui-builder/containers/default/lib/beep.mp3 400 (Bad Request)

which tells me, that the system is looking into the file system associated with my app.
What I want is to reference my component “file system”:

image

4

Hi @Klaas_Klever

I see the issue, it happens because the relative path resolves based on the UI container directory.
Unfortunately, I do not see any solutions at this moment except the following one:

export default function CustomUIComponent({ component, eventHandlers, appData, pageData, parentDataModel, pods, settings, definition, instanceId }) {
 ...
function play() {
  var audio = new Audio(`./components/custom/${definition.id}/src/lib/beep.mp3`);
  audio.play();
}

UI Builder - test - Backendless 2022-11-24 17-31-57
UI Builder - test - Backendless 2022-11-24 17-31-571976×1144 365 KB

But this is more likely a workaround than a good solution, at least for now.
And since this is not documented it can stop working in the future.

We’ve got a ticket to research what we can for such cases, the ticket’s number is BKNDLSS-30507

Regards, Vlad

5

Thanks @vladimir-upirov
I found a way to use a base64 string right in the code when calling “new Audio()”. Seems to be feasible, because in this case it is just a short BEEP.

I remember that the same issue came up for component icons.

Regards

1 Like