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

<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: [November 21, 2020, 7:23am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/1 "2020-11-21T07:23:00Z")

</div>

Hi!

I’m making a drawing app, and I have a share feature for the drawings. For that, I’ve tried  
from Media-DB1 call upload image  
media= image of canvas1. It wasn’t working, so I tried  
if error-  
from label1 set text to error.  
It said  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/3/23569aef5384da1d08076e570dc3ef6ba14e5572.png)  
. What should I do?  
Thanks,  
@codeswept

---

<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: [November 21, 2020, 8:01am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/2 "2020-11-21T08:01:24Z")

</div>

The “image of canvas1” block returns a value in base64.

See this: [Share / Save Canvas image?](http://community.thunkable.com/t/share-save-canvas-image/464874/4)

Cloudinary [does support base64](https://support.cloudinary.com/hc/en-us/articles/203125741-Can-I-upload-using-DATA-URI-BASE64-) so you’d need to use the [upload API](https://cloudinary.com/documentation/image_upload_api_reference) to upload the text string generated by the “image of canvas1” block.

> **[Upload API Reference | Cloudinary](https://cloudinary.com/documentation/image_upload_api_reference)**

---

<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: [November 21, 2020, 8:19am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/3 "2020-11-21T08:19:35Z")

</div>

If you just want to share a screenshot with another person, I was able to share a screenshot of the canvas drawing via text message (Messages app on iPhone) using these blocks:

 ![Screen Shot 2020-11-21 at 12.18.55 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/6/06f32bd0f40d97783e0639efc6eb3808e54e3053.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: [November 21, 2020, 9:21am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/4 "2020-11-21T09:21:48Z")

</div>

Thanks very much for this!

---

<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: [November 21, 2020, 9:30am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/5 "2020-11-21T09:30:54Z")

</div>

I wasn’t able to find the API key from the docs you shared. Where can I get one from?

---

<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: [November 21, 2020, 6:21pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/6 "2020-11-21T18:21:56Z")

</div>

> I wasn’t able to find the API key from the docs you shared. Where can I get one from?

Your API key should be in your Cloudinary Dashboard.

I’m posting a _curl_ command that works and then I’m going to see if I can get it to work using Thunkable blocks:

```auto
curl --location --request POST 'https://api.cloudinary.com/v1_1/[YOUR CLOUD NAME]/image/upload?upload_preset=rpcv1fz5' \
--header 'api_key: [YOUR API KEY]' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'file=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

```

Granted, this is with an unsigned upload. I haven’t been able to get it to work with a signed (secure) upload.

---

<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: [November 21, 2020, 6:41pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/7 "2020-11-21T18:41:18Z")

</div>

When I use these blocks, I get “undefined” for the status. @drted Any ideas what I’m doing wrong with paremeters/headers? See the post above this for a working _curl_ command.

 ![Screen Shot 2020-11-21 at 10.40.07 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/e/ae91c62af2e197233910effba016cbbc98dba4eb.png)

---

<div class="post-metadata">

### Author: ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)
#### Post date: [November 21, 2020, 8:36pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/8 "2020-11-21T20:36:05Z")

</div>

Not sure. I’ve had a lot of problem getting the Query Parameters block to work consistently. Sometime I give up and put it in the URL ☹

---

<div class="post-metadata">

### Author: ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)
#### Post date: [November 21, 2020, 8:44pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/9 "2020-11-21T20:44:45Z")

</div>

@tatiang P.S. can you share a link to the documentation for the REST API command you are trying to use?

---

<div class="post-metadata">

### Author: ![secondaryaccount](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/secondaryaccount/32/91441_2.png) [@secondaryaccount](https://community.thunkable.com/u/secondaryaccount)
#### Post date: [November 21, 2020, 9:29pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/10 "2020-11-21T21:29:49Z")

</div>

(This is @tatiang)

@drted I found their documentation confusing but it’s here: [https://cloudinary.com/documentation/image\_upload\_api\_reference](https://cloudinary.com/documentation/image_upload_api_reference)

I think pages likes this are more useful:

> **[File upload using curl](https://support.cloudinary.com/hc/en-us/community/posts/360000183051-File-upload-using-curl-)**
>
>  I want to upload a file using curl, how to create a signature in the curl request ?
> else
> if I want to upload using unsign in curl what parameter need to passed in the request? 

---

<div class="post-metadata">

### Author: ![skulamester](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/skulamester/32/100480_2.png) [@skulamester](https://community.thunkable.com/u/skulamester)
#### Post date: [April 28, 2021, 7:29am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/11 "2021-04-28T07:29:37Z")

</div>

Hi! Do you have any solution here?

---

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

</div>

Nope i haven’t found anything yet.

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [April 28, 2021, 11:47am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/13 "2021-04-28T11:47:14Z")

</div>

i think we dont need cloudinary if you want a url try making a url like -  
`data:image/jpeg;base64,` + your base 64 string

---

<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: [April 28, 2021, 12:01pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/14 "2021-04-28T12:01:15Z")

</div>

Data schemes do not work on all phones. Have you tried it yourself?

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [April 28, 2021, 12:04pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/15 "2021-04-28T12:04:02Z")

</div>

no and just found that thunkable returns with data scheme only

---

<div class="post-metadata">

### Author: ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)
#### Post date: [April 28, 2021, 12:13pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/16 "2021-04-28T12:13:57Z")

</div>

Hi there,

I took a look at this post and thought you might find [this project](https://x.thunkable.com/projectPage/60894d71879cff0011b57b02/) interesting.

When you click the Button, it:

- Saves the image of the canvas as a cloud variables
- Uses this cloud variable as a source for the Image component in the app
- Displays the base 64 URL for the image on a Label

This works for me on Android, iOS and web. If it works in your project, you may find it easier to work with than the Cloudinary API. Make sure to connect your own Firebase DB to your project if you end up using this method!

I noticed that your error message in the original post said that it couldn’t upload the image of the Canvas to Cloudinary as it was an Object, but then found that I couldn’t attach a ‘generate JSON from Object’ block directly to the ‘image of Canvas’ block - I’ll mention this to the team.

Thanks,  
Jane

---

<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: [April 28, 2021, 1:35pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/17 "2021-04-28T13:35:22Z")

</div>

@jane is the project available for remix?

---

<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: [April 28, 2021, 1:36pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/18 "2021-04-28T13:36:27Z")

</div>

@jane I’m not able to view it. I think it’s private.

---

<div class="post-metadata">

### Author: ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)
#### Post date: [April 28, 2021, 1:48pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/19 "2021-04-28T13:48:53Z")

</div>

@codeswept @muneer Sorry about that! You should be able to view the project now.

---

<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: [April 28, 2021, 1:49pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/20 "2021-04-28T13:49:37Z")

</div>

Cool, thanks!

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