Hello,
Do you know when “base64 encoding" will be available in thunkable drag and drop?
Thank in advance
Best regard
3 Likes
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 
2 Likes
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:
2 Likes
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
1 Like
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.
1 Like
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
2 Likes
@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.
1 Like
@tatiang I must’ve missed that post. Glad to hear we are getting closer to it :)
Hello,
Thank you for your demo which is very interesting but I can’t manage to adapt it to postmessage image on the web_viewer to receive in base64
Best regard
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.
1 Like
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.
1 Like
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
1 Like
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
3 Likes
Love this!!!
1 Like
Thank you but it is not that I would like
thank for your time
best regar
1 Like
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.
1 Like
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
1 Like