Extension: File to String. String to File. Base64. Upload file to webserver. Save image file to TinyDB

Example 1: sound file to string.

Convert image, sound, doc,… file to String in Base64, and String Base64 in file.

p177i_Extension_File2String.aia (208.3 KB)
com.KIO4_File2String.aix (204.8 KB)

This extension is updated (august 2019) in:
http://kio4.com/appinventor/277_extension_imagen_string.htm

10 Likes

felicitaciones muy buen trabajo :smiley:

Gracias Andrés.

Code PHP when file is in hosting, change:

Character + --> - (char 62, plus to dash)
Character / --> _ (char 63, slash to underscore)
Character = --> * padding

Related post:

Fixed by Taifun.

1 Like

Example 2: Upload an image, sound, doc file,… to web server.

With this extension and PHP you can upload an image, sound, doc file,… to web server.

  • This extension get a file (/mnt/sdcard/AppInventor/assets/yoeat.png) and converts to String in Base64 Web Safe (you can send by internet).

  • A PHP code receives and saves this string in a file in remote site.

  • By ‘echo’, code PHP returns string, ‘AppInventor’ get that string, decodes to image and show in an Image component.

  • In all this process string can ‘take a walk’ by internet because is string base64 web safe.

  • PHP code as well, get imagen.txt, decode b64 and changes some chars required in web safe to convert in a normal image: foto.png

p327C_subir_archivo_imagen_Base64.aia (1.8 MB)

com.KIO4_File2String.aix (204.8 KB)

PHP code:
<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido); 
fclose($auxi);

echo $contenido;

$foto = 'foto.png';
$auxi = fopen($foto, 'w');
$contenido2 = strtr($contenido, '-_,', '+/=');
$contenido2 = base64_decode($contenido2);
fwrite($auxi, $contenido2); 
fclose($auxi);

?>

Mediante esta extensión podemos convertir un archivo de música, imagen, documento,… en cadena de caracteres Base 64 Web Safe, es decir que se puede transmitir por internet como cadena de caracteres.

En el ejemplo que he puesto, una imagen se convierte a string, se envía a un servidor web mediante PHP y se guarda en el archivo: imagen.txt.
Además, cuando ese contenido está en el servidor, el mismo código PHP lo convierte en imagen visible: foto.png, cambiándole tres caracteres.

Puedes ver el tutorial completo en español en:

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

Juan Antonio Villalpando.

thank you for the example… sounds great…

Unbenannt

however the screenshot is a bit misleading, because your method is not be able to convert a file stored in the assets of the app, is it? You will first have to copy the file from the assets to the internal sdcard and convert it there…

Taifun


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

Hi @Taifun, the idea of this extension is get an external file, perhaps with an Explorer, and upload to web o save to TinyDB, or other file.

Example 3: Save an image file to TinyDB.

In this new example, this extension saves an image file in a TinyDB.

  • We get an image file, by File2String block this file is converted to String, and this is saved to TinyDB.

  • We get String from TinyDB, by String2File convert to File.

  • In component Image show this file.

With this extension also can save a sound file in TinyDB.

p327D_tinydb_archivo_imagen_Base64.aia (1.8 MB)

More information:
http://kio4.com/appinventor/277_extension_imagen_string.htm

2 Likes

yes I understand
and to avoid misunderstandings, let me suggest you to NOT use the path /AppInventor/assets as example path, because someone might think to be able to convert a file from the assets directly

keep up the good work

Taifun

1 Like

Example 4: Explorer and upload an image file to web.

In this example we use an explorer extension:
https://groups.google.com/forum/#!category-topic/mitappinventortest/app-inventor-extensions/v_kLMXr8fgM

With that extension we choose an image file from SdCard.

  • Then extension File2String convert to Base64. PHP code upload file to web server.

Restrictions in this example:

  1. The uploaded file always has a name foto.png (you can change this in your PHP code)
    2.- You can look image example in: http://kio4.com/appinventor/php/foto.png but this web directory is HotLink protect, it is necessary look image from:
    http://kio4.com/appinventor/277_extension_imagen_string.htm

  • Utilizando las extensiones: com.KIO4_Explorer.aix y com.KIO4_File2String.aix
    podemos elegir un archivo y subirlo a nuestro servidor web mediante un código PHP.

p328E_subir_archivo_B64.aia (216.5 KB)
com.KIO4_Explorer.aix (10.7 KB)
com.KIO4_File2String.aix (204.8 KB)

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

Example 5: Explorer and Store image to TinyDB. Get image from TinyDB.

In this example we Explorer and get a path of an image of SdCard.
Then we convert that image to String Base 64 and Store that string in a TinyDB with a Tag.
We can recovery that string from TinyDB and convert to image file.
That image file can show in a component Image.

  • In this code image always store with name /mnt/sdcard/imagenkio.png, you can change that.
  • With this code if you store a .jpg or .gif image as .png, and then get image as .png, works.
  • With this method you can store in TinyDB images, sounds, docs files.

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

Mediante una extensión de Explorador de archivos podemos localizar la ruta de un archivo de imagen en la SdCard. Esa imagen la podemos convertir a String Base 64 y guardarla en una TinyBD mediante una etiqueta.
Más tarde podremos recuperar ese String, convertirlo a un archivo de imagen y presentarlo en un componente de Imagen.
p328F_imagen_tinydb_B64.aia (218.6 KB)

com.KIO4_Explorer.aix (10.7 KB)

com.KIO4_File2String.aix (204.8 KB)

2 Likes

Thanks for this fantastic extension.
I am wondering that how we can know the encoded string is containing a photo or some audio or video?

Tnanks @kevikun.
You can get string as show in first example of this post:
Example 1: sound file to string.

With block File2String, get string of a file.
Then with GotString, use string variable and load a Label1.Text

in all the examples, you already know the file type is a photo or audio, so you know how to set the pathsave.
but in a chat app, when you receive one encoded string, you don’t know what is the file type inside the string, even after decoding.
any way, I found a way to tell the receiver what tpye it is, by adding another field, indicate audio or photo or video, together with the string.

Hi @kevinkun, that is a good idea to indicate type of file.

In PHP you can get mime type with this code:
<?php
// Juan A. Villalpando
// kio4.com

$datos=$_POST;
$contenido=$datos['contenido'];

$archivo = 'imagen.txt';
$auxi = fopen($archivo, 'w');
fwrite($auxi, $contenido); 
fclose($auxi);

echo $contenido;

$contenido2 = strtr($contenido, '-_,', '+/=');
$contenido2 = base64_decode($contenido2);
// Obtiene mime type
$tipo = finfo_open();
$mime_type = finfo_buffer($tipo, $contenido2, FILEINFO_MIME_TYPE);  // obtiene: image/png
$arr = explode("/", $mime_type, 2);
$extension = $arr[1]; // obtiene: png

// $foto = 'foto.png';
$foto = 'foto.'.$extension;
$auxi = fopen($foto, 'w');

fwrite($auxi, $contenido2); 
fclose($auxi);
?>
1 Like

muy buena extension @Juan_Antonio, ahora, como puedo decodificar el archivo y mostrar la imagen en una pagina?

hasta ahora tengo este codigo que me muestra el contenido del archivo:
$myfile = fopen(“imagen.txt”, “r”);
echo fread($myfile,filesize(“imagen.txt”));
fclose($myfile);

pero como la convierto a imagen de nuevo para mostrarla en una web?

Hola @Lml_DLGdo

Mira el ejemplo que he puesto más arriba en esta página:
Example 4: Explorer and upload an image file to web.

y consulta el código PHP que he puesto.

listo ya quedo, saludos, gracias…

A post was split to a new topic: How can I send an image file via bluetooth?

Hello everyone, I have made the examples for a csv file, but I do not send any information, use the same php code. what will I be doing wrong.