A API File Handling permite que aplicativos da web se registrem como um manipulador de arquivos para formatos de arquivo que o aplicativo pode aceitar. Saiba como o aplicativo de edição de imagens Photopea usa essa API.
Introdução
Este artigo também está disponível na forma de vídeo.
O Photopea é um editor de imagens on-line sem custo financeiro desenvolvido por Ivan Kutskir. Ivan começou a trabalhar no app em 2012 e mantém um blog compartilhando os principais recursos que adiciona ao Photopea. O Photopea pode trabalhar com os formatos PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) e CDR (CorelDRAW).
Processamento de arquivos no Photopea
Como um PWA instalável, o Photopea é executado em uma janela autônoma quando o usuário decide instalar o app. Isso desbloqueia um superpoder de PWA, que o Photopea faz uso intenso de: gerenciamento de arquivos.
A parte declarativa da API File Handling
Após a instalação, o Photopea registra-se como um manipulador de arquivos com o sistema operacional para os diferentes formatos de arquivo suportados. Isso acontece no manifesto do app da Web, ao adicionar o campo file_handlers. Cada tipo de arquivo compatível é um objeto, o action tem um URL relativo como valor, o accept é um mapa de tipos MIME e extensões de arquivo associadas. Exemplo: {"image/jpeg": [".jpeg", ".jpg"]}. O código a seguir é o Manifesto de app da Web do Photopea de produção, com as 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"]
}
]
}
}
}
A parte imperativa da API File Handling
A parte imperativa da API lida com o processamento dos arquivos que o sistema operacional passa para o PWA. O código do Photopea obviamente é muito minimizado e uglificado, mas, no entanto, a essência do snippet abaixo não é tão difícil de entender. A interface LaunchQueue (minificada como N) tem um método setConsumer(), que aceita uma função como argumento. Essa função, por sua vez, usa um objeto LaunchParams (reduzida como W) . Esse objeto LaunchParams tem uma propriedade files que aponta para uma matriz somente leitura de objetos FileSystemHandle, que o restante do código executa em loop e para cada um recupera o objeto File (reduzido como G) chamando getFile(). Esse arquivo é transmitido para outra lógica no Photopea que cuida da exibição dele.
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]);
});
}
});
}
Conclusões
Os usuários têm solicitado que o Photopea se torne um gerenciador de arquivos de imagens há muito tempo. Em 2020, quando a pergunta apareceu, esse recurso era totalmente impensável, mas um usuário ávido descobriu a API de processamento de arquivos nos estágios iniciais, no início de 2022, quando ela ainda estava com uma sinalização. O gerenciamento de arquivos foi enviado no Chrome 102 e tem sido um recurso adorado do Photopea usado diariamente pelos usuários, alguns até chamando-o de divisor de águas. Experimente o Photopea, instale-o em seu computador e abra um dos formatos de arquivo compatíveis. Tenha uma ótima edição das imagens!