File Handling API memungkinkan aplikasi web mendaftarkan diri sebagai pengendali file untuk format file yang dapat didukung 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 tahun 2012, dan mengelola blog yang membagikan fitur utama yang ia tambahkan ke Photopea. Photopea dapat digunakan dengan format PSD (Adobe Photoshop), XCF (GIMP), Sketch (Aplikasi Sketch), 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. Tindakan ini akan membuka kekuatan super PWA, yang banyak digunakan Photopea: penanganan file.
Bagian deklaratif dari File Handling API
Setelah diinstal, Photopea akan 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 objek, action memiliki URL relatif sebagai nilainya, objek accept adalah peta jenis MIME dan ekstensi file terkait. Misalnya, {"image/jpeg": [".jpeg", ".jpg"]}. Kode berikut adalah Manifes Aplikasi Web Photopea, 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 penting dari API kemudian menangani file yang benar-benar diteruskan oleh sistem operasi ke PWA. Kode Photopea jelas sangat diminimalkan dan di-uglify, tetapi inti dari cuplikan di bawah tidak terlalu sulit dipahami. Antarmuka LaunchQueue (diminifikasi sebagai N) memiliki metode setConsumer(), yang menerima fungsi sebagai argumen. Fungsi ini pada gilirannya mengambil objek LaunchParams (diminifikasi sebagai W) . Objek LaunchParams ini memiliki properti files yang mengarah ke array hanya baca dari objek FileSystemHandle, yang kemudian akan di-loop untuk setiap kode lainnya dan untuk masing-masing mendapatkan objek File (dikecilkan sebagai G) dengan memanggil getFile(). File ini kemudian diteruskan ke logika lain di Photopea yang menangani tampilan 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]);
});
}
});
}
Kesimpulan
Pengguna telah meminta Photopea menjadi pengendali file untuk gambar sejak lama. Pada tahun 2020, ketika pertanyaan muncul, fitur ini benar-benar tidak terpikirkan, tetapi pengguna yang lebih antusias menemukan API penanganan file pada tahap paling awal pada awal tahun 2022 saat fitur tersebut masih belum selesai. Proses penanganan file akhirnya dirilis di Chrome 102 dan telah menjadi fitur Photopea yang disukai setiap hari oleh penggunanya, beberapa bahkan menyebutnya sebagai terobosan baru. Pastikan untuk mencoba Photopea, menginstalnya di desktop, lalu mencoba membuka salah satu format file yang didukungnya. Selamat mengedit gambar!