Upload image to Cloudinary from within Glide

Project Showcase
1

Cloudinary as image store for uploaded images

URL 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). 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

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

Reference

14 Likes
2

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

1 Like
3

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

3 Likes
4

Thanks for sharing the information with us, David.

5

Impressive!

6

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

1 Like
7

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)

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!

8

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:

1 Like
9

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

10

@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

2 Likes
11

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

12

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

1 Like
13

@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?

14

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 :slight_smile: Mange tak!

15

@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>
1 Like
16

@Alexdz

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

As I stated in the initial post - possible improvements:

17

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

18

The Cloudinaray preset - mode “unsigned”

image
image734Ă—1192 99.3 KB

19
20

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-

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.