# Upload images to Cloudinary using Web Api, only,

**URL:** <https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875>\
**Category:** Questions about Thunkable X\
**Created:** [January 28, 2022, 12:44pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875 "2022-01-28T12:44:37Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![nmtabooks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/nmtabooks/32/100232_2.png) [@nmtabooks](https://community.thunkable.com/u/nmtabooks)\
**Post date:** [January 28, 2022, 12:44pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/1 "2022-01-28T12:44:37Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/2/b26a67b7cc7483e402c74cd2587dd913481ade72.jpeg)

 ![2022-01-28 16.45.58](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/0/e0b9737eb30efedb0ea9612ccc272075fd94e331.png)

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [January 28, 2022, 1:46pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/2 "2022-01-28T13:46:08Z")

</div>

See my demo project  
[https://x.thunkable.com/projectPage/61af762898837902ac7b6b18](https://x.thunkable.com/projectPage/61af762898837902ac7b6b18)

---

<div class="post-metadata">

**Author:** ![nmtabooks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/nmtabooks/32/100232_2.png) [@nmtabooks](https://community.thunkable.com/u/nmtabooks)\
**Post date:** [January 28, 2022, 3:21pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/3 "2022-01-28T15:21:08Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/7/07e0643978fb84602abf853d98db9f091816146f.jpeg)

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [January 28, 2022, 4:46pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/4 "2022-01-28T16:46:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [January 28, 2022, 5:20pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/5 "2022-01-28T17:20:31Z")

</div>

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!

```auto
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!

---

<div class="post-metadata">

**Author:** ![nmtabooks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/nmtabooks/32/100232_2.png) [@nmtabooks](https://community.thunkable.com/u/nmtabooks)\
**Post date:** [January 28, 2022, 7:51pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/6 "2022-01-28T19:51:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [January 28, 2022, 11:26pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/7 "2022-01-28T23:26:03Z")

</div>

> [@nmtabooks](#):
>
> could you please give me an example

See this code snippet from `w3schools`

```auto
<!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.

---

<div class="post-metadata">

**Author:** ![nmtabooks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/nmtabooks/32/100232_2.png) [@nmtabooks](https://community.thunkable.com/u/nmtabooks)\
**Post date:** [January 29, 2022, 9:16pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/8 "2022-01-29T21:16:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [January 30, 2022, 7:11am UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/9 "2022-01-30T07:11:13Z")

</div>

> [@nmtabooks](#):
>
> is this a wise choice

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](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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/6/c6d36a3563917f1b66d7f52e8644391b790c22b6.png)

---

<div class="post-metadata">

**Author:** ![nmtabooks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/nmtabooks/32/100232_2.png) [@nmtabooks](https://community.thunkable.com/u/nmtabooks)\
**Post date:** [January 31, 2022, 3:26pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/10 "2022-01-31T15:26:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [January 31, 2022, 4:00pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/11 "2022-01-31T16:00:17Z")

</div>

> [@nmtabooks](#):
>
> how to do that part especially when am using media upload component

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

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 1, 2022, 12:18am UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/12 "2022-02-01T00:18:19Z")

</div>

I decided to put together a quick couple videos. Hopefully this will help you all with deleting from cloudinary  
@muneer @nmtabooks @domhnallohanlon 👀  
https://player.vimeo.com/video/672083032?h=ca8e09e758&app_id=122963  
https://player.vimeo.com/video/672161374?h=d9940d5128&app_id=122963

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 1, 2022, 12:53am UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/13 "2022-02-01T00:53:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 1, 2022, 12:56am UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/14 "2022-02-01T00:56:50Z")

</div>

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

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 🙂

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 1, 2022, 1:02am UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/15 "2022-02-01T01:02:05Z")

</div>

> [@jared](#):
>
> if hashify ever stops working, we’ll need a another solution

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:

> **[SubtleCrypto: digest() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest)**
>
> The digest() method of the SubtleCrypto
> interface generates a digest of the given data. A digest is a short
> fixed-length value derived from some variable-length input. Cryptographic digests should
> exhibit collision-resistance, meaning that it's hard...

---

<div class="post-metadata">

**Author:** ![nmtabooks](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/nmtabooks/32/100232_2.png) [@nmtabooks](https://community.thunkable.com/u/nmtabooks)\
**Post date:** [February 12, 2022, 10:24pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/16 "2022-02-12T22:24:34Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/e/1ee6645b6601ce79083a8b68e1271ba6173c8f7a.png)

the delete code

 ![2022-02-13 02.25.33](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/8/08e0ab3840a49470e8ef5e2741cdbd77ab496bb9.jpeg)

the full code

 ![2022-02-13 02.28.18](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/a/ca7b923448e8599fb9d670bda76f801458340eec.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [May 13, 2022, 10:25pm UTC](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/17 "2022-05-13T22:25:24Z")

</div>

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