Upload multiple images to Cloudinary

Intro

I thought I was going to publish my first app in the Template store but external sources like Cloudinary integration are not allowed in a template. So after hours spend you will instead see the app here.

Upload multiple images to Cloudinary

Try out version: URL: https://multiupload.glideapp.io/

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 but it is not possible to upload multiple images at a time or control the size of the uploaded image.

Idea

  • Let the user upload multiple images from within Glide and store it outside Glide
  • Use Cloudinary as the store for the images
  • Images are loaded into one single folder in Cloudinary and displayed in Glide as a whole. The images are not linked to an object
  • The user can upload as many images as he wants

Main app feature

The app has 4 main features

  • Upload (multiple) images to Cloudinary
  • Single image presentation with increment buttons
  • Image presentation in tile layout with edit possibilities
  • Admin functionality to setup the image presentation, the increment options, image manipulation, Cloudinary account setup and webpage for upload

Use of the app

Ad 1)

  • Click on the upload tab
  • Click Upload images (step 1) button
  • Clik Select file(s) to upload - this is done inside a webview (The webview is refering to an external html page
  • Select the place where the image resides (locally, facebook etc)
  • Select the images
  • Click Done
  • Click on Close in left top corner
  • Click Refresh image list (step 2) to load all the information about the images to glide

Ad 2)

Click on Next image, Previous image, -100,-10,+10,+100 button to move to that image. A image will show if it is not possible to do that increment

Ad 3)

  • Scroll quickly through the images
  • Select an image
  • Click on the image to enlarge
  • Click on the edit pencil to change the properties of the image. You can change the descriptive text for the image, the rotation of the image or make the image inactive (and thereby not show)

Ad 4)

  • Everybody have access to the admin functionality at present.
  • Image frame design is used on the Single image tab to control whether the image should be shown in a square frame or by the actual size of the image
  • Increment options let you decide whether to show the actual image of the increment position – or just a numbered value.
  • Image manipulation let you manipulate the image before it is shown in the app. Different adjustmenttype can be selected and a link to the description is found. If the adjustment type is using padding then the color can be changed. Image width can be adjusted. Ratio between width and height can be changed. This is relevant when Image frame design is Actual size – you can thereby control the height of the image in Single image tab.
  • Account will let you setup the information about your Cloudinary account from within the app.
  • Webpage for upload must be created for a Cloudinary widget. Here you can specify the url to that webpage

Bonus
There are a number of advantages doing upload 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 e.g. optimized the image size
  • Ability to do pre-processing of the image before it is loaded into the app e.g. adjusting size, rotation etc

Building your own version

Copy and modify version: URL: https://multiuploadTMP.glideapp.io/

Prerequisite

  • A Cloudinary account
  • A website where the upload page can be placed
  • A upload preset is to be setup inside Cloudinary
  • A folder for your uploaded images is to be setup inside Cloudinary

If you haven’t got a Cloudinary account yet the please consider signing up by an invitation link. This will give some extra credits for me and allow for more free transformations, file storage etc. Mine is: https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ufjxv2xds2yignimyvnu

But you could also ask some of the other Cloudinary gurus of the community for their invitation link.

Tricks

  • 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 Cloudinary cloudname and upload preset (like https://<website>/<webpage_name>.html?cloudName=<cloudname>&uploadPreset=<uploadpreset>). The filename will be given by Cloudinary.
  • Added an inactive column in images so images can be made inactive in the google sheet and deleted in Cloudinary
  • The increments on Single image is done by using inline lists where the action is Increment

Documentation
The different fields are described in this Google sheet. This should help to do your own development

Further, screen shots from within Cloudinary is found in this description - enabling you to setup Upload preset and folder for your images

Limitations

  • Max 5000 images
  • Not possible to change the sequence of images
  • Not possible to delete an image from within Glide
  • NEWER delete cells in column C as formulas are found in the column. Your can clear the cells
  • Everybody have access to the admin functionality at present

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
  • Change the sequence of the images in a user friendly way
  • Reduce/remove lag when displaying images for the first time - especially on Single image tab

@mark @david It would be fantastic if it was possible to do something like this with upload of multiple images in Glide - and also specify Cloudinary transformations as I understand that Glide use this already

Reference

18 Likes

Nicely done. Hadn’t thought of embedding the uploader in Glide!

1 Like

Brilliant, Thanks. Do you know if it would be possible to use a multi-image uploader to upload to either Google Drive or DropBox?

1 Like

@Aj2666 I have only done upload to cloudinary but I think you should be able to upload to g-drive via google forms. This would require that the user is logged into google I believe. There seems to be issues storing images at google drive as google might sometimes block the transfer of images to the app.

@Robert_Petitto Still lots of things to explore in Cloudinary :slight_smile: It would be cool if Glide allowed to do some of the stuff we do in Cloudinary natively in Glide - as I understand that Glide behind the scene already use Cloudinary as manipulation engine.

2 Likes

Hi Krivo,
Today I just got back to see the navigation function and just found the version I can copy to study down below. Thank you for such tricks to make navigation possible as I’d never had this idea. Wow! Thank you so much. I will always accredit you for teach me this trick. Thank you!

1 Like

@everys just glad to help and inspire. Did some more descriptions in order to do easier understanding. Great it helped you out :sunglasses:

1 Like

Hi thanks for you great informative explanation about multiple uploads

Wondering if I can relate a certain upload by passing parameters to it ?

@Yasin_Hassanien try to explain in a few more words what you want to achieve

Example passing a certain file that is related to a ROW ID so I can view it as a relation under a certain record

@Yasin_Hassanien alright. You want the image to belong to something. In the multi upload to cloudinary case you just make the images belong to images. But you want it to belong to different things when you upload.
I have done that in another app which uploads ONE image at a time. You will pass over a unique id from glide to cloudinary - and thereby know that the image belongs to.
Take a look on this thread

The upload process is rather long

@Krivo thanks for the inspiration. I tried clicking on the app link but it seems to have disappeared now. Is it possible to share the app again? Cheers Brad

@Brad_Legassick. Very strange. Couldn’t open the app from the url. Went into builder and clicked share to get the url and test myself. Now the url is working again. Wonder what is happening

Hi @Krivo thx but I still just get not found error? Strange & it also happened to an app @Jeff_Hager shared.

@jason has something happened today that could have could caused this issue - seems to be more than one app affected according to @Brad_Legassick. The mentioned app: https://uploadtocloudinary.glideapp.io does work at my side now - but strange that it stopped working

@Brad_Legassick have you tried CTRL+F5?

@Krivo thx mate, it worked now! So weird.

1 Like

@Krivo this link doesnt work from the beginning of your post - https://multiupload.glideapp.io/ also the next link, but your link you just posted works.

Hi @Krivo I am trying to create a place on my app where users can upload >10000 images in a span of 15 minutes in the app.
Would Cloudinary be a good place to do so?
Is the 5000 image limit in the free version and can it be increased in the pro version?
Also would Glide Tables be fine for something that I need? @david @Mark

They use “credits” as their unit of quota. In your case, it would consume storage (I’m assuming no transformation) so at max 25GB per month.

1 Like