Save image, sound, clip (video), canvas in TinyDB. Extension Base 64. Download file from the web and convert it to string

In this old topic I put an example to take an image with the Cam, convert it to a Base 64 string, save that string in a TinyDB. Read the content of the string from the TinyDB, convert it to a file and display it in an image component. I used the com.KIO4_Base64.aix extension that you can download from:
Create Build Crear App Inventor Extensions Añadir librería externa Add lib Extension. @UsesLibraries. Pasar imagen a String y viceversa. Base 64.

[I, Juan Antonio (@Juan_Antonio), attest that I am the author of the extension com.KIO4_Base64.aix and grant that the extension included in this project is free and that MIT has a non-exclusive irrevocable license to republish the extension as part of the project file for the purposes of the MIT App Inventor Appathon 2022.]


Now with the suggestions and help of @TIMAI2 I have modified the extension and the application.

1.- Image to TinyDB by Base 64.

Base64_Direct_TinyDB_2.aia (43.9 KB)

I have added these blocks:

The application deals with the following:

1.- We take a picture with Camera component. We get the image file.

2.- Using FileToStringDirect, convert the image into a Base64 string and save that string in a TinyDB, the tag will be the imageName.

3.- Once the string is saved in TinyDB, we delete the image file from its location with DeleteFile block:

/storage/emulated/0/Pictures/app_inventor_1844444444.jpg [Android < 10] [API <29]

/storage/emulated/0/Android/data/'namepackage'/files/Pictures/app_inventor_1844444444.jpg [Android >= 10]

4.- Through the StringToFileASDDirect block, we take the content of the TinyDB, that is, the string and copy it to a file in ASD, /1844444444.jpg

5.- The file will be in /storage/emulated/0/Android/data/'namepackage'/files/1844444444.jpg

6.- Show this file in Image component.

7.- This file is deleted from its location in ASD, using the DeleteFile block.

8.- It is verified that it has been deleted using the FileExists block.

  • The code must work with all versions of Android.

  • @TIMAI2 tells me that Android 11 gives the error:

908 WRITE_EXTERNAL_STORAGE permission error (denied)

This is a known bug that you can find in other topics of this Community.

- These examples are made with the collaboration of @TIMAI2 and @Juan_Antonio

Thanks @TIMAI2.


It is possible to apply the same approach for files created by:

  • SoundRecorder component
  • Camcorder component
  • Canvas saveAs (not Save)
  • Downloaded Files from online resource (Web component - once it is fixed!)

thus freeing you from the vagaries of the android file system

1 Like

2.- Sound to TinyDB by Base 64.

Base64_Direct_TinyDB_Sound.aia (37.6 KB)

1.- Record Sound.
2.- sound file to String by Base 64.
3.- Store string in TinyDB.
4.- String to file in ASD.
5.- Play Sound.


3.- Video (clip) to TinyDB by Base 64.

Base64_Direct_TinyDB_Camcorder.aia (36.7 KB)

1.- Take video.
2.- Save video to file then to String.
3.- Store string in TinyDB.
4.- Getvalue string from TinyDB
5.- String to file in ASD
6.- Show video, deleting any files.

clip is a uri:
clip: content://media/external/video/media/265218

using the extension we convert it to path:
clipPath: /storage/emulated/0/DCIM/Camera/VID_20210902_104632.mp4


4.- Canvas to TinyDB by Base 64.

Base64_Direct_TinyDB_Canvas_2.aia (37.2 KB)

1.- Save Canvas to file to String.
2.- Store string in TinyDB.
3.- Getvalue string from TinyDB.
4.- String to file in ASD.
5.- Show Canvas image, deleting any files.


5.- Summary:

Variable image in Camera is:
file:///storage/emulated/0/My Documents/Pictures/app_inventor_16344444.jpg [MIT Companion]
file:///storage/emulated/0/Pictures/app_inventor_16344444.jpg [Android <10]
file:///storage/emulated/0/Android/data/'namepackage'/files/Pictures/app_inventor_16344444.jpg [Android >=10]

Variable sound in SoundRecorder is:
/storage/emulated/0/sound_16344444.3gp [Android <10]
/storage/emulated/0/Android/data/'namepackage'/files/sound_16344444.3gp [Android >=10]

Variable clip in Camcorder is:
content://media/external/video/media/265218 [it is a uri]
/storage/emulated/0/DCIM/Camera/VID_20210902_104632.mp4 [uri to path with an extension]

Source in Image, Player and VideoPlayer.
if start with /mnt, is necessary file://


if start with /storage, isn't necessary file://


Asset MIT Companion Android < 10

Asset MIT Companion Android >= 10

Asset Emulator

Asset installed.

Asset in old versions of MIT Companion (now deprecated)


6.- Download an image from the web and convert it to a Base 64 string.

Base64_Direct_TinyDB_WebFile.aia (117.8 KB)

1.- Download an image file from the web and save it in ASD/temp/nameFile.png
2.- Show image file in Image1 component.
3.- In event gets string of ASD/temp/nameFile.png and convert ASD/nameFile_mirror.png
4.- Show imageFile_mirror.png in Image2 component.

Source image:


7.- Blocks: ImageToBase64, Base64ToImage, CanvasToBase64 and TakePictureToBase64.

These blocks were ideas from @TIMAI2 :

  • Convert an Image component to string Base 64. [This code was made by @Kumaraswamy]

  • Set picture in Image component by string Base 64.

  • Convert image in Canvas component to string Base 64. [This code was made by @Kumaraswamy]

  • Take picture with Camera component and convert image to string Base 64 [This code was made by @TIMAI2]

Base64_Image_Canvas.aia (488.3 KB)

Related topic:


these are some great examples...
can you please also create a thread in the #extensions category to present the extension including a link to download the extension?
Thank you



Original KIO4_Base64 Extension is updated, you can get it here:

should be the same link as on your site

1 Like

Why? What have I forgotten and not added in the program code? Please Help.
Runtime Error Unsupported path /storage/emulated/0/storage/emulated/0/Android/data/

1 Like

If you want to save to your ASD, do it like this:

the block expects a filename in address, I do not believe this will handle google drive links.
@Juan_Antonio may know different!

1 Like


Thanks, but not support google drive. do you have solution for google drive files. :thinking: :pray:

1 Like

:pray: :sob:
I think that.

1 Like

Use the web component (once it is fixed!), that way you can give it a filename when you download.