# Converting Image Selected From App To BASE64

**URL:** <https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346>\
**Category:** Web API's\
**Tags:** help\
**Created:** [April 16, 2025, 11:49am UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346 "2025-04-16T11:49:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 16, 2025, 11:49am UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/1 "2025-04-16T11:49:53Z")

</div>

I really want help for a project of mine i have been trying to make, so here is what i want to make

In the app when the user clicks on button and selects the image i want to convert the image to base 64

> [@WEB API Firebase Storage It does not upload the file to the server](https://community.thunkable.com/t/web-api-firebase-storage-it-does-not-upload-the-file-to-the-server/2369895/4):
>
> Hello @whiterabbitstudio202 I’ve already created an app that uses the API Block to send an image file. I used Web Viewer and HTML code to convert the image file to base64 and then send it through the API. This is the code for HTML: \<!DOCTYPE html\> \<html\> \<body style="background-color:#18A2EB;"\> \<head\> \<meta charset="UTF-8" /\> \<meta name="viewport" content="width=device-width, initial-scale=1.0" /\> \<title\>Convert local file to Base64\</title\> \<script src="https://thunkab…

I have tried this method from the above link andd it works but i dont want to click the button from webviewer i want to select the image from my app and send it to web viewer to convert it to base 64

I would like someone to help me in this regard

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 16, 2025, 8:58pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/2 "2025-04-16T20:58:16Z")

</div>

Hello @sleepyboy170026bzpk, welcome to Thunkable! 🎉

The only way to pass the image into the web viewer is a URL, so you will need to upload the image to Cloudinary first.

Here are some examples: [https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/8](https://community.thunkable.com/t/upload-images-to-cloudinary-using-web-api-only/1701875/8)

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

Be sure to check out [How to ask Great Questions v2.0](https://community.thunkable.com/t/how-to-ask-great-questions-v2-0/2689983/1), the [Community Guidelines](https://community.thunkable.com/t/community-guidelines/78/8), and our [Getting Started Guide](https://docs.thunkable.com/getting-started/get-started) to make the best of your Thunkable Community experience!

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 17, 2025, 9:55am UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/3 "2025-04-17T09:55:51Z")

</div>

thanks for your help, actually i was uploading the images in cloudinary itself but i dint want to use cloudinary thats why i was seeking for an alternate solution that solution being Gdrive so is there any other way without cloudinary because i do not want to do that, alslo while reading the forums i came across a post which said that using zapier or [make.com](http://make.com) we can connect Gdrive so can u guide and help me out through this

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 17, 2025, 8:41pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/4 "2025-04-17T20:41:07Z")

</div>

Hello @sleepyboy170026bzpk  
As mentioned in our [docs](https://docs.thunkable.com/settings/assets), Google Drive Image links don’t work inside the app!  
Could you please share the reason you would like to stop using Cloudinary?

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 18, 2025, 9:58am UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/5 "2025-04-18T09:58:51Z")

</div>

i know that google drive link don work the app so what im trying to achieve is that when i upload and image to my app by selecting the image when i click a button in the app and then the image is converted into base 64 which is then sent to my Gdrive using google script, the sending to Gdrive part i have achieved myself but converting the image selected to base 64 is something i cannot achieve the way i want to which is mentioned properly in my first message in this topic

The reason i dont want to use cloudinary is that its not that fast for me and also not very scalable in terms of storage and money.

Just one again read my first post to understand what I’m trying to achieve

Thanks  
Im waiting

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 18, 2025, 11:08pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/6 "2025-04-18T23:08:59Z")

</div>

Hi @sleepyboy170026bzpk  
Thank you for snaring more information.  
I understand what you need to build but the solution is to use HTML code to do this.  
It is not exactly what you need but just as an example here is a new module that converts the image from camera to base64: [https://community.thunkable.com/t/capture-images-to-base64-with-camera-on-web-now-possible-via-module/3751343](https://community.thunkable.com/t/capture-images-to-base64-with-camera-on-web-now-possible-via-module/3751343)

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 19, 2025, 12:26pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/7 "2025-04-19T12:26:48Z")

</div>

Hi @ioannis  
The solution which u have given is really great but when i use it

1. It takes very long to convert the base 64 image
2. It almost crashes the app when testing it with live in the phone “Thunakble Live isn’t responding” andd when i select wait option in the popup on my phone then after 5 seconds or so the base 64 comes on the label
3. As i said its a wonderful project but this project [Thunkable](https://x.thunkable.com/projects/6439364670a0fe62a9e6edf7/5b9ddc5e-5b0a-44ae-8c4c-f047c0fb634e/settings)  
and the one which u shared in the above post are not very diff

Once again ill just clarify what i want to achieve  
i want to select the image from within the app that is i want to click the button added by me in the app andd then that button sends the image to the webviewer but the above projects have it in such a manner where the button is already present in html code and take the image from there  
or  
If you know any way to connect sent the files through zapier or [make.com](http://make.com) using the webviewer html code, please do help me with that

Thanks for your efforts and cooperation  
If you have any other solutions do let me know.

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 21, 2025, 3:58pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/8 "2025-04-21T15:58:37Z")

</div>

Hi @ioannis  
Any updates…

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 21, 2025, 4:38pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/9 "2025-04-21T16:38:51Z")

</div>

Hi @sleepyboy170026bzpk  
Thanks for your feedback but building this for you is going beyond our available scope of support.  
If you share specific blocks and HTML code anyone in the community could help you.

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 21, 2025, 4:41pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/10 "2025-04-21T16:41:10Z")

</div>

@ioannis  
Thanks for your support just one last help does anyone in the commmunity know any way to link up zapier and Gdrive using the webviewer component

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 21, 2025, 4:44pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/11 "2025-04-21T16:44:17Z")

</div>

You don’t need to link web viewer directly with these tools. You can use the message received from Web Viewer component and send it to these tools using Web API blocks.

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 21, 2025, 4:58pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/12 "2025-04-21T16:58:40Z")

</div>

yes @ioannis i certainly know that i have to do that, i just need a guide or an example project done by anyone from the community or some valuable insight on how to atleast start with it

---

<div class="post-metadata">

**Author:** ![sleepyboy170026bzpk](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@sleepyboy170026bzpk](https://community.thunkable.com/u/sleepyboy170026bzpk)\
**Post date:** [April 27, 2025, 3:43pm UTC](https://community.thunkable.com/t/converting-image-selected-from-app-to-base64/3746346/13 "2025-04-27T15:43:11Z")

</div>

For anyone facing the same challenge here is a reference model of uploading images to Gdrive without converting to base 64 but in mit app inventor u can do the same in thukable and achieve the same result i think so

> **[METRIC RAT AI2 - Upload Any File to Google Drive, using Google Drive API](https://ai2.metricrat.co.uk/guides/upload-any-file-to-google-drive-using-google-drive-api)**
>
> INTRO
> Herewith, another method to upload files from your AppInventor App to Google Drive, this time using the Google Drive API, so no messing around with google apps script, or converting files to base64, ... just clean and simple file uploads (on...