Draw on image

Hey everyone !
I’m thinking of maybe another solution, wihtout scripts : if you’re on your phone, tablet or computer, you have editing softwares (paint, photo editor or whatever), the editing part is quite easy this way.
So imagine a setting where when one post a picture. As the picture is a new entry in a table, you can go to the detailed page of the pic (to Watch it bigger or idk). And bellow the pic you have a mini form to import a new picture (in the form would be hidden the row ID of the picture so that you can make a relation, and the current date). Then, you would only have to display the latest update of the picture as the main picture. A Query would find the latest update, and an « IF - Else » column would display either the first picture or the latest update if there is any.

Idk if I’m clear, I’ll try to make a Quick template

This is great, but be careful, you might have exposed your secret key to the front end with this approach.

1 Like

Thanks. I copied script, changed Authorization, appID, tableName and column. Still no luck with save :confused:

Whats your placeholder image coloum type? (Image/text)?
Whats your annotation image coloum type? (Image/text/multi image)?

Just a basic text column, so the script will take the url data and overwrite it with the uri in the same field.

I removed everything, thanks for this input I missed it :slight_smile:

I mean to reply to @Himaladin 's comment. If you use that, bad actors may intercept the HTTP calls and get the secret info like secret key and table names.

1 Like

I was imagining that if we had a paste action from the clipboard, this could be avoided. I tried giving this script to the AI custom component, and it didn’t respond. :smile:

I did some digging, and it’s the JSON value (dataURL) that results in error.

columnValues: {
“aaaaa”: dataURL
},

If i replace dataURL with random “text”, then API works.

Data URL is new to me. But a +1 mil. char string in a basic text column seams a bit excessive. And im not sure the API is happy about it :slight_smile:

Update: Just did another test with some new images. Works now. I think its the image size. Anything above roughtly 700x700, and data URL gets to large.

It should be enclosed in double-quotes, like so:

columnValues: {
"aaaaa": "dataURL"
},

I suspect you were using images from the internet that aren’t allowed by CORS. Also, keep in mind that the restrictions here are stricter. I’m not sure what the exact cause is, though.

Took random image (2500 x 1900), converted it to PNG, made three copies that i scaled down.

  1. Original as PNG (Width = 2500px)
  2. Width = 1500px
  3. Width = 1000px
  4. Width = 700px.

1-3 fails. 4 = succes.

I tested with a file size of 2000 x 3000px, and it still opened, but it significantly slowed down the initial loading. It might be because your file is in PNG format.

Screenshot 2024-11-10 171106

Ok. just redid test, same outcome. When Images is larger then ~700x600px data URL .length gets +1 mil. Is there a 1 mil. string length limit on API?

But having images as data URL is, wird to me ;). I think i’ll try converting data URL to image via Cloudinary (they have upload via base64 DATA URI), and then sending image back to Glide. - Could be fun learning project.

If I’m not mistaken, what you mean is the saved output. It’s not a URL, but rather a URI representing the image in base64 format, stored as a blob. This is a way to store the image directly within the data, not as a separate file.

Yes. Can the JavaScript convert Base64 to image? - And then send the image to Glide?

If you want to convert it into an image, you would need to upload the image to cloud storage first and then send the image URL to Glide. I don’t have any other ideas besides using a third-party cloud service. Are you encountering any issues with the long URI?

Hi again. First of, thanks for quick replies, and this solution in general. Has been a good learning experience in some basic JS and base64 :smiley:

Im defefntly gonna implement.

I think i’m going to send edited images to our Google Drive.
This adds some delay, but i think its worth it.

Why

  1. Fore me, images larger then roughly 700 x 700 don’t work when i try to send dataURL/base64 to glide via API.
  2. Im not sure how well the base64 sting works with Glide integrations (if i want to use image in PDF etc.)
  3. Havn’t asked, but im pretty sure the company as a polici about this (they want all images on own server).
  4. The end result is easier for me to work with in general.

For anyone reading later, sending images to Google Drive via Make.com:

Quick guide

Send base64 to make.com via custom webhook.
Convert dataURL (base64) to binary via build in {{toBinary(dataURL; “base64”)}}, and name file *.png see screen.

I’m a bit confused by what you mean here. Are you converting the initial image to Base64 data to place it into an “Image placeholder” column?
In my script, it accepts two formats: a standard URL or a Base64 URI. So no conversion is necessary here. The script only handles saving it in that format to be reused for editing later, as Glide doesn’t support direct upload for this. That’s why I refer to it as a placeholder.
If you’re indeed converting it through a third-party service and then sending it back to Glide, this might be causing the API limit issue. In my tests, using a variety of direct URLs didn’t present issues, except for CORS restrictions, including saving data as a long Base64 format.

For handling images in PDF format, you can try testing it directly to see. PDF handling in JavaScript can be quite different and more complex, especially if you’re working with multi-page documents.

You’re welcome to store files on various cloud platforms and use GPT assistance to modify as needed.
If you’re using Google Sheets integrated with Glide, it could be even easier. You can adapt my script as a base to convert and publish as Google Web Apps for storage in Google Drive.
Use the web embed component in Glide to display your Web Apps. This way, you won’t need Glide’s API or third-party APIs at all, and you can create more complex web apps without impacting Glide’s performance.

As a note:
Everything above assumes you’re working within Glide. Once you understand the workflow, feel free to modify it however you’d like.