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

Ask for Help
,
1

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?

2

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
3

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!

4

Hey @Darren_Murphy, would you be able to provide additional information on what you were thinking here? I did try, but couldn’t resolve the issue using a Template column approach.

5

Hi @Sean_Page… to clarify, are you asking if there’s a way to store a binary image in the Glide database?

1 Like
6

Thanks for following up @Robert_Petitto, working with @EvanFurniss we got a solution working that is using a base64 column to display the images, but it is very slow and not very extensible for use in other operations like PDF generation. So, I think I am going to rethink my approach and spin up some kind of external storage subscription to host images and just link to them.

7

Apologies, I missed this one.
The solution I had in mind was to use a Template column to create a data URI, and then display that using an image component. Although I’ve not tried this with base64 encoded images, I have done it with PDF’s, and it works fine as long as the documents aren’t too large. I would expect it to work for images. Sounds like the option you have with Evan is a similar approach?

1 Like
8

Yes, the images are being encoded to base64 and stored in a postgres db. Using a template column in glide I am appending the ‘data:image/png;base64,’ tag to the front of that and the image components are showing them, but it is VERY slow, and I am only using a few hundred rows right now in dev, but we would have 10s of thousands in production or more.

1 Like
9

I feel your pain. I attempted to do the exact same thing with a client a while ago and had the exact same issues. Just way too slow after a few hundred records. Ultimately, we decided to add in an external automation that generates a temporary PDF link, brings it back to Glide, and converts the temporary link to a Glide hosted link using the “Upload File” action.

I wish Glide had a way of directly dealing with binary files.

1 Like
10

Just curious, were you storing the base64 data in a regular table or a Big Table?
I just checked mine, it’s a Big Table with one base64 encoded PDF per row, and currently at just under 10,000 rows. There has been no slow down at all, although my PDF’s are quite small - each is just one or two pages.

1 Like
11

OK, so this may actually be more what I am looking for. I was going to move it completely outside of Glide, but maybe generating temp links and using the action would be a better way of doing it long term. Thank you for mentioning that action, I hadn’t come across that before.

12

We exclusively use Azure Postgres because we have other BI / external integrations that sit on top of most of our data where Glide is primarily the UI.

13

As a follow up again, the “Create File” action would be PERFECT except an image isn’t one of the file types available.