La API de File Handling permite que las aplicaciones web se registren como un controlador 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 forma 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 (app de Sketch), 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, del que Photopea hace un gran uso: el manejo de archivos.
La parte declarativa de la API de File Handling
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 se hace en el manifiesto de aplicación web, agregando el campo file_handlers. Cada tipo de archivo admitido es un objeto, action tiene una URL relativa como valor y 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 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 File Handling
Luego, la parte imperativa de la API se ocupa de controlar los archivos que el sistema operativo pasa a la AWP. El código de Photopea está muy minimizado y deslucido, pero, de todos modos, la esencia del siguiente fragmento no es tan difícil de entender. 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 el resto del código luego itera y, para cada uno, obtiene el objeto File (reducido 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
Los usuarios llevan mucho tiempo pidiendo que Photopea se convierta en un controlador de archivos de imágenes. En 2020, cuando surgió la pregunta, esta función era completamente impensable, pero un usuario entusiasta descubrió la API de manejo de archivos en sus etapas iniciales a principios de 2022, cuando aún estaba detrás de una marca. El manejo de archivos finalmente se envió en Chrome 102 y se convirtió en una función muy querida de Photopea que los usuarios usan a diario. Algunos incluso la llaman un cambio de juego. Asegúrate de probar Photopea, instálalo en tu computadora y, luego, intenta abrir uno de los formatos de archivo que admite. ¡Que disfrutes editando imágenes!