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

7 Likes

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 Likes

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

3 Likes

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.

2 Likes

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

2 Likes

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/

2 Likes

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_B.G]
    base64_28a

  • Set picture in Image component by string Base 64.
    base64_23b

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

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

Base64_Image_Canvas.aia (488.3 KB)

Related topic:

3 Likes

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

Taifun

2 Likes

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

http://kio4.com/appinventor/277i_extension_imagen_string.htm

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/edu.mit.appinventor.aicompanion3/files/uc

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

2 Likes

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.

2 Likes