# Howdo i upload an base 64 image to Cloudinary

**URL:** <https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757>\
**Category:** Questions about Thunkable X\
**Created:** [November 9, 2021, 10:02am UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757 "2021-11-09T10:02:15Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 10:02am UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/1 "2021-11-09T10:02:15Z")

</div>

hi all i am trying to upload an base64 image to cloudinary.  
but i get an error saying:  
Unsuported scource URL: [object object]  
These are my blocks:  
 ![Screenshot 2021-11-09 10.59.31 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/5/251501dc745167d9e26e8c25eeced0de2c0e86ad.png)  
And here is the image picker:

> **[GitHub - lukeplays33/Image-PIcker](https://github.com/lukeplays33/Image-PIcker)**
>
> Contribute to lukeplays33/Image-PIcker development by creating an account on GitHub.

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:** [November 9, 2021, 12:08pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/2 "2021-11-09T12:08:21Z")

</div>

I didn’t understand the issue and the link is showing just a blank page.

To upload to `Cloudinary` you need the API URL  
`https://api.cloudinary.com/v1_1/<CLOUD_NAME>/image/upload`

And you need to pass the following parameters as part of the `Body` parameter:  
-file=Base64 string or the URL file.  
-timestamp=  
-api\_key=\<API\_KEY\>  
-signature=

It should work directly from Thunkable but you need to set your account options in `Cloudinary` as `unsigned image upload`

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 1:02pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/3 "2021-11-09T13:02:29Z")

</div>

Sorry @muneer uploaded the wrong link, should be fixed now.  
However i am using the media db component not an 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:** [November 9, 2021, 3:13pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/4 "2021-11-09T15:13:19Z")

</div>

From the HTML of your `Web Viewer`, it seems it only asks the user to enter a URL of an image which you can use the simple `Text Input` for it.

I suggest the following:

- Use the `Text Input` component or the `Web Viewer` you designed to have the user supply a URL of an image.
- Assign the URL to an `image` component in the screen to show the image to the user.
- Provide a `Button` for the user to upload to `Cloudinary` if the image is displayed OK in the screen.

This way you are uploading a URL that you know it actually works in the app.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 3:19pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/5 "2021-11-09T15:19:06Z")

</div>

Thanks,  
But i want the user to be able to upload An image from the device or to supply An URL.

P.S.  
You can (hopefully) see What i am trying to do in  
The settings page of Sketch

Also it’s An invisible button that is only shown inside of the settings page.

> [@muneer](#):
>
> From the HTML of your `Web Viewer`, it seems it only asks the user to enter a URL of an image

---

<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:** [November 9, 2021, 3:28pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/6 "2021-11-09T15:28:19Z")

</div>

For files from the device, you cannot supply a URL because the browser, for security reasons, will not provide the full path of the image file and the browser will not process (upload) a file starting with `file:///`.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 3:32pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/7 "2021-11-09T15:32:11Z")

</div>

So i can’t Use cloudinary then?  
Do you have Any other suggestions for uploading An base64 image to Google sheet?

---

<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:** [November 9, 2021, 3:42pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/8 "2021-11-09T15:42:57Z")

</div>

> [@sketch](#):
>
> uploading An base64 image

You can read a Base64 image in Google Apps Script and you can save it to file too.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 3:46pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/9 "2021-11-09T15:46:39Z")

</div>

> [@muneer](#):
>
> you can save it to file too.

I am not sure What you mean by that.  
Do you mean uploading it to google sheet?

> [@muneer](#):
>
> You can read a Base64 image in Google Apps Script

Also  
I don’t know how to do that😅

Anyways thanks for your time!

---

<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:** [November 9, 2021, 4:32pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/10 "2021-11-09T16:32:56Z")

</div>

This sample function (from SO) with small modification. It will create a `Blob` in memory, give it a name, put contents to it and save it to drive.

```auto
function createNewBlob() {

  var imageData = "R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7";
  var blobNew = Utilities.newBlob(Utilities.base64Decode(imageData),'image/png','Sample.png');
  blobNew.setName("BlobTest.png");

  Logger.log(blobNew.getName());

  var newFileReference = DriveApp.createFile(blobNew);
  newFileReference.setName('Sample.png');
};

```

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 5:59pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/11 "2021-11-09T17:59:47Z")

</div>

Welp.  
it looks like google sheets doesn´t accept cels bigger than 500000 letters and my base 64 images are way bigger than 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:** [November 9, 2021, 6:12pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/12 "2021-11-09T18:12:03Z")

</div>

> [@sketch](#):
>
> google sheets doesn´t accept cels bigger than 500000 letters

Yes, you are correct. This is the upper limit of the cell in Google sheet

You can if you want, for a specific reason that you have, distribute the text on number of cells each has 4500 or so and then whenever you want the Base64 again you will need to read all cells and join them together.

For me it is better to create a doPost(e) Google Apps Script and pass the required data direct to it.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 9, 2021, 6:32pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/13 "2021-11-09T18:32:50Z")

</div>

Okay!  
After some debuggin i found out that there nothing wrong with the file picker at all!  
Small pictures do get the right base 64 string uploaded but when they are bigger than those 500000 tokens it fails.

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [November 12, 2021, 1:09pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/14 "2021-11-12T13:09:18Z")

</div>

I’ve decided to upload the image to firebase this does work.  
Thanks for helping!

---

<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:** [November 12, 2021, 1:29pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/15 "2021-11-12T13:29:25Z")

</div>

Whenever you wish to save the base64 image to a file you might use this `Tutorial`:

> [@Save Canvas Image to your Google drive](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950):
>
> For this tutorial you will need to code a short script in Google Apps Script which you can access it from within Google Drive. You will need to use Web API component to talk to the script you created in Google Apps Script and pass the parameters using the Query Parameter section the the Body section. The Base64 image cannot fit into the Query Parameter section and therefore will will need to pass it using the Body section of the Web API. The Thunkable project is very simple and is used to demo…

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:14pm UTC](https://community.thunkable.com/t/howdo-i-upload-an-base-64-image-to-cloudinary/1605757/16 "2024-11-08T13:14:29Z")

</div>


