# 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:** 4

<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, 4:36pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/61 "2021-06-11T16:36:40Z")

</div>

Start here: [Curl - HTML/CSS to Image](https://docs.htmlcsstoimage.com/example-code/curl/)

I’m trying to see if I can get it working, too.

---

<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, 4:37pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/62 "2021-06-11T16:37:36Z")

</div>

Thanks!

---

<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, 4:41pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/63 "2021-06-11T16:41:15Z")

</div>

The difficulty arises from the fact that URL should not exceed 64K bytes and the Base64 you are creating is much longer this leads to the URL to fail.

---

<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, 4:42pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/64 "2021-06-11T16:42:35Z")

</div>

I’ll have a look at this tomorrow, and tell you the result. It’s getting late.

---

<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, 4:57pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/65 "2021-06-11T16:57:22Z")

</div>

@muneer Yes, you’re right.

@codeswept I’ve never gotten a POST command to work in Thunkable but I know it’s possible.

Here’s the code I’m trying:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/9/b9088d6c31d8c8ae3f71e92d1ac1a5c090fd089a.png)

But it requires authentication that I haven’t gotten quite right in Thunkable.

I also tried this in Postman using a `curl` command but the API server returned a `414 Request-URI Too Large ` error so **I think I have to give up on this method.**

---

<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:10pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/66 "2021-06-11T17:10:05Z")

</div>

It looks like both of these APIs accept Base64 as input. Have you tried either?

> **[Detect text in images  |  Cloud Vision API  |  Google Cloud](https://cloud.google.com/vision/docs/ocr#vision_text_detection-drest)**

[https://ocr.space/ocrapi](https://ocr.space/ocrapi)

---

<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 12, 2021, 10:19am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/67 "2021-06-12T10:19:46Z")

</div>

Interesting!  
Last night I had a dream of a Curl Command chasing after me with a knife😖

I hoped that the second link offered GET calls but

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/3/d30455477fa0cba5cc301ac598db36959b7f22c1.png)

---

<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 12, 2021, 10:55am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/68 "2021-06-12T10:55:44Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/0/f006db54ad63bde008f85705efe489952bef3d0b.png)  
When I test it on my laptop, I get ‘try on a device’. When I try it on my tab, nothing turns up.

---

<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 12, 2021, 11:34am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/69 "2021-06-12T11:34:44Z")

</div>

I think you need to put `generate JSON from object` before `image of Canvas1` to have it as Base64 sting of the image

---

<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 12, 2021, 11:35am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/70 "2021-06-12T11:35:04Z")

</div>

Let me try that.

---

<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 12, 2021, 11:37am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/71 "2021-06-12T11:37:21Z")

</div>

After ‘set qp’ I don’t get anything in my 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 12, 2021, 11:42am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/72 "2021-06-12T11:42:33Z")

</div>

Should I put the Image of Canvas1 block in the header or as a Query Parameter?

---

<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 12, 2021, 11:49am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/73 "2021-06-12T11:49:19Z")

</div>

I have to check the documents of the API itself. I took a quick look on one of the examples in `Postman` and the only parameter in the header in the API key.

However, from what I know, both header and query part should not be long and you want a Base64 that is over 100K in size so you need to consider having it in the `body` part of the API.

---

<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 12, 2021, 11:50am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/74 "2021-06-12T11:50:18Z")

</div>

If I put it in the body part, then it doesn’t accept the CREATE OBJECT block. Do I directly use the ‘generate json’ block?

---

<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 12, 2021, 11:51am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/75 "2021-06-12T11:51:14Z")

</div>

Yes, Yes

---

<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 12, 2021, 11:51am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/76 "2021-06-12T11:51:33Z")

</div>

Cool, thanks! Trying that

---

<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 12, 2021, 11:53am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/77 "2021-06-12T11:53:00Z")

</div>

I got a ‘network request failed’ again.

---

<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 12, 2021, 11:54am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/78 "2021-06-12T11:54:05Z")

</div>

for the `body` part of the API. all engines expect text so even if you need to code it as an object in thunkable then you need to proceed that with `generage JSON from object`

---

<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 12, 2021, 11:54am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/79 "2021-06-12T11:54:46Z")

</div>

I have done that.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/4/84db2b18901c36e79d09f1a920a6928c9097421f.png)

---

<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 12, 2021, 11:57am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/80 "2021-06-12T11:57:49Z")

</div>

No. It should be `Base64image` parameter of the body.

You will need to use the create object to do that.

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

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