Howdo i upload an base 64 image to Cloudinary

Questions about Thunkable
1

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
And here is the image picker:

Thanks!

1 Like
2

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

1 Like
3

Sorry @muneer uploaded the wrong link, should be fixed now.
However i am using the media db component not an api.

1 Like
4

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.

1 Like
5

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.

1 Like
6

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:///.

2 Likes
7

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

1 Like
8

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

9

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

Also
I don’t know how to do that😅

Anyways thanks for your time!

1 Like
10

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.

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');
};
1 Like
11

Welp.
it looks like google sheets doesn´t accept cels bigger than 500000 letters and my base 64 images are way bigger than that.

1 Like
12

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.

13

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.

1 Like
14

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

1 Like
15

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

1 Like