Method to get the base64 of an image file uploaded in settings?

HCL Leap Leap Forum
,
1

Was wondering if there is a way to get the base64 value of an image either uploaded in settings or through the image widget object in an app.

2

Hello Dovydas,

Yes, this is feasible to get the base64 value of an image uploaded in settings > files.

Please create a simple button and add this sample code in onClick event:

// function to convert image url to base64 value
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))

// get image uploaded in settings > files eg. image002.png
var url = app.getImageBaseURL() + "/image002.png"

// use function with image url parameter
toDataURL(url)
.then(dataUrl => {
console.log('RESULT:', dataUrl)
})

Test, and the base64 value will output in the browser's console:

Community-Pasted-Attachment-1721980267916.png547×886 78.4 KB

For external reference:

https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript

Hope this helps to you.

Thanks,

Jayve

3

Cheers lad.

4

You're welcome Dovydas.