Upload images to Cloudinary using Web Api, only,

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…

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 Likes

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

2 Likes

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

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

1 Like

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

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!

1 Like

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

1 Like

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.

1 Like

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

1 Like

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

1 Like

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.

1 Like

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

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

1 Like

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

1 Like

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:

1 Like

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:

1 Like

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

the delete code

the full code

3 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.