En el post de hoy veremos cómo convertir un archivo (seleccionado en un input de tipo file) a su representación en base64 como cadena usando JavaScript.

Técnicamente hablando, vamos a convertir un File a un string en base64 usando FileReader.

Aunque base64 ocupa más tamaño que el archivo original, en ocasiones es necesario convertir un fichero binario a este formato para su fácil transporte o almacenamiento.

Nota: en este ejemplo aprenderás a convertir un archivo seleccionado en un input, pero puedes hacer lo mismo con un archivo recuperado del OPFS o incluso un archivo descargado con fetch; las posibilidades son infinitas.

Input

Primero veamos el input de tipo file en donde el usuario va a seleccionar el archivo a convertir a base64. Está así:

<input type="file" id="fileInput">

Vamos a obtener una referencia al mismo y escuchar el evento change. Cuando ese evento se dispare, convertiremos el fichero a cadena en base 64.

Función para convertir a base64

Veamos la función de JavaScript que recibe el archivo de tipo File y devuelve una promesa que, al resolverse, tendrá la representación del archivo en base 64.

Para esto vamos a usar un FileReader e invocar al método readAsDataUrl, de modo que en el evento onload del reader podremos acceder a la cadena base64 en reader.result.

const fileToBase64 = async function (file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = async () => {
            resolve(reader.result);
        };
        reader.onerror = error => {
            reject(error);
        }
        reader.readAsDataURL(file);
    });
}

Toma en cuenta que esta función devolverá una promesa que puedes esperar con await o con .then, en mi caso lo haré con await como verás a continuación.

Convertir archivo

Ahora que tenemos ambas cosas solo nos falta juntarlas.

Veamos a continuación el código JavaScript para convertir cualquier tipo de archivo seleccionado por el usuario a una cadena en base64 e imprimirla en la consola.

En este caso la cadena está siendo impresa, pero puedes almacenarla en una base de datos, enviarla a un servidor o hacer cualquier otra cosa. El código queda así:

$fileInput.addEventListener("change", async () => {
    const files = $fileInput.files;
    if (files.length <= 0) {
        return;
    }
    const firstFile = files[0];
    const encodedAsBase64 = await fileToBase64(firstFile);
    console.log(encodedAsBase64);
});

Ahora cuando el usuario elija un archivo, su representación en base 64 será mostrada en la consola. Todo esto usando JavaScript del lado del cliente.

Código completo

Ya te mostré el código más importante, pero puedes revisar el código completo en GitHub así como una demostración en línea. Si abres la demostración, no olvides de abrir la consola de depuración.