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 débloque un super pouvoir de PWA, dont Photopea fait un usage intensif de la gestion de 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 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 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 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
Les utilisateurs demandent depuis longtemps à Photopea de devenir 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. Testez Photopea, installez-la sur votre bureau, puis essayez d'ouvrir l'un des formats de fichier compatibles. Bonne retouche !