La API de File Handling permite que las aplicaciones web se registren como controladores de archivos para los formatos de archivo que admite la aplicación. Descubre cómo la aplicación de edición de imágenes Photopea usa esta API.
Introducción
(Este artículo también está disponible en formato de video).
Photopea es un editor de imágenes gratuito en línea desarrollado por Ivan Kutskir. Ivan comenzó a trabajar en la aplicación en 2012 y mantiene un blog en el que comparte las principales funciones que agrega a Photopea. Photopea puede funcionar con los formatos PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) y CDR (CorelDRAW).
Manejo de archivos en Photopea
Como es una AWP instalable, Photopea se ejecuta en una ventana independiente cuando el usuario elige instalar la app. De esta manera, se desbloquea una superpotencia de la AWP, que se usa en gran medida para el manejo de archivos.
La parte declarativa de la API de File Handling
Después de la instalación, Photopea se registra como controlador de archivos con el sistema operativo para los diferentes formatos de archivo que admite. Esto sucede en el manifiesto de apps web agregando el campo file_handlers. Cada tipo de archivo compatible es un objeto, el action tiene una URL relativa como valor, el objeto accept es un mapa de tipos de MIME y extensiones de archivo asociadas. Por ejemplo, {"image/jpeg": [".jpeg", ".jpg"]}. El siguiente código es el manifiesto de apps web de Photopea de producción. Se destacan las partes relevantes.
{
"name": "Photopea",
"short_name": "Photopea",
"display": "standalone",
"icons": [
{ "src": "promo/icon512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable" }
],
"start_url": "/?utm_source=homescreen",
"background_color":"#0f171d",
"theme_color": "#474747",
"file_handlers": [
{ "action": "/", "accept": { "image/psd" : [ ".psd" ] } },
{ "action": "/", "accept": { "image/jpeg": [ ".jpeg", ".jpg" ] } },
{ "action": "/", "accept": { "image/png" : [ ".png" ] } },
{ "action": "/", "accept": { "image/webp": [ ".webp" ] } },
{ "action": "/", "accept": { "image/bmp" : [ ".bmp" ] } },
{ "action": "/", "accept": { "image/gif" : [ ".gif" ] } },
{ "action": "/", "accept": { "image/svg+xml": [ ".svg" ] } },
{ "action": "/", "accept": { "image/pdf" : [ ".pdf" ] } },
{ "action": "/", "accept": { "image/tiff": [ ".tif", ".tiff" ] } },
{ "action": "/", "accept": { "image/ai" : [ ".ai" ] } },
{ "action": "/", "accept": { "image/psb": [ ".psb" ] } },
{ "action": "/", "accept": { "image/xcf": [ ".xcf" ] } },
{ "action": "/", "accept": { "image/sketch": [ ".sketch" ] } },
{ "action": "/", "accept": { "image/xd" : [ ".xd" ] } },
{ "action": "/", "accept": { "image/pxd": [ ".pxd" ] } },
{ "action": "/", "accept": { "image/cdr": [ ".cdr" ] } },
{ "action": "/", "accept": { "image/eps": [ ".eps", ".ps" ] } },
{ "action": "/", "accept": { "image/x-icon": [ ".ico" ] } },
{ "action": "/", "accept": { "image/jpx": [ ".jpx" ] } },
{ "action": "/", "accept": { "image/jp2": [ ".jp2" ] } },
{ "action": "/", "accept": { "image/x-tga": [ ".tga" ] } },
{ "action": "/", "accept": { "image/vnd-ms.dds": [ ".dds" ] } }
],
"share_target": {
"action": "/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "image",
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
}
]
}
}
}
La parte imperativa de la API de File Handling
La parte imperativa de la API se encarga de controlar los archivos que el sistema operativo pasa a la AWP. Obviamente, el código de Photopea está muy minimizado y uglificado, pero el sentido general del siguiente fragmento no es tan difícil de comprender. La interfaz LaunchQueue (minificada como N) tiene un método setConsumer(), que acepta una función como argumento. Esta función, a su vez, toma un objeto LaunchParams (minificado como W) . Este objeto LaunchParams tiene una propiedad files que apunta a un array de solo lectura de objetos FileSystemHandle, que luego se repite en bucle con el resto del código y, por cada uno, obtiene el objeto File (minificado como G) llamando a getFile(). Luego, este archivo se pasa a otra lógica en Photopea que se encarga de mostrarlo.
var N = window.launchQueue;
if (N) {
var $ = this.UA;
N.setConsumer(function (W) {
var O = W.files;
console.log(O);
for (var Y = 0; Y < O.length; Y++) {
var T = O[Y];
T.getFile().then(function (G) {
$.YO([G], null, null, null, [T]);
});
}
});
}
Conclusiones
Hace mucho tiempo que los usuarios piden que Photopea se convierta en un controlador de archivos de imágenes. En 2020, cuando apareció la pregunta, esta función era completamente impensable, pero un usuario impaciente descubrió la API de gestión de archivos en sus primeras etapas a principios de 2022, cuando aún estaba detrás de una bandera. Con el tiempo, el manejo de archivos se envió en Chrome 102 y ha sido una función popular de Photopea que los usuarios usan a diario, algunos incluso la consideran un punto de inflexión. Asegúrate de probar Photopea, instálalo en tu escritorio y, luego, intenta abrir uno de los formatos de archivo compatibles. ¡Feliz edición de imágenes!