File Handling API ช่วยให้เว็บแอปพลิเคชันลงทะเบียนตัวเองเป็นตัวแฮนเดิลไฟล์สำหรับรูปแบบไฟล์ที่แอปพลิเคชันรองรับได้ ดูวิธีที่แอปพลิเคชันแก้ไขรูปภาพ Photopea ใช้ API นี้
บทนำ
(บทความนี้มีให้บริการในรูปแบบวิดีโอด้วย)
Photopea เป็นโปรแกรมแก้ไขรูปภาพออนไลน์ฟรีที่พัฒนาโดย Ivan Kutskir Ivan เริ่มพัฒนาแอปนี้ในปี 2012 และยังคงเขียนบล็อกเพื่อแชร์ฟีเจอร์สำคัญๆ ที่เขาเพิ่มลงใน Photopea Photopea สามารถทำงานกับรูปแบบ PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) และ CDR (CorelDRAW) ได้

การจัดการไฟล์ใน Photopea
ในฐานะ PWA ที่ติดตั้งได้ Photopea จะทำงานในหน้าต่างแบบสแตนด์อโลนเมื่อผู้ใช้เลือกติดตั้งแอป ซึ่งจะปลดล็อกความสามารถพิเศษของ PWA ที่ Photopea ใช้ประโยชน์อย่างมาก นั่นคือ File Handling
ส่วนที่ประกาศของ File Handling API
หลังจากติดตั้งแล้ว Photopea จะลงทะเบียนตัวเองเป็นเครื่องมือจัดการไฟล์กับระบบปฏิบัติการสำหรับรูปแบบไฟล์ต่างๆ ที่รองรับ ซึ่งทำได้ในไฟล์ Manifest ของเว็บแอปโดยเพิ่มช่อง file_handlers ประเภทไฟล์ที่รองรับแต่ละประเภทเป็นออบเจ็กต์ โดย action มี Relative URL เป็นค่า และออบเจ็กต์ accept เป็นแผนที่ของประเภท MIME และนามสกุลไฟล์ที่เกี่ยวข้อง เช่น {"image/jpeg": [".jpeg", ".jpg"]} โค้ดต่อไปนี้คือไฟล์ Manifest ของเว็บแอป Photopea เวอร์ชันที่ใช้งานจริง โดยมีการไฮไลต์ส่วนที่เกี่ยวข้อง
{
"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"]
}
]
}
}
}

ส่วนที่จำเป็นของ File Handling API
ส่วนที่จำเป็นของ API จะเกี่ยวข้องกับการจัดการไฟล์ที่ระบบปฏิบัติการส่งไปยัง PWA จริงๆ โค้ดของ Photopea มีการย่อและทำให้ดูไม่สวยงามอย่างเห็นได้ชัด แต่สาระสำคัญของข้อมูลโค้ดด้านล่างก็ไม่ได้เข้าใจยากนัก อินเทอร์เฟซ LaunchQueue (ย่อเป็น N) มีเมธอด setConsumer() ซึ่งยอมรับฟังก์ชันเป็นอาร์กิวเมนต์ ฟังก์ชันนี้จะรับออบเจ็กต์ LaunchParams (ย่อเป็น W) ออบเจ็กต์ LaunchParams นี้มีพร็อพเพอร์ตี้ files ที่ชี้ไปยังอาร์เรย์แบบอ่านอย่างเดียวของออบเจ็กต์ FileSystemHandle ซึ่งโค้ดที่เหลือจะวนซ้ำและรับออบเจ็กต์ File (ย่อเป็น G) โดยเรียกใช้ getFile() จากนั้นระบบจะส่งไฟล์นี้ไปยังตรรกะอื่นๆ ใน Photopea ที่ดูแลการแสดงไฟล์
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]);
});
}
});
}
บทสรุป
ผู้ใช้เรียกร้องให้ Photopea เป็นเครื่องมือจัดการไฟล์รูปภาพมาเป็นเวลานานแล้ว ในปี 2020 เมื่อมีคำถามนี้เกิดขึ้น ฟีเจอร์นี้เป็นสิ่งที่ไม่น่าจะเกิดขึ้นได้เลย แต่ผู้ใช้ที่กระตือรือร้นได้ค้นพบ File Handling API ในระยะแรกๆ เมื่อต้นปี 2022 ซึ่งตอนนั้นยังอยู่เบื้องหลัง Flag ในที่สุด File Handling ก็เปิดตัวใน Chrome 102 และกลายเป็นฟีเจอร์ยอดนิยมของ Photopea ที่ผู้ใช้ใช้เป็นประจำทุกวัน บางคนถึงกับเรียกว่าเป็นฟีเจอร์ที่พลิกโฉมวงการ อย่าลืมลองใช้ Photopea โดยติดตั้งบนเดสก์ท็อป แล้วลองเปิดรูปแบบไฟล์ที่รองรับ ขอให้สนุกกับการแก้ไขรูปภาพ