Hello,
Do you know when “base64 encoding" will be available in thunkable drag and drop?
Thank in advance
Best regard
I don’t think this feature will be available soon in Thunkable for now. But let’s hope it does. I’d like to show you a work-around to this, which is like -
- create an html file named ‘encode.html’ in (any preferred editor) with this code -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
var ThunkableWebviewerExtension = {
postMessage: function (message) {
if (window.ReactNativeWebView) {
window.ReactNativeWebView.postMessage(message);
} else {
window.parent.postMessage(message, '*');
}
},
receiveMessage: function(fxn) {
var callbackFunction = function(event) {
if (typeof fxn === 'function') {
fxn(event.data)
}
};
document.addEventListener('message', callbackFunction, false);
window.addEventListener('message', callbackFunction, false);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var test;
var value;
ThunkableWebviewerExtension.receiveMessage(function(message) {
value = message;
encoded = btoa(value);
ThunkableWebviewerExtension.postMessage(encoded);
});
</script>
</body>
</html>
- upload this file into assets of your project, and add a webviewer to your project.
- set the webviewer’s url in designer properties to ‘encode.html’ (just the file’s name)
- now on the blocks side, use this block to post data to the file - (message = whatever you want to encode)
- and this block to retrieve the encoded value -
Now you have your own Base64 encoder in your app. Let me know if this works for you. 
P.S. don’t get thrown off by the html code, it is a very simple process 
Hello,
Thank for your answer but I don’t want to convert text to base64, I would like convert an image
Best regard
Ah but we were soooo close:
thank for your answer but I don’t find Camera and Media drawer, I have just Camera and there isn’t base64 encoding
thank in advance
Best regard
See this image in the Drag and Drop Blocks screen
@stephane_golonkaa71 Sorry for the confusion. The block had been added but is no longer available. I just meant that it seemed they had figured it out at one point so hopefully they can add it back in soon.
@muneer Does the “any type of file from device” block convert images to base64? I actually need that for an app I’m making, too.
Very close to Base64. It returns a blob which you can use as image and you can save too.
If you want a Base64 string then I made a demo app to read the file and provide the Base64 value of it,
https://x.thunkable.com/projectPage/61f68431c3761001dba12df1
@muneer created this demo when i was trying to help someone with ximilar issues:
https://x.thunkable.com/projectPage/61f68431c3761001dba12df1
it assumes you want to convert an image to base64 so it starts with a file picker , when you click on it - it asks if you want to get image from storage or camera. in either case, it returns the image in base64 format.
@tatiang I must’ve missed that post. Glad to hear we are getting closer to it :)
Someone can correct me if I’m wrong but I believe that website/script only works for images immediately uploaded from a device. I’m also looking for a way to convert an image from a green Photo block or url to base64.
I can change the script to convert image from URL. The script should also work with images from the camera which should substitute the green photo block.
Thanks, @muneer! Ximilar can classify images or image urls using AI but to show a heat map of how the AI engine works, it requires a base64 image format.
Thank, yes the script should also work with images from the camera
thank in advance
best regard
I updated the project and included a Text Input to supply your own image URL. It should now generate Base64 string from URL. However, if there is a CORS restriction from the server side (the site the image is saved in) then the Base64 generation will fail.
I tried this URL https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0
Love this!!!
Thank you but it is not that I would like
thank for your time
best regar
I’m not sure what you are looking for but you have the project and the HTML files and you are free to do you own modifications.
Should you think I can help you in some changes, you need to explain it clear and I will see what I can do.
Hello,
Thank your for your help it is very nice but I don’t speak english very well so it’s difficult for me to explain. I would like to convert an image from camera or device or canvas to base64 format.I don’t mind using multiple web_viewer.But I don’t want select image via web_viewer. Maybe with the image in attachment it will more clear.
Thank in advance
Best regard
