# Upload image to Cloudinary from within Glide

**URL:** <https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204>\
**Category:** Project Showcase\
**Created:** [June 21, 2020, 1:40pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204 "2020-06-21T13:40:30Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [June 21, 2020, 1:40pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/1 "2020-06-21T13:40:30Z")

</div>

# Cloudinary as image store for uploaded images

URL [https://uploadtocloudinary.glideapp.io/](https://uploadtocloudinary.glideapp.io/)

The app is copyable

_The app is using my personal Cloudinary account - so please keep uploads in the app low - and use your own Cloudinary account if you are going to do exploration of cloudinary_

**Background**  
Glide has an image upload functionality where the images are uploaded to Glide. Unfortunatly, these images are out of control from us as app developers. This means that we cannot delete the images by ourselves. We will need this due to GDPR regulations.

**Idea**  
Let the user upload images from within Glide and store it outside Glide  
Use Cloudinary as the store for the images  
Every image is linked to a company - and therefore named accordingly.  
The user can upload as many images to the company as he wants

**Use of the app**

1. Create a new company (in the Company tab)
2. Select the company to which the images must be added (in Upload images to company tab)
3. Click the button to add images to the company - and see which has already been added
4. Click Upload an images
5. Click the button Select file to upload - this id done inside a webview (The webview is refering to an external html page)
6. Select the place where the image resides (locally, facebook etc)
7. Select the image
8. Click Send in upper right corner

The image is now added.

The process is a bit cumbersome compared to the process by using Glides build-in image upload.

**Bonus**  
There are a number of advantages doing it in this way

- Ability to control your own images (including deleting them)
- Ability to upload images from Google drive, Facebook, Instagram etc
- Ability to do pre-processing of the image before it is stored. I have cartoonified the image, optimized the size, rounded the image cornes, stored the images as jpg. More can be done.

**Tricks**

- The companies to which the images are to be assigned must be created before images are uploaded. This is due to the fact that the images must be linked to the companies. This cannot be done in one process (I don’t think so - if somebody can do it - that would be great)
- A webpage is created outside Glide to get the Cloudinary upload functionality available inside Glide by use of Open webview action on a button.
- The webpage is fed with the name of the image to be created in Cloudinary (like [https://website/htmlpage?imageid=Image-mhEQ5+g8QXG3Yhk09Zv9aA-4](https://website/htmlpage?imageid=Image-mhEQ5+g8QXG3Yhk09Zv9aA-4)). The upload is therefore independent of the original filename.
- A rollup column is used to determine how many images that already have been uploaded for the company - and thereafter “add one” to the file name for the new image.
- Added an inactive column in images so images can be made inactive in the google sheet and deleted in Cloudinary

**Possible improvements**

- Do a signed upload as the unsigned upload is not really perfect. \*Glide programmers - can you do it? More description here: [https://cloudinary.com/documentation/upload\_widget#signed\_uploads](https://cloudinary.com/documentation/upload_widget#signed_uploads)
- Upload multiple images at one time - can it be done? Cloudinary widget allows for that - but how to implement it?

@mark @david It would be fantastic if it was possible to do something like this with the upload functionality in Glide

**Reference**

- [https://cloudinary.com/documentation/upload\_widget](https://cloudinary.com/documentation/upload_widget)

- [https://support.cloudinary.com/hc/en-us/articles/360011205719-Upload-Widget-Can-I-update-the-file-name-after-choosing-the-file-to-upload-](https://support.cloudinary.com/hc/en-us/articles/360011205719-Upload-Widget-Can-I-update-the-file-name-after-choosing-the-file-to-upload-)

- [https://stackoverflow.com/questions/22607150/getting-the-url-parameters-inside-the-html-page](https://stackoverflow.com/questions/22607150/getting-the-url-parameters-inside-the-html-page)

- Upload presents from within Cloudinary

---

<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:** [June 21, 2020, 2:08pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/2 "2020-06-21T14:08:43Z")

</div>

Thank you, excellent as always! @Manan_Mehta check this out for the multiple layers thing, might find a way out.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [June 21, 2020, 8:48pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/3 "2020-06-21T20:48:33Z")

</div>

Uploaded files will be deleted within 30 days of being removed from your app.

---

<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:** [June 21, 2020, 8:53pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/4 "2020-06-21T20:53:27Z")

</div>

Thanks for sharing the information with us, David.

---

<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:** [June 21, 2020, 9:28pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/5 "2020-06-21T21:28:02Z")

</div>

Impressive!

---

<div class="post-metadata">

**Author:** ![Alexdz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexdz/32/10382_2.png) [@Alexdz](https://community.glideapps.com/u/Alexdz)\
**Post date:** [July 13, 2020, 4:45pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/6 "2020-07-13T16:45:29Z")

</div>

What is considered as “removed”? Can you just delete the link to a file/image in the spreadsheet?

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 13, 2020, 5:31pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/7 "2020-07-13T17:31:30Z")

</div>

Hi @Krivo, many thanks for this very complete tutorial. I’ve never used Cloudinary, and maybe it may answer my challenge:

I need to create 1 QR Code from different pictures that my users upload in Glide (cf. pictures of recto-verso papers).  
My idea is to rebuild these X pictures into 1 \> then use the QR Code formula (cf. [QR Code - Attendee Check-In](https://community.glideapps.com/t/qr-code-attendee-check-in/11549/13))

I should then be able to send this QR Code picture by mail.  
Of course, all should be automatic…

Is Cloudinary able to deliver this or am I dreaming awaken?

Thanks!

---

<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:** [July 13, 2020, 6:29pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/8 "2020-07-13T18:29:27Z")

</div>

Hi @AyS_0908 i’m not sure what you want Cloudinary to do. Do you want Cloudinary to stich the images - so they become one picture?  
If so, I wonder whether you can have a blank background image and the do overlays with the X images so they will form one new image where you can scan the QR code. The challenge would be to resize and position the images to one image

You might be inspired by this post:

> <https://stackoverflow.com/questions/37247286/way-to-link-two-images-together-in-cloudinary>

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 13, 2020, 8:26pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/9 "2020-07-13T20:26:31Z")

</div>

Thanks @Krivo, this seems to be the target … even if it also seems quite complicated to set up for a non IT guy.  
I will give it a try though …  
Thanks again

---

<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:** [July 13, 2020, 8:53pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/10 "2020-07-13T20:53:13Z")

</div>

@AyS_0908 if you are going do placement of images on an empty background image you might get a bit inspired by the documentation in this thread about cloudinary

[Image carousel in conjunction with Cloudinary](https://community.glideapps.com/t/image-carousel-in-conjunction-with-cloudinary/10246)

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 13, 2020, 9:58pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/11 "2020-07-13T21:58:23Z")

</div>

Many thanks, I will _deep dive_ into it!

It’s exactly what I need, thanks to your documentation, the challenge will now be to understand the cloudinary side.

Thanks again!  
Cheers

---

<div class="post-metadata">

**Author:** ![Alexdz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexdz/32/10382_2.png) [@Alexdz](https://community.glideapps.com/u/Alexdz)\
**Post date:** [July 14, 2020, 10:07am UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/12 "2020-07-14T10:07:44Z")

</div>

Can anyone point to a good Cloudinary tutorial on how to generate your upload link/button and implement this workflow?

---

<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:** [July 14, 2020, 3:33pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/13 "2020-07-14T15:33:09Z")

</div>

@Alexdz what is it you are missing? Is it the webpage with the link?  
Notice that is user experience isn’t the best as there are many steps before the image is uploaded. Have you tried it out yourself?

---

<div class="post-metadata">

**Author:** ![Alexdz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexdz/32/10382_2.png) [@Alexdz](https://community.glideapps.com/u/Alexdz)\
**Post date:** [July 14, 2020, 3:53pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/14 "2020-07-14T15:53:47Z")

</div>

Yes, exactly, how do you get the upload button? I guess the button on the webpage is just an iframe or something like that, but where do you get the button from? Sorry, just signed up to Cloudinary yesterday 🙂 Mange tak!

---

<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:** [July 14, 2020, 4:52pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/15 "2020-07-14T16:52:54Z")

</div>

@Alexdz

It is a very simple webpage

```
<html>

<button id="upload_widget" class="cloudinary-button">Select file to upload</button>

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">  

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

var imageid = GetURLParameter('imageid');

//var myFileName = "myName";
var myUploadWidget = cloudinary.createUploadWidget({

    prepareUploadParams: function(cb, params)
    {
        cb({public_id: imageid})
    },

    cloudName: "-------your-cloudname-----",
    uploadPreset: "----your-upload-preset",
// public_id: myFileName
  },
  (error, result) => {
     if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ', result.info); 
    }
  });

document.getElementById("upload_widget").addEventListener("click", 
    function(){
        myUploadWidget.open();
    }, false);
    
</script>

</html>
```

---

<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:** [July 14, 2020, 4:56pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/16 "2020-07-14T16:56:05Z")

</div>

@Alexdz

If you succeed doing a signed upload - then please share it with us 🙂

As I stated in the initial post - possible improvements:

- Do a signed upload as the unsigned upload is not really perfect. \*Glide programmers - can you do it? More description here: [https://cloudinary.com/documentation/upload\_widget#signed\_uploads](https://cloudinary.com/documentation/upload_widget#signed_uploads)

---

<div class="post-metadata">

**Author:** ![Alexdz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexdz/32/10382_2.png) [@Alexdz](https://community.glideapps.com/u/Alexdz)\
**Post date:** [July 14, 2020, 4:57pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/17 "2020-07-14T16:57:34Z")

</div>

thank you very much! i will give it a try!

---

<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:** [July 14, 2020, 5:03pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/18 "2020-07-14T17:03:16Z")

</div>

The Cloudinaray preset - mode “unsigned”

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

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 14, 2020, 5:34pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/19 "2020-07-14T17:34:42Z")

</div>

> [@Extracting from Cloudinary](https://community.glideapps.com/t/extracting-from-cloudinary/12481/4):
>
> Hi @Ed_Pietrzak, I’m exactly in the same situation than you (starting from 0 on Cloudinary), and I finally found two “Graals” for beginners. @Robert_Petitto: #1. [https://www.youtube.com/watch?v=cGCVJrczIHc](https://www.youtube.com/watch?v=cGCVJrczIHc) #2. [https://www.youtube.com/watch?v=XScJD7IRlc8](https://www.youtube.com/watch?v=XScJD7IRlc8) #3. [https://www.youtube.com/watch?v=pF8ywM0c2TY](https://www.youtube.com/watch?v=pF8ywM0c2TY)@Krivo: [Image carousel in conjunction with Cloudinary](https://community.glideapps.com/t/image-carousel-in-conjunction-with-cloudinary/10246) Cheers

---

<div class="post-metadata">

**Author:** ![Ed\_Pietrzak](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ed_pietrzak/32/9216_2.png) [@Ed\_Pietrzak](https://community.glideapps.com/u/Ed_Pietrzak)\
**Post date:** [July 14, 2020, 6:02pm UTC](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204/20 "2020-07-14T18:02:04Z")

</div>

Thank you. Those were helpful, but not exactly what I am looking for. I can get the URL from cloudinary manually and add it to the sheet manually, but I am looking for how to do this automatically. What I can’t figure out is how to change the ID on the upload so that I can pull that. I followed the link that was posted above

[https://support.cloudinary.com/hc/en-us/articles/360011205719-Upload-Widget-Can-I-update-the-file-name-after-choosing-the-file-to-upload-](https://support.cloudinary.com/hc/en-us/articles/360011205719-Upload-Widget-Can-I-update-the-file-name-after-choosing-the-file-to-upload-)

and am able to change the code, but it only changes it for the first image. Then when I go to upload another image, it pulls the image that already has that name into it.

[Next page](https://community.glideapps.com/t/upload-image-to-cloudinary-from-within-glide/11204.md?page=2)