PlusMagi's Blog By Pitt Phunsanit Backend,Database การอัปโหลดไฟล์ด้วย Fetch API และ FormData: ทางเลือกใหม่ที่ไม่ต้องพึ่ง $.ajax()

การอัปโหลดไฟล์ด้วย Fetch API และ FormData: ทางเลือกใหม่ที่ไม่ต้องพึ่ง $.ajax()

ในโลกของการพัฒนาแอปพลิเคชันสมัยใหม่ การจัดการการสื่อสารข้อมูลระหว่างไคลเอนต์และเซิร์ฟเวอร์ถือเป็นหัวใจสำคัญที่กำหนดประสิทธิภาพและความเสถียรของระบบ การส่งข้อมูลไฟล์ (File Upload) เป็นหนึ่งในกระบวนการที่ซับซ้อนที่สุด เนื่องจากต้องจัดการทั้งข้อมูลข้อความ (Metadata) และข้อมูลไบนารี (Binary Data) ไปพร้อมกัน

ในอดีต นักพัฒนามักพึ่งพาการเรียก AJAX ผ่านไลบรารีภายนอกเพื่อจำลองกระบวนการนี้ อย่างไรก็ตาม ด้วยการพัฒนาของมาตรฐานเว็บและพลังของระบบฐานข้อมูลที่ทันสมัยอย่าง PostgreSQL ทำให้เราสามารถยกระดับการจัดการข้อมูลให้เป็น Native และมีประสิทธิภาพสูงขึ้น โดยการใช้แนวคิดของ Fetch API ร่วมกับการเตรียมข้อมูลด้วย FormData ซึ่งหลักการนี้สามารถจำลองการทำงานที่แม่นยำและเชื่อถือได้ในระดับของฐานข้อมูล


หลักการทำงาน: การเตรียมข้อมูลและการส่งผ่าน (The Transactional Flow)

หัวใจของการอัปโหลดไฟล์คือการเตรียมข้อมูลให้พร้อมส่ง ซึ่งในเชิงของฐานข้อมูล เราจะใช้แนวคิดของ FormData ในการรวบรวมข้อมูลที่หลากหลาย (ทั้งข้อความและไฟล์ไบนารี) ให้เป็นชุดข้อมูลเดียวที่สมบูรณ์ เมื่อข้อมูลพร้อมแล้ว เราจะใช้ fetch() ซึ่งเป็นกลไกการส่งข้อมูลแบบ Promise-based ในการดำเนินการส่งข้อมูลไปยังเซิร์ฟเวอร์อย่างเป็นระบบ

ในการจำลองกระบวนการนี้ด้วย PostgreSQL เราจะใช้ Transaction เพื่อให้มั่นใจว่าการรวบรวมและการบันทึกข้อมูลจะเกิดขึ้นอย่างสมบูรณ์และเป็นอะตอมมิก (Atomic) โดยเราจะจำลองการรวบรวมข้อมูลเมตา (Metadata) และการแนบไฟล์ไบนารี (Binary File) เข้าด้วยกัน:

SQL

-- เริ่มต้น Transaction เพื่อรับประกันความสมบูรณ์ของข้อมูล (BEGIN) -- นี่คือการจำลองการเริ่มต้นการส่งข้อมูล (fetch start) BEGIN; -- 1. การรวบรวมข้อมูลเมตา (Metadata Collection) -- จำลองการรวบรวมข้อมูลจากฟอร์ม (FormData) INSERT INTO upload_metadata (user_id, description, file_type) VALUES (101, 'รายงานไตรมาส 2', 'pdf'); -- 2. การแนบไฟล์ไบนารี (Binary Data Attachment) -- จำลองการอัปโหลดไฟล์ไบนารี (Binary File) -- สมมติว่าไฟล์ถูกจัดเก็บในรูปแบบ BYTEA -- INSERT INTO uploaded_files (metadata_id, file_data, original_name) VALUES (LAST_VALUE, '\x25504446', 'quarterly_report.pdf'); -- 3. การยืนยันการส่งข้อมูล (Commit) -- เมื่อข้อมูลทั้งหมดถูกจัดเตรียมและบันทึกสำเร็จ ให้ Commit; COMMIT; -- หากเกิดข้อผิดพลาดใดๆ ควร Rollback; -- ROLLBACK;

ข้อดีของการใช้ Native API (PostgreSQL Perspective)

การใช้กลไกที่ทันสมัยและเป็น Native เช่น Fetch API หรือการใช้ Transaction ใน PostgreSQL มีข้อได้เปรียบเหนือการพึ่งพาไลบรารีภายนอกอย่างมาก:

  • ประสิทธิภาพและความเสถียร: การทำงานแบบ Native ทำให้โค้ดมีน้ำหนักเบาและทำงานได้รวดเร็ว ไม่ต้องพึ่งพา Dependency ขนาดใหญ่
  • การจัดการสถานะ: การใช้ Promise/Transaction ช่วยให้เราจัดการกับสถานะการโหลด (Loading State) และการตอบกลับ (Success/Error) ได้อย่างเป็นระเบียบตามหลักการของระบบฐานข้อมูล
  • ความปลอดภัย: การจัดการข้อมูลในรูปแบบ Transaction ช่วยรับประกันว่าข้อมูลจะถูกบันทึกอย่างสมบูรณ์ หรือไม่บันทึกเลยหากมีขั้นตอนใดล้มเหลว (Atomicity)

บทสรุป

การทำความเข้าใจการทำงานของ Fetch API และ FormData ไม่ใช่แค่การเรียนรู้ JavaScript แต่คือการเข้าใจหลักการของการจัดการข้อมูลแบบ Transactional ที่สมบูรณ์แบบ ซึ่งเป็นหลักการเดียวกันกับที่ระบบฐานข้อมูลชั้นสูงอย่าง PostgreSQL ใช้ในการรับประกันความถูกต้องของข้อมูล การใช้แนวทางที่ทันสมัยนี้จะช่วยให้แอปพลิเคชันของคุณมีประสิทธิภาพสูง ปลอดภัย และพร้อมสำหรับการขยายตัวในอนาคตได้อย่างแท้จริง

Exit mobile version