L'API File Handling permet aux applications Web de s'enregistrer en tant que gestionnaire de fichiers pour les formats de fichiers compatibles avec l'application. Découvrez comment l'application de retouche photo 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 dans lequel il présente les principales fonctionnalités qu'il ajoute à Photopea. Photopea est compatible avec les formats PSD (Adobe Photoshop), XCF (GIMP), Sketch (application Sketch), XD (Adobe XD) et CDR (CorelDRAW).
Gestion des fichiers dans Photopea
En tant que PWA installable, Photopea s'exécute dans une fenêtre autonome lorsque l'utilisateur choisit d'installer l'application. Cela permet de débloquer une super-puissance des PWA, que Photopea utilise intensivement: la gestion des fichiers.
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 qu'il prend en charge. 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 une carte 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, avec les parties pertinentes mises en évidence.
{
"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"]
}
]
}
}
}
Partie impérative de l'API File Handling
La partie impérative de l'API gère ensuite le ou les fichiers que le système d'exploitation transmet à la PWA. Le code de Photopea est évidemment fortement minimisé et défiguré, mais l'essentiel de l'extrait ci-dessous n'est pas si difficile à comprendre. L'interface LaunchQueue (minimisée en N) dispose d'une méthode setConsumer(), qui accepte une fonction comme argument. Cette fonction utilise à son tour un objet LaunchParams (minimisé en W) . Cet objet LaunchParams possède une propriété files pointant vers un tableau en lecture seule d'objets FileSystemHandle, sur lequel le reste du code effectue ensuite une boucle et pour chacun obtient l'objet File (minimisé en G) en appelant getFile(). Ce fichier est ensuite transmis à une autre logique dans Photopea qui s'occupe 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
Depuis longtemps, les utilisateurs demandent que Photopea devienne un gestionnaire de fichiers pour les images. En 2020, lorsque la question a été posée, cette fonctionnalité était totalement impensable, mais un utilisateur enthousiaste a découvert l'API de gestion des fichiers à ses débuts début 2022, alors qu'elle était encore masquée par un indicateur. La gestion des fichiers a finalement été publiée dans Chrome 102. Il s'agit d'une fonctionnalité appréciée des utilisateurs de Photopea, qui l'utilisent au quotidien. Certains l'estiment même révolutionnaire. N'hésitez pas à essayer Photopea, à l'installer sur votre ordinateur, puis à ouvrir l'un des formats de fichier compatibles. Bonne édition d'images !