Image from byte[] array or ability to "upload" file

The context here is that I am using an external API to parse some file data uploaded through Glide and then write values back to Postgres. If there is a URL in the table then Glide picks that up and displays images without any issue.

However, the paths to the image files within the data being processed are all local, but we use a cloud service for our primary data which means the files are accessible via API, but still not “exposed” url that Glide can directly access.

So, my question is if there is an easy way to “upload” directly to an image column either glide table or postgres (preferably) and/or is there a way to read byte (base64) data from a column and turn that back into an image.

I have tried to use JS to do it, but it doesn’t want to return anything useful:

function showBase64Image(base64Data, mimeType = ‘image/png’) {
const byteChars = atob(base64Data);
const byteNumbers = new Array(byteChars.length);
for (let i = 0; i < byteChars.length; i++) {
byteNumbers[i] = byteChars.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);

const blob = new Blob([byteArray], { type: mimeType });
const url = URL.createObjectURL(blob);

const img = document.createElement(‘img’);
img.src = url;
document.body.appendChild(img);

img.onload = () => URL.revokeObjectURL(url);
}

Anyone have any ideas to do this within glide without needing to store these somewhere else that are accessible?

You should be able to do it with a regular Template column. I’m out at the moment so can’t give you an example, but @Robert_Petitto probably can.

1 Like

Thanks @Darren_Murphy , I tried to mess with a template column with JS and without and encoding etc but I am just not seeing an easy way to get this done with my knowledge. If anyone does have other suggestions I am open!