La API de File Handling permite que las aplicaciones web se registren como controladores de archivos para los formatos de archivo que la aplicación puede admitir. Obtén información sobre 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 en línea gratuito desarrollado por Ivan Kutskir. Ivan comenzó a trabajar en la app en 2012 y mantiene un blog en el que comparte las funciones principales que agrega a Photopea. Photopea puede trabajar con los formatos PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) y CDR (CorelDRAW).
Manejo de archivos en Photopea
Como AWP instalable, Photopea se ejecuta en una ventana independiente cuando el usuario elige instalar la app. De esta manera, se desbloquea un superpoder de las AWP, que Photopea usa mucho: el manejo de archivos.
La parte declarativa de la API de manejo de archivos
Después de la instalación, Photopea se registra como un controlador de archivos con el sistema operativo para los diferentes formatos de archivo que admite. Esto sucede en el manifiesto de la app web, cuando se agrega el campo file_handlers. Cada tipo de archivo admitido es un objeto, el action tiene una URL relativa como su valor, el objeto accept 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 la app web de Photopea de producción, con las partes relevantes destacadas.
{
"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 manejo de archivos
La parte imperativa de la API se encarga de controlar los archivos que el sistema operativo pasa a la AWP. El código de Photopea está muy minimizado y es poco atractivo, pero, de todos modos, la esencia del siguiente fragmento no es tan difícil de entender. La interfaz LaunchQueue (reducida como N) tiene un método setConsumer(), que acepta una función como argumento. Esta función, a su vez, toma un objeto LaunchParams (reducido como W) . Este objeto LaunchParams tiene una propiedad files que apunta a un array de solo lectura de objetos FileSystemHandle, que el resto del código recorre en bucle y, para cada uno, obtiene el objeto File (reducido como G) llamando a getFile(). Luego, este archivo se pasa a otra lógica de 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
Los usuarios han estado pidiendo que Photopea se convierta en un controlador de archivos para imágenes durante mucho tiempo. En 2020, cuando apareció la pregunta, esta función era completamente impensable, pero un usuario entusiasta descubrió la API de manejo de archivos en sus primeras etapas a principios de 2022, cuando todavía estaba detrás de una marca. El manejo de archivos finalmente se lanzó en Chrome 102 y ha sido una función muy apreciada de Photopea que sus usuarios utilizan a diario, y algunos incluso la consideran un punto de inflexión. Asegúrate de probar Photopea, instalarlo en tu escritorio y, luego, intentar abrir uno de los formatos de archivo que admite. ¡Que disfrutes de la edición de imágenes!