Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ How the image editing app Photopea uses the File Handling API to let users open files from their file explorer

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š How the image editing app Photopea uses the File Handling API to let users open files from their file explorer


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: developer.chrome.com

Introduction

(This article is also available in form of a video.)

Photopea is a free online image editor developed by Ivan Kutskir. Ivan started working on the app in 2012, and maintains a blog sharing the major features he adds to Photopea. Photopea can work with PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD), and CDR (CorelDRAW) formats.

The Photopea app.

File handling in Photopea

As an installable PWA, Photopea runs in a standalone window when the user chooses to install the app. Doing so unlocks a PWA super power, which Photopea makes heavy use of: file handling.

The declarative part of the File Handling API

After installation, Photopea registers itself as a file handler with the operating system for the different file formats it supports. This happens in the Web App Manifest, by adding the file_handlers field. Each supported file type is an object, the action has a relative URL as its value, the accept object a map of MIME types and associated file extensions. For example, {"image/jpeg": [".jpeg", ".jpg"]}. The following code is the production Web App Manifest of Photopea, with the relevant parts highlighted.

{
"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"]
}
]
}
}
}
The macOS Finder with the user right-clicking a file and then choosing 'Open with' Photopea.

The imperative part of the File Handling API

The imperative part of the API then deals with actually handling the file(s) that the operating system passes to the PWA. Photopea's code is obviously heavily minimized and uglified, but nevertheless the gist of the snippet below is not so hard to grasp. The LaunchQueue interface (minified as N) has a setConsumer() method, which accepts a function as an argument. This function in turn takes a LaunchParams object (minified as W) . This LaunchParams object has a files property pointing at a read-only array of FileSystemHandle objects, which the rest of the code then loops over and for each obtains the File object (minified as G) by calling getFile(). This file is then passed off to other logic in Photopea that takes care of displaying the file.

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

Users have been asking for Photopea to become a file handler for images for a long time. In 2020, when the question appeared, this feature was completely unthinkable, but an eager user discovered the file handling API in its earliest stages in the beginning of 2022 when it was still behind a flag. File handling eventually shipped in Chrome 102 and has been a beloved Photopea feature used on a daily basis by its users, some even calling it a gamechanger. Be sure to give Photopea a try, install it on your desktop, and then try opening one of the file formats it supports! Happy image editing!

...



๐Ÿ“Œ How the image editing app Photopea uses the File Handling API to let users open files from their file explorer


๐Ÿ“ˆ 127.15 Punkte

๐Ÿ“Œ Photopea is basically Photoshop. But in your browser. And free.


๐Ÿ“ˆ 29.73 Punkte

๐Ÿ“Œ Photopea - Photoshop online 4.5 Deutsch


๐Ÿ“ˆ 29.73 Punkte

๐Ÿ“Œ Photopea: Fotobearbeitung im Browser fรผr alle Lebenslagen


๐Ÿ“ˆ 29.73 Punkte

๐Ÿ“Œ Photopea: Der Online-Editor fรผr Fotos im Test


๐Ÿ“ˆ 29.73 Punkte

๐Ÿ“Œ Photoshop-Alternative Photopea ist kostenlos und lรคuft im Browser


๐Ÿ“ˆ 29.73 Punkte

๐Ÿ“Œ How the 3D model editor Blockbench uses the EyeDropper API to let users choose colors from everywhere


๐Ÿ“ˆ 29.06 Punkte

๐Ÿ“Œ MiniMagick up to 4.9.3 lib/mini_magick/image.rb Image.open Image File privilege escalation


๐Ÿ“ˆ 28.91 Punkte

๐Ÿ“Œ Google Could Let Chromebook Users Manage All of Their Android Files in Chrome OS


๐Ÿ“ˆ 27.73 Punkte

๐Ÿ“Œ Sodinokibi ransomware uses MS API to encrypt open and locked files


๐Ÿ“ˆ 27.43 Punkte

๐Ÿ“Œ Discussion for the video editors out there. Any favourite editing software, distro, DE for editing?


๐Ÿ“ˆ 26.46 Punkte

๐Ÿ“Œ Simplify 3D Object Editing with Vox-E: An Artificial Intelligence (AI) Framework For Text-guided Voxel Editing of 3D Objects


๐Ÿ“ˆ 26.46 Punkte

๐Ÿ“Œ Windows 10 Will Let You Access Linux Files Using File Explorer


๐Ÿ“ˆ 25.44 Punkte

๐Ÿ“Œ ES-File Explorer Vulnerability Let Attacker Access All Your Personal Files In Your Phone Remotely within 2 Min


๐Ÿ“ˆ 25.44 Punkte

๐Ÿ“Œ Windows 10 Will Let You Access WSL Files in File Explorer


๐Ÿ“ˆ 25.44 Punkte

๐Ÿ“Œ [dos] Microsoft DirectWrite / AFDKO - Stack Corruption in OpenType Font Handling Due to Incorrect Handling of blendArray


๐Ÿ“ˆ 25.43 Punkte

๐Ÿ“Œ TIBCO FTP Community Edition up to 6.5.0 on Windows Server/C API/Golang API/Java API/.Net API access control


๐Ÿ“ˆ 25.16 Punkte

๐Ÿ“Œ Microsoft Edge to Let Users Open Office Files Right in the Browser


๐Ÿ“ˆ 25.11 Punkte

๐Ÿ“Œ APPLE REVEALS NEW OPEN SOURCE IMAGE EDITING AI | TECH NEWS


๐Ÿ“ˆ 24.98 Punkte

๐Ÿ“Œ GIMP 2.9.8 Open-Source Image Editor Released with On-Canvas Gradient Editing


๐Ÿ“ˆ 24.98 Punkte

๐Ÿ“Œ Progressive Web Apps: Produktivitรคts-PWAs auf Desktop-Niveau dank File System Access und File Handling API


๐Ÿ“ˆ 24.96 Punkte

๐Ÿ“Œ Intel: Let's talk about SGX, baby. Let's talk about 2U and me. Let's talk about all the good things, and the bad...


๐Ÿ“ˆ 24.35 Punkte

๐Ÿ“Œ Intel: Let's talk about SGX, baby. Let's talk about 2U and me. Let's talk about all the good things, and the bad...


๐Ÿ“ˆ 24.35 Punkte

๐Ÿ“Œ Free Lossless Image Format 0.3 LibPNG image/image-png.cpp flif File memory corruption


๐Ÿ“ˆ 24.24 Punkte

๐Ÿ“Œ Free Lossless Image Format 0.3 LibPNG image/image-png.cpp flif File memory corruption


๐Ÿ“ˆ 24.24 Punkte

๐Ÿ“Œ Windows 10 19H1 Will Let Users Change File Explorer Theme Independently


๐Ÿ“ˆ 23.62 Punkte

๐Ÿ“Œ Lokibot Uses Image Files to Hide Code for Unpacking Routine


๐Ÿ“ˆ 23.56 Punkte

๐Ÿ“Œ Locky Ransomware Uses Decoy Image Files To Ambush Facebook, LinkedIn Accounts


๐Ÿ“ˆ 23.56 Punkte











matomo