# \[Solved\] how do I base64 encode an image?

**URL:** <https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457>\
**Category:** Questions about Thunkable X\
**Tags:** beginner, base64\
**Created:** [May 2, 2022, 2:31pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457 "2022-05-02T14:31:31Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![kartik14](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kartik14/32/44782_2.png) [@kartik14](https://community.thunkable.com/u/kartik14)\
**Post date:** [May 2, 2022, 3:04pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/2 "2022-05-02T15:04:09Z")

</div>

Hi @stephane_golonkaa71!

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 -

```auto
<!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)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/0/803efb191de09b376975e0f2ba8cd6ac80941e6f.png)
- and this block to retrieve the encoded value -  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/a/5a15a965096db482ce1f51e5d1f86d4aca3b7df7.png)

* * *

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 😉

---

_[View the full topic](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457)._
