# Cloudinary - combining upload and fetched images (base64 encoding?)

**URL:** <https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513>\
**Category:** Ask for Help\
**Created:** [February 27, 2021, 5:11pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513 "2021-02-27T17:11:22Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [February 27, 2021, 5:11pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/1 "2021-02-27T17:11:22Z")

</div>

Hi! I want to use a nice Template column in my Glide sheet to have a lovely image appear. I have a Cloudinary account and am having great fun (now) manipulating images.

BUT I am a bit stuck trying to combine together two images when one or both are external (i.e. needing to use Fetch).

For instance:

- this is only using Upload (images stored on Cloudinary in my account)

But what I would like to do is have the flexibility to include both stored (Upload) and external (Fetch) images via templates. This would be used, for instance, in the ‘Ask Card’ screenshot.

I googled about … and this is all I could find (and did not really understand, or could make it practical). [Overlay an image that's taken from a fetched public URL – Cloudinary Support](https://support.cloudinary.com/hc/en-us/articles/360032635232-Overlay-an-image-that-s-taken-from-a-fetched-public-URL)

Any tips greatly appreciated! Thanks 🙂

 ![Screenshot 2021-02-27 at 18.09.16](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/1/41afff50b9155243ff3ea050cbc5383cdded1d9e.png)  
 ![Screenshot 2021-02-27 at 18.02.35](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/5/35f11b9afa1d0a846cc4adeabc69382793a6e8c0.png)

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [February 27, 2021, 5:16pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/2 "2021-02-27T17:16:28Z")

</div>

I see that there are some threads on base64 encoding (I started from ‘cloudinary’ and am figuring this out in real time). [Ideas for Base64Encode of images - #7 by John\_Cabrera](https://community.glideapps.com/t/ideas-for-base64encode-of-images/8633/7)

Some things to try, nothing that easy. I might need to rethink my approach!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 27, 2021, 6:07pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/3 "2021-02-27T18:07:03Z")

</div>

I’m no expert on cloudinary, but there are several threads by @Robert_Petitto and @Krivo explaining some of it and their use of cloudinary’s fetch command. I’m not sure if it need base64 encoding, or just url encoding, but the Construct URL column will do url encoding I believe.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [February 27, 2021, 7:11pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/4 "2021-02-27T19:11:29Z")

</div>

@Mark_Turrell

If you create a google script then you can base64 encode the url to fetch. I put in a function for you to use in a google script

```
function Encode64ForMe (url) {

      var encodedVar = Utilities.base64EncodeWebSafe(url,Utilities.Charset.UTF_8);

      return encodedVar;

    }

```

In your google sheet you put in your url to fetch in a cell - e.g.

> =Encode64ForMe(“[https://kristianvoigt.dk/SouthAmerica800x600/photos/photo1.jpg](https://kristianvoigt.dk/SouthAmerica800x600/photos/photo1.jpg)”)

Create an url with a overlay which is fetched - it could look something like this

`https://res.cloudinary.com/kristianvoigt/image/upload/f_jpg/l_fetch:aHR0cHM6Ly9rcmlzdGlhbnZvaWd0LmRrL1NvdXRoQW1lcmljYTgwMHg2MDAvcGhvdG9zL3Bob3RvMS5qcGc=/image%20carousel/USA.jpg`

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [February 27, 2021, 7:18pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/5 "2021-02-27T19:18:41Z")

</div>

Magic! Thanks - all working now 🙂

(my next task @Krivo is to make your image carousel 🙂 )

 ![Screenshot 2021-02-27 at 20.17.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/949002829d03f35c1d9a2b4f21318ade125b3c24.png)

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [February 27, 2021, 7:26pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/6 "2021-02-27T19:26:11Z")

</div>

@Mark_Turrell all the info should be here 🙂

> [@Image carousel - indication of mutiple images](https://community.glideapps.com/t/image-carousel-indication-of-mutiple-images/10391):
>
> Url: [https://imagecarouselv2.glideapp.io/](https://imagecarouselv2.glideapp.io/) [image] The image carousel functionality has changed so the image number overlay disappears after approx 2 seconds. That doesn’t work for me as the user might not see the number overlay - and thereby not realize that the image is actualy part of an image carousel - resulting in the user not using the image carousel. In the app there has been put an indicator in the button of the screen so the user can see that there are more images to se…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 27, 2021, 11:11pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/7 "2021-02-27T23:11:29Z")

</div>

Not sure if yours work in an array, but I have been using this to mimic an arrayformula experience. Hope it helps.

> **[Google Sheets - Quick Start with Base64 - With and Without Scripting](https://joshuatz.com/posts/2019/google-sheets-quick-start-with-base64/)**
>
> Instructions for how to quickly add Base64 encoding to Google Sheets, with and WITHOUT using custom scripting. Includes full copy and paste formula.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [February 27, 2021, 11:15pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/8 "2021-02-27T23:15:30Z")

</div>

@ThinhDinh That’s is a crazy formula!  
Do you think it would be possible in Glide sheet - and would you need Google sheets?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 27, 2021, 11:16pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/9 "2021-02-27T23:16:55Z")

</div>

Still needs Google Sheets for this, but hopefully we get a base64 encoding column some time in the future, to combine it with the new URL generator column.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [February 27, 2021, 11:18pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/10 "2021-02-27T23:18:41Z")

</div>

@ThinhDinh That would be nice - wondering when as I suppose core Glide functionality would be first.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 8, 2021, 8:59pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/11 "2021-03-08T20:59:05Z")

</div>

> [@Krivo](#):
>
> If you create a google script then you can base64 encode the url to fetch. I put in a function for you to use in a google script
> 
> ```auto
> function Encode64ForMe (url) {
> 
> var encodedVar = Utilities.base64EncodeWebSafe(url,Utilities.Charset.UTF_8);
> 
> return encodedVar;
> 
> }
> 
> ```
> 
> In your google sheet you put in your url to fetch in a cell - e.g.
> 
> > =Encode64ForMe(“[https://kristianvoigt.dk/SouthAmerica800x600/photos/photo1.jpg”](https://kristianvoigt.dk/SouthAmerica800x600/photos/photo1.jpg%E2%80%9D))

@Krivo This is awesome! Is there a way to populate this automatically when new information comes in / new rows are created? I imagine it would be a part of the script to watch for new rows?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 8, 2021, 8:59pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/12 "2021-03-08T20:59:36Z")

</div>

> [@ThinhDinh](#):
>
> but hopefully we get a base64 encoding column some time in the future

@mark @jason?

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [March 8, 2021, 9:53pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/13 "2021-03-08T21:53:24Z")

</div>

@Robert_Petitto Well, I you can include an extra arrayformula in the formula in below link (as @ThinhDinh provided) then I suppose you might be able to do without script. I haven’t been able to do the trick - but arrayformula wizards might 😉

> **[Google Sheets - Quick Start with Base64 - With and Without Scripting](https://joshuatz.com/posts/2019/google-sheets-quick-start-with-base64/)**
>
> Instructions for how to quickly add Base64 encoding to Google Sheets, with and WITHOUT using custom scripting. Includes full copy and paste formula.

(just needed to paste this formula as it is crazy 🙂

Please let us know if you get this to work with arrayformula

> =CONCATENATE(JOIN(“”,ARRAYFORMULA(SWITCH(BIN2DEC(TEXT(SPLIT(REGEXREPLACE(CONCATENATE(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8))),REPT(“0”,(FLOOR((LEN(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8))))+(6-1))/6)\*6)-LEN(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8)))))),“(.{6})”,“$1/”),“/”),“000000”)),0,“A”,1,“B”,2,“C”,3,“D”,4,“E”,5,“F”,6,“G”,7,“H”,8,“I”,9,“J”,10,“K”,11,“L”,12,“M”,13,“N”,14,“O”,15,“P”,16,“Q”,17,“R”,18,“S”,19,“T”,20,“U”,21,“V”,22,“W”,23,“X”,24,“Y”,25,“Z”,26,“a”,27,“b”,28,“c”,29,“d”,30,“e”,31,“f”,32,“g”,33,“h”,34,“i”,35,“j”,36,“k”,37,“l”,38,“m”,39,“n”,40,“o”,41,“p”,42,“q”,43,“r”,44,“s”,45,“t”,46,“u”,47,“v”,48,“w”,49,“x”,50,“y”,51,“z”,52,“0”,53,“1”,54,“2”,55,“3”,56,“4”,57,“5”,58,“6”,59,“7”,60,“8”,61,“9”,62,“-”,63,“_“,64,”=“))),REPT(”=“,(FLOOR((LEN(JOIN(”“,ARRAYFORMULA(SWITCH(BIN2DEC(TEXT(SPLIT(REGEXREPLACE(CONCATENATE(JOIN(”“,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&”“,”(?s)(.{1})“,”$1"&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8))),REPT(“0”,(FLOOR((LEN(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8))))+(6-1))/6)\*6)-LEN(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8)))))),“(.{6})”,“$1/”),“/”),“000000”)),0,“A”,1,“B”,2,“C”,3,“D”,4,“E”,5,“F”,6,“G”,7,“H”,8,“I”,9,“J”,10,“K”,11,“L”,12,“M”,13,“N”,14,“O”,15,“P”,16,“Q”,17,“R”,18,“S”,19,“T”,20,“U”,21,“V”,22,“W”,23,“X”,24,“Y”,25,“Z”,26,“a”,27,“b”,28,“c”,29,“d”,30,“e”,31,“f”,32,“g”,33,“h”,34,“i”,35,“j”,36,“k”,37,“l”,38,“m”,39,“n”,40,“o”,41,“p”,42,“q”,43,“r”,44,“s”,45,“t”,46,“u”,47,“v”,48,“w”,49,“x”,50,“y”,51,“z”,52,“0”,53,“1”,54,“2”,55,“3”,56,“4”,57,“5”,58,“6”,59,“7”,60,“8”,61,“9”,62,“-”,63,"_”,64,“=”))))+(4-1))/4)\*4)-LEN(JOIN(“”,ARRAYFORMULA(SWITCH(BIN2DEC(TEXT(SPLIT(REGEXREPLACE(CONCATENATE(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8))),REPT(“0”,(FLOOR((LEN(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8))))+(6-1))/6)\*6)-LEN(JOIN(“”,ARRAYFORMULA(BASE(UNICODE(SPLIT(REGEXREPLACE(REGEXREPLACE(A2&“”,“(?s)(.{1})”,“$1”&CHAR(127)),“'”,“‘’”),CHAR(127))),2,8)))))),“(.{6})”,“$1/”),“/”),“000000”)),0,“A”,1,“B”,2,“C”,3,“D”,4,“E”,5,“F”,6,“G”,7,“H”,8,“I”,9,“J”,10,“K”,11,“L”,12,“M”,13,“N”,14,“O”,15,“P”,16,“Q”,17,“R”,18,“S”,19,“T”,20,“U”,21,“V”,22,“W”,23,“X”,24,“Y”,25,“Z”,26,“a”,27,“b”,28,“c”,29,“d”,30,“e”,31,“f”,32,“g”,33,“h”,34,“i”,35,“j”,36,“k”,37,“l”,38,“m”,39,“n”,40,“o”,41,“p”,42,“q”,43,“r”,44,“s”,45,“t”,46,“u”,47,“v”,48,“w”,49,“x”,50,“y”,51,“z”,52,“0”,53,“1”,54,“2”,55,“3”,56,“4”,57,“5”,58,“6”,59,“7”,60,“8”,61,“9”,62,“-”,63,“\_”,64,“=”))))))

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 8, 2021, 11:39pm UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/14 "2021-03-08T23:39:54Z")

</div>

Hi @Krivo and @Robert_Petitto, the function in that script provides native arrayformula so you don’t have to use a long arrayformula in the Sheet.

Paste that into a Script and save it.

Then you can easily call it just like below.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0d15d99357de7f3309d9ceadbb7a78ec68cf558e.png)

> **[Thinh Dinh's lab V2.0](https://docs.google.com/spreadsheets/d/1JzBrp4R1zK9CMfmTzWWcPPep9-ZCl3OXxgWu27NWCy8/edit#gid=681282858)**
>
> Video Image
> 
> Video title,Video link,Image link
> Test,\<a href="http://res.cloudinary.com/thinhdinh/video/upload/v1608871912/lh074eeiyvblorxua7sa.mp4"\>http://res.cloudinary.com/thinhdinh/video/upload/v1608871912/lh074eeiyvblorxua7sa.mp4\</a\>,\<a...

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 9, 2021, 1:55am UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/15 "2021-03-09T01:55:26Z")

</div>

@ThinhDinh this doesn’t copy down for me:

```auto
=base64Encode("{"&char(34)&
"property_name"&char(34)&":"&char(34)&A2:A&char(34)&","&char(34)&
"property_address"&char(34)&":"&char(34)&B2:B&char(34)&","&char(34)&
"propertyid"&char(34)&":"&char(34)&C2:C&char(34)&"
}")

```

Had to use a helper column

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 9, 2021, 3:24am UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/16 "2021-03-09T03:24:51Z")

</div>

I guess that’s because you wrap text from A, B & C inside the formula, that’s an extra layer so it doesn’t work. Guess the only workaround here is to combine the text first then base64encode it in another column.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [March 9, 2021, 5:14am UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/17 "2021-03-09T05:14:06Z")

</div>

@Robert_Petitto @ThinhDinh personally I’m not a fan of custom formulas, especially when used with an arrayformula. I’ve found in the past that these can really start to bog things down. The problem is that _every_ time there is a change in that column, _all_ rows will be recalculated and the custom formula is being called multiple times simultaneously. I’ve seen this situation get so bad that you start getting timeouts and the dreaded “#NA” results.

I think a much better approach would be to take the original function that @Krivo supplied…

> [@Krivo](#):
>
> ```auto
> function Encode64ForMe (url) {
> 
> var encodedVar = Utilities.base64EncodeWebSafe(url,Utilities.Charset.UTF_8);
> 
> return encodedVar;
> 
> }
> 
> ```

…and combine that with an onChange() trigger. Then it only gets called when it is needed, and you avoid all the phaffing around with helper columns and arrayformulas, etc.

I did this recently for @Wiz.Wazeer - converted a custom function to an onChange() trigger - and I think he should attest to the fact that it works much better now.

My two cents 🙂

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [March 9, 2021, 11:08am UTC](https://community.glideapps.com/t/cloudinary-combining-upload-and-fetched-images-base64-encoding/23513/18 "2021-03-09T11:08:39Z")

</div>

Yes, I still remember that dark hour in the middle of the pandemic when I desperately needed help with a custom function that had been running riot on a script of mine.

At the time, I didn’t know what the source of the cause was until @Darren_Murphy took over.

UnFunnily enough, it was a split function that was splitting my script too (don’t ask, how? I don’t want anyone finding out how dumb I am 🤣)!

@Darren_Murphy got rid of the custom function on the sheet, and fixed the script.

The one thing I knew, but now I know I thought I knew, was that the formula was integral to the script, and it worked for a good couple of months until I noticed occurrences of strange behaviour on the sheet.

Very happy with the outcome.