# \[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:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 2, 2022, 2:31pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/1 "2022-05-02T14:31:31Z")

</div>

Hello,

Do you know when “base64 encoding" will be available in thunkable drag and drop?

Thank in advance

Best regard

---

<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 😉

---

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 2, 2022, 4:25pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/3 "2022-05-02T16:25:44Z")

</div>

Hello,

Thank for your answer but I don’t want to convert text to base64, I would like convert an image

Best regard

---

<div class="post-metadata">

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

</div>

> [@kartik14](#):
>
> I don’t think this feature will be available soon in Thunkable for now.

Ah but we were soooo close:

> [@Image to Base64 encoded string new component](https://community.thunkable.com/t/image-to-base64-encoded-string-new-component/1624709):
>
> I just tested the newly added component in the Camera and Media drawer. [image] I gave it a URL to test what will happen if the image is not part of the project assets. The process is slow but it works. I was able to use the API I built to save the image in Google drive and it worked successfully. Thank you Thunkable team.

---

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 2, 2022, 5:29pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/5 "2022-05-02T17:29:24Z")

</div>

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

---

<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:** [May 2, 2022, 5:56pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/6 "2022-05-02T17:56:21Z")

</div>

See this image in the Drag and Drop Blocks screen  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/5/45cd75c9449c3534a555ab54c5754bfd1534f245.png)

---

<div class="post-metadata">

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

</div>

@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.

---

<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:** [May 2, 2022, 7:37pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/8 "2022-05-02T19:37:34Z")

</div>

> [@tatiang](#):
>
> Does the “any type of file from device” block convert images to base64?

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](https://x.thunkable.com/projectPage/61f68431c3761001dba12df1)

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [May 2, 2022, 8:12pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/9 "2022-05-02T20:12:14Z")

</div>

@muneer created this demo when i was trying to help someone with ximilar issues:  
[https://x.thunkable.com/projectPage/61f68431c3761001dba12df1](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.

---

<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 3, 2022, 3:09am UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/10 "2022-05-03T03:09:24Z")

</div>

@tatiang I must’ve missed that post. Glad to hear we are getting closer to it `:)`

* * *

---

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 3, 2022, 9:46am UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/11 "2022-05-03T09:46:55Z")

</div>

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

 ![Capture](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/e/9ec75d0aa93257f33ab4e430c1ec349bb2f38962.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [May 3, 2022, 2:57pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/12 "2022-05-03T14:57:51Z")

</div>

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.

---

<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:** [May 3, 2022, 3:12pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/13 "2022-05-03T15:12:05Z")

</div>

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.

---

<div class="post-metadata">

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

</div>

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.

---

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 3, 2022, 4:24pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/15 "2022-05-03T16:24:06Z")

</div>

Thank, yes the script should also work with images from the camera

thank in advance

best regard

---

<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:** [May 4, 2022, 11:33am UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/16 "2022-05-04T11:33:35Z")

</div>

> [@tatiang](#):
>
> it requires a base64 image format.

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`

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/d/dde45c13ce95642a8e4feb3679768ae008124def.png)

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 4, 2022, 11:37am UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/17 "2022-05-04T11:37:32Z")

</div>

Love this!!!

---

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 4, 2022, 2:17pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/18 "2022-05-04T14:17:31Z")

</div>

Thank you but it is not that I would like

thank for your time

best regar

---

<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:** [May 4, 2022, 3:37pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/19 "2022-05-04T15:37:19Z")

</div>

> [@stephane\_golonkaa71](#):
>
> it is not that I would 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.

---

<div class="post-metadata">

**Author:** ![stephane\_golonkaa71](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@stephane\_golonkaa71](https://community.thunkable.com/u/stephane_golonkaa71)\
**Post date:** [May 4, 2022, 4:21pm UTC](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/20 "2022-05-04T16:21:19Z")

</div>

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

 ![Sans titre](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/6/f6249bb35591f5e723d26aa8af6527514e887b98.png)

[Next page](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457.md?page=2)