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

Juan_Antonio · August 31, 2021, 6:27pm

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.
![base64_23|690x461]

[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.]

(upload://33yicz2tHvtBCPOSJiF3U1QQnVV.png)

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.

Juan_Antonio · August 31, 2021, 6:28pm

Juan_Antonio · August 31, 2021, 6:39pm

TIMAI2 · September 2, 2021, 2:03pm

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

Juan_Antonio · September 3, 2021, 4:17pm

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.

Juan_Antonio · September 3, 2021, 4:17pm

Juan_Antonio · September 3, 2021, 4:31pm

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

Juan_Antonio · September 3, 2021, 4:32pm

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.

Juan_Antonio · September 3, 2021, 4:41pm

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://

file:///mnt/sdcard/gato.png
file:///mnt/sdcard/beep.mp3

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

/storage/emulated/0/gato.png
/storage/emulated/0/beep.mp3

Asset MIT Companion Android < 10
/storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/AppInventor/assets/

Asset MIT Companion Android >= 10
/storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/assets/

Asset Emulator
/mnt/sdcard/Android/data/edu.mit.appinventor.aicompanion3/files/AppInventor/assets/

Asset installed.
android_asset

Asset in old versions of MIT Companion (now deprecated)
/storage/emulated/0/AppInventor/assets

Juan_Antonio · September 3, 2021, 4:52pm

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:
https://www.pexels.com/es-es/

Juan_Antonio · September 3, 2021, 5:16pm

Juan_Antonio · September 8, 2021, 4:31pm

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)