JavaScript: convertir archivo a base64
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.
Extensión de archivo con JavaScript
En este corto post de programación con JS vas a aprender a obtener la extensión de un archivo a partir de su nombre. Por ejemplo, si el archivo es “hola.go” serás capaz de obtener solo la extensión “go”, sin importar cuántos puntos tenga el nombre del archivo.
Será un ejercicio sencillo en donde vamos a ubicar el índice de un carácter con JavaScript y también vamos a cortar la cadena con substring.
JavaScript: obtener resolución de imagen
En el post de hoy vamos a programar con JavaScript del lado del cliente para obtener el tamaño original de una imagen, es decir, su alto y ancho originales.
Podemos hacer esto con una imagen existente (etiqueta img) o con una creada a partir de la clase Image. Te mostraré un ejemplo de cómo hacerlo a partir de una imagen seleccionada en un input tipo file.
JavaScript y OPFS: almacenar y leer archivos
En este artículo voy a enseñarte a usar el Origin Private File System con JavaScript para almacenar, leer y eliminar cualquier tipo de archivo en el navegador web.
Sistema de archivos en la web con JavaScript y OPFS
Puedes probar la demostración aquí: https://stackblitz.com/edit/vitejs-vite-hl34zf?file=index.html
Como lo dije anteriormente, el Origin Private File System ha llegado para revolucionar las cosas con JavaScript. Gracias al OPFS podemos tener un sistema de archivos completo con JavaScript directamente en el navegador web.
Con esto, podemos escribir cualquier tipo de archivo en el web browser, así como descargarlo más adelante. Todo ello sin depender de localStorage o cosas similares; es una tecnología diferente.
Se pueden guardar documentos de texto, imágenes, vídeos e incluso bases de datos, además de que no hay necesidad de pedir permiso o confirmación al usuario, todo es transparente.
Encabezados para usar OPFS en JavaScript (CORS 2)
El Origin Private File System (también llamado OPFS) permite tener un sistema de archivos completo directamente en el navegador web con el que podemos interactuar a través de JavaScript.
Para que OPFS esté disponible necesitamos servir el contenido con 2 encabezados importantes:
- Cross-Origin-Opener-Policy: same-origin
- Cross-Origin-Embedder-Policy: require-corp
No importa el lenguaje de programación ni el servidor usado para servir los archivos; el código JavaScript debe ser servido con un servidor que envíe esos headers. Si no lo hacemos de esa manera no vamos a poder acceder al OPFS.
JavaScript: descargar archivo con fetch
En este post vamos a ver cómo descargar un archivo en segundo plano usando JavaScript del lado del cliente y la función fetch para hacer peticiones HTTP.
Veremos cómo descargar un archivo como blob usando AJAX para después preguntar al usuario en dónde guardarlo, sugiriendo un nombre.
Lo bueno de esto es que podemos enviar parámetros para solicitar la descarga del archivo (por ejemplo, si el mismo estuviera protegido por contraseña o autentificación).
App de notas y listas con encriptación – Open source
El día de hoy te enseñaré una aplicación simple, gratuita y open source para gestionar notas y listas (To Do app). Está hecha con JavaScript usando Svelte, utiliza SQLite3 para el almacenamiento, Tailwind para el diseño y se agrega encriptación con la web crypto API.
Puedes probar la aplicación ya mismo ingresando al siguiente enlace: https://notasbyparzibyte.parzibyte.repl.co/#/. Incluso puedes instalarla como nativa, y todos los datos se van a quedar en tu dispositivo sin necesidad de internet.
Con esta app de notas podrás agregar notas y listas de pendientes, además de poder encriptarlas usando AES en modo CBC. Cada nota y cada lista puede ser encriptada de manera independiente y con una contraseña distinta, generado el vector de inicialización y derivando la clave a partir de una contraseña.
App de notas con encriptación – Open source
Puedes agregar etiquetas a cada lista y nota, para que puedas filtrarlas más adelante.
Lo mejor de esto es que la app puede ser instalada como una aplicación nativa gracias al poder de las PWA, así que puedes usarla en móviles y dispositivos de escritprio.
Me emocioné tanto con la llegada de SQLite3 a la web con OPFS que hice esta app para aprender Svelte y Tailwind, pero terminé haciendo también la app de cumpleaños y luego experimenté un poco con WASM.
Veamos entonces esta webapp de tareas pendientes totalmente open source.
App para calcular edad (cumpleaños) – Gratuita y open source
Aprovechando que SQLite3 ha llegado a los navegadores web, he decidido crear una aplicación web (que puede ser instalada como nativa) simple que muestra la edad de las personas registradas, mostrando:
- Edad calculada al día de hoy
- Edad precisa incluyendo segundos
- Siguiente cumpleaños
- Tiempo que falta para el próximo cumpleaños
App de cumpleaños – Mostrar personas registradas con edad al día de hoy
Esta app también puede servir para mostrar el tiempo que ha transcurrido desde un cierto evento (como un aniversario), solo es cuestión de registrar los datos correctamente.
La app es realmente simple, pero era una webapp que siempre quise hacer y poner a disposición del público, pues es open source.
Está hecha con TypeScript y para los estilos he usado TailwindCSS. Utiliza Workers y SQLite3 como almacenamiento; también se puede convertir en una PWA. Para “compilarla” se usa Vite. (más…)