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