File Handling API memungkinkan aplikasi web untuk mendaftarkan dirinya sebagai pengendali file untuk format file yang dapat didukung oleh aplikasi. Pelajari cara aplikasi pengeditan gambar Photopea menggunakan API ini.
Pengantar
(Artikel ini juga tersedia dalam bentuk video.)
Photopea adalah editor gambar online gratis yang dikembangkan oleh Ivan Kutskir. Ivan mulai mengerjakan aplikasi ini pada 2012, dan mengelola blog yang membagikan fitur utama yang ia tambahkan ke Photopea. Photopea dapat bekerja dengan format PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD), dan CDR (CorelDRAW).
Penanganan file di Photopea
Sebagai PWA yang dapat diinstal, Photopea berjalan di jendela mandiri saat pengguna memilih untuk menginstal aplikasi. Dengan begitu, fitur ini akan membuka kemampuan super PWA, yang banyak digunakan oleh Photopea: penanganan file.
Bagian deklaratif dari File Handling API
Setelah penginstalan, Photopea mendaftarkan dirinya sebagai pengendali file dengan sistem operasi untuk berbagai format file yang didukungnya. Hal ini terjadi di Manifes Aplikasi Web, dengan menambahkan kolom file_handlers. Setiap jenis file yang didukung adalah sebuah objek, action memiliki URL relatif sebagai nilainya, accept objek peta jenis MIME dan ekstensi file terkait. Contoh, {"image/jpeg": [".jpeg", ".jpg"]}. Kode berikut adalah Manifes Aplikasi Web Photopea produksi, dengan bagian yang relevan ditandai.
{
"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"]
}
]
}
}
}
Bagian imperatif dari File Handling API
Bagian imperatif dari API kemudian menangani penanganan file yang benar-benar diteruskan oleh sistem operasi ke PWA. Kode Photopea jelas sangat diminimalkan dan terlihat tidak jelas, tetapi inti dari cuplikan di bawah ini tidak terlalu sulit dipahami. Antarmuka LaunchQueue (diminifikasi sebagai N) memiliki metode setConsumer(), yang menerima fungsi sebagai argumen. Selanjutnya, fungsi ini mengambil objek LaunchParams (diminifikasi sebagai W) . Objek LaunchParams ini memiliki properti files yang mengarah ke array hanya baca dari objek FileSystemHandle, yang selanjutnya di-loop oleh kode lainnya dan untuk masing-masing mendapatkan objek File (diminifikasi sebagai G) dengan memanggil getFile(). File ini kemudian diteruskan ke logika lain di Photopea yang akan menampilkan file tersebut.
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]);
});
}
});
}
Kesimpulan
Pengguna telah lama meminta Photopea untuk menjadi pengendali file gambar. Pada tahun 2020, ketika pertanyaan itu muncul, fitur ini sama sekali tidak terpikirkan, tetapi pengguna yang antusias menemukan API penanganan file pada tahap paling awal pada awal tahun 2022 ketika API tersebut masih berada di belakang tanda. Penanganan file akhirnya dikirimkan di Chrome 102 dan menjadi fitur Photopea favorit yang digunakan setiap hari oleh penggunanya, beberapa bahkan menyebutnya sebagai penentu game. Pastikan untuk mencoba Photopea, instal di desktop Anda, lalu coba buka salah satu format file yang didukungnya. Selamat mengedit gambar!