# Uploading an image of a canvas to cloudinary

**URL:** <https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016>\
**Category:** Questions about Thunkable X\
**Created:** [November 21, 2020, 7:22am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016 "2020-11-21T07:22:59Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 5:24am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/21 "2021-06-11T05:24:09Z")

</div>

Hi @jane , I’m working on an app for little kids to learn writing. The app displays a letter for them to write, and they have to write it on the canvas. Then I want to use the OCR API to get the text they have written on the canvas, and check whether they have written the letter correctly/ written the same letter. Since the ocr api won’t accept the canvas image directly, I wanted to upload it to cloudinary and use the URL with the api, but cloudinary doesn’t accept base64 either. I’m able to connect the generate JSON from object block now, and display it in an input… Here it is:

**Edit: When I tried to post the response, I crossed the 32,000 character limit because I had 100,000+. The response is in the next post.**

Any ideas?  
Thanks

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 5:24am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/22 "2021-06-11T05:24:51Z")

</div>

Argh, the response is 100148 characters, how do I post it?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 11, 2021, 5:30am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/23 "2021-06-11T05:30:41Z")

</div>

Does the OCR API require base64 format? Or can you just send it the Cloudinary mediaURL?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 11, 2021, 5:31am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/24 "2021-06-11T05:31:56Z")

</div>

Put it in a Google Doc and post a link to it?

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 5:33am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/25 "2021-06-11T05:33:57Z")

</div>

That’s a great idea! I’ll do it.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 5:37am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/26 "2021-06-11T05:37:18Z")

</div>

> **[Untitled document](https://docs.google.com/document/d/1FexFQy5VfIwVuYjb8mc97wPFNgRxBd9KTrFxC2rbp_U/edit?usp=sharing)**
>
> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAcICAYAAAAsUDhKAAAgAElEQVR4XuzdDdDVZZ0//s99g0CpBIaj5Br4LBlP5paJpKUzWpoau65uJSCNqKVltaY2Lg+6reJqtFkWNCqgu6W7aq0VVoOaIDptJkKhUST0gJopYD4Awn3/58v++vfkw/3w/Z5zXd/zOjM7+5v5nXNd7+v1ubYZ3p3zvds6Ozs7w4sAAQI...

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 5:38am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/27 "2021-06-11T05:38:21Z")

</div>

Exactly what I want to do. I don’t think the api accepts Base64, so I want to upload it to cloudinary.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 11, 2021, 2:26pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/28 "2021-06-11T14:26:28Z")

</div>

I’m not sure what the hold up is then. It’s pretty straightforward to upload an image to Cloudinary. And there’s a block to get an image from the canvas. And if the API will take a url as input… which part do you need help with?

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 2:29pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/29 "2021-06-11T14:29:11Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/7/2725703e5f3d2a8194dfb6e854ce74fdb5ab2478.png)

This doesn’t work. I get [object Object] in the input. And the response I get when I try to parse that is in the google doc above.

---

<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:** [June 11, 2021, 3:01pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/30 "2021-06-11T15:01:39Z")

</div>

Media\_DB expects a local path for the image and yours doesn’t have one.

I can think of 3 workarounds

- Create a web viewer extension to save the image as a file and then use this file in your API or to upload to cloudinary to get the URL and work with it.

- Because Base64 is considered as text, you can save it as a value under a key in Firebase and then create a Firebase function to move it from Realtime DB to Firebase storage and this will return a URL which you can use.

- Save it to a Google sheet then use any of the extensions such as Zapeir/Integromat/IFTTT to upload it to a cloud storage and get the URL.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 3:03pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/31 "2021-06-11T15:03:33Z")

</div>

Ohhh. I don’t know much JS and I don’t know how to conduct firebase functions.

---

<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:** [June 11, 2021, 3:04pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/32 "2021-06-11T15:04:06Z")

</div>

You still have the third option.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 3:04pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/33 "2021-06-11T15:04:42Z")

</div>

Any examples of cloud storages I can use?

---

<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:** [June 11, 2021, 3:07pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/34 "2021-06-11T15:07:20Z")

</div>

Cloudinary, Google drive, OneDrive, Imgur,…

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 3:08pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/35 "2021-06-11T15:08:19Z")

</div>

Oh, so basically cloudinary will accept base64 if it is sent through a third party and not the cloudinary component?

---

<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:** [June 11, 2021, 3:09pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/36 "2021-06-11T15:09:47Z")

</div>

Why would you save it as Base64 if you can save it as an image.

But yes, cloudinary will accept Base64.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 3:10pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/37 "2021-06-11T15:10:13Z")

</div>

Oh, ok. Thanks! I’ll try that out tomorrow.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [June 11, 2021, 3:36pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/38 "2021-06-11T15:36:29Z")

</div>

Okay, I think I missed a crucial point from [this topic](https://community.thunkable.com/t/share-save-canvas-image/464874):

> this block returns a canvas image in base64 text format

I didn’t realize that the `image of Canvas` block was converting to base64. I’m curious if/why that’s different than using the green Photo block.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 3:38pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/39 "2021-06-11T15:38:41Z")

</div>

I get a link that’s not even valid when I keep the image of canvas1 block in a text input.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 11, 2021, 3:42pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/40 "2021-06-11T15:42:02Z")

</div>

This isn’t a problem when used with the SHARE IMAGE block, but it _is_ a problem when used with the cloudinary block. Weird…

[Previous page](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016.md?page=1)

[Next page](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016.md?page=3)
