Uploading an image of a canvas to cloudinary

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
. What should I do?
Thanks,
@codeswept

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

See this: Share / Save Canvas image?

Cloudinary does support base64 so you’d need to use the upload API to upload the text string generated by the “image of canvas1” block.

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:

Thanks very much for this!

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

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:

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.

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.

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 :frowning:

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

(This is @tatiang)

@drted I found their documentation confusing but it’s here: https://cloudinary.com/documentation/image_upload_api_reference

I think pages likes this are more useful:

Hi! Do you have any solution here?

1 Like

Nope i haven’t found anything yet.

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

1 Like

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

1 Like

no and just found that thunkable returns with data scheme only

Hi there,

I took a look at this post and thought you might find this project 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

3 Likes

@jane is the project available for remix?

1 Like

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

1 Like

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

2 Likes

Cool, thanks!

2 Likes