L'API File Handling permet aux applications Web de s'enregistrer en tant que gestionnaires de fichiers pour les formats de fichiers compatibles avec l'application. Découvrez comment l'application de retouche d'images Photopea utilise cette API.
Introduction
(Cet article est également disponible sous forme de vidéo).
Photopea est un éditeur d'images en ligne sans frais développé par Ivan Kutskir. Ivan a commencé à travailler sur l'application en 2012 et tient un blog présentant les principales fonctionnalités qu'il ajoute à Photopea. Photopea est compatible avec les formats PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) et CDR (CorelDRAW).
Gestion de fichiers dans Photopea
En tant que PWA installable, Photopea s'exécute dans une fenêtre autonome lorsque l'utilisateur décide d'installer l'application. Cela permet de débloquer une PWA super pouvoir que Photopea utilise de manière intensive la gestion des fichiers.
La partie déclarative de l'API File Handling
Après l'installation, Photopea s'enregistre en tant que gestionnaire de fichiers auprès du système d'exploitation pour les différents formats de fichiers compatibles. Pour ce faire, ajoutez le champ file_handlers dans le fichier manifeste d'application Web. Chaque type de fichier compatible est un objet, action a une URL relative comme valeur, l'objet accept est un mappage des types MIME et des extensions de fichier associées. Exemple : {"image/jpeg": [".jpeg", ".jpg"]}. Le code suivant est le fichier manifeste d'application Web de Photopea de production, avec les parties pertinentes mises en surbrillance.
{
"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 partie impérative de l'API File Handling
La partie impérative de l'API se charge ensuite de gérer le ou les fichiers que le système d'exploitation transmet à la PWA. Bien évidemment, le code de Photopea est fortement réduit et accentué, mais l'essentiel de l'extrait ci-dessous n'est pas si difficile à comprendre. L'interface LaunchQueue (réduite en N) comporte une méthode setConsumer() qui accepte une fonction en tant qu'argument. Cette fonction utilise à son tour un objet LaunchParams (réduction de la taille de W) . Cet objet LaunchParams possède une propriété files pointant vers un tableau d'objets FileSystemHandle en lecture seule, sur lequel le reste du code effectue ensuite une boucle et, pour chacun d'eux, obtient l'objet File (réduit en G) en appelant getFile(). Ce fichier est ensuite transmis à une autre logique dans Photopea qui se charge de l'afficher.
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]);
});
}
});
}
Conclusions
Les utilisateurs réclamaient depuis longtemps que Photopea devienne gestionnaire de fichiers pour les images. En 2020, lorsque la question s'est présentée, cette fonctionnalité était complètement impensable. Toutefois, un utilisateur passionné a découvert l'API de gestion des fichiers au début de l'année 2022, alors qu'elle était encore derrière un indicateur. La gestion des fichiers est finalement expédiée dans Chrome 102. C'est une fonctionnalité photopea très appréciée des utilisateurs, qui est même lancée comme changeante. Essayez Photopea, installez-le sur votre bureau, puis essayez d'ouvrir l'un des formats de fichiers compatibles. Bonne retouche photo !