Upload images to Cloudinary using Web Api, only,

Questions about Thunkable
1

I was able to upload images to Cloudinary using the normal “file upload” component, but that didn’t much of control to choose my custom Public ID, for the images.

is there any way to upload images to Cloudinary, and being able to control the Public ID

am using this block of codes, but it gives me an undefined image…

2022-01-28 16.43.31
2022-01-28 16.43.311920×2022 167 KB

2022-01-28 16.45.58
2022-01-28 16.45.58624×1094 64 KB

this is the screen which am trying to develop, in which am trying to point to the location on the map then record its information, plus three images to describe it, the data will be saved in firebase, and the images in cloudinary, but i was hoping the be able to upload and delete images, uploading was easy but the delete part was the very difficult part

please really i need help in that

2

See my demo project
https://x.thunkable.com/projectPage/61af762898837902ac7b6b18

3

Thank you Muneer, I used your project and I learned a lot from it, there was one problem that faced my:

2022-01-28 19.17.34
2022-01-28 19.17.341704×2032 149 KB

I want to use the photo which i select it from the photo library, but it always gives me undefined file format,
I couldn’t used the image which i choose from the photo library

4

The cloudinary API only allows fully qualified URL or Base64 stream. It does not allow local files.

5

If you are only concerned about deleting images easily, you could consider firing up a firebase function for this!

@nmtabooks

its such little code too!

exports.cloud = functions.https.onRequest((req, res) => {
const cloudinary = require('cloudinary').v2;
const imageID = req.query.id
  cloudinary.config({
    cloud_name: 'behaviorreportcard',
    api_key: 'yourApiKeyGoesHere',
    api_secret: 'yourApiSecreGoesHere',
    secure: true
  });
  cloudinary.uploader.destroy(imageID, function (error, result) {
    console.log(result, error)
    res.send(result)
  });
});

If you’ve already got a firebase project started up, this wouldnt be much to add to it!

6

Thank you for the reply… is that means, i have to convert my local files (images) to Base64 stream before sending them the cloudinary,!!?
could you please give me an example

7

See this code snippet from w3schools

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="file" onchange="encodeImageFileAsURL(this)" />
    <script>
      function encodeImageFileAsURL(element) {
        let file = element.files[0];
        let reader = new FileReader();
        reader.onloadend = function() {
          document.write('RESULT: ', reader.result);
        }
        reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>

This will convert your selected file to Base64 on screen.

8

thank you muneer, it is clear and simple.
one question, please.
am thinking to use Airtable to store my data including the images, is this a wise choice

9

When you have the Base64 string and you store it in any kind of storage then viewing it is as simple as retrieving the string and assigning it to an image component because it accepts Base64 directly to be the image to display.
This way, you store the Base64 in the table and you do not need to convert it to image again.

I made a quick demo for you.
See this project
https://x.thunkable.com/projectPage/61f68431c3761001dba12df1

In this demo it just reads the Base64 and assign it to an image and to a label but you can of course save it in any kind of database you wish to be retrieved later.

Sample result

image
image310×538 88.9 KB

10

Thank you very much muneer for the example. it makes it very clear. the concept is simple…
my problem with Cloudinary is the deleting part because I have to send the image to Cloudinary then retrieving back the URL, display it, and then delete it. also there is a problem of making custom Public Id, to be honest, I don’t know how to do that part especially when am using media upload component, not web api.

11

Unfortunately, you can’t choose a public ID in cloudinary when using the media DB component.

12

I decided to put together a quick couple videos. Hopefully this will help you all with deleting from cloudinary
@muneer @nmtabooks @domhnallohanlon :eyes:

13

You can simply use the cloudinary REST API directly from Thunkable without the need of Google Cloud Functions.

14

There’s always more than 1 way for the cookie to crumble. The solution I shared opens doors for when our file picker/base64 converter is released! I also plan to show how to make authenticated calls to firestore and a few other things. :slight_smile:

Also, if hashify ever stops working, we’ll need a another solution.

I plan to document both approaches eventually so we dont have to sort through forum posts :slight_smile:

15

I’ll start worrying when GAS (Google Apps Script) stops working. Hashify website is easy but it only does a small JavaScript routine that you can design yourself as a Web App or use GAS to make it as a Web API.

JavaScript hashing reference:

16

I was able to delete images after I uploaded them to Cloudinary.
the idea was simple, what I did, I extracted the Public_id from the URL , then I used it to delete the uploaded image.

I don’t know is this a correct method, or there is a better way to do it

2022-02-13 02.22.09
2022-02-13 02.22.093764×210 135 KB

the delete code

2022-02-13 02.25.33
2022-02-13 02.25.331526×1884 146 KB

the full code

2022-02-13 02.28.18
2022-02-13 02.28.181920×1593 161 KB