🤔 ปัญหาที่นักพัฒนา PHP ทุกคนเคยเจอ
ลองนึกภาพสถานการณ์นี้ดู — ผู้ใช้งานของคุณพยายามอัปโหลดวิดีโอขนาด 2 GB ขึ้นไปยังเว็บแอปของคุณ รออยู่นาน 45 นาที แล้วอินเทอร์เน็ตก็ดับ หรือเบราว์เซอร์ค้าง ผลลัพธ์คือ? ต้องเริ่มอัปโหลดใหม่ตั้งแต่ต้น ซึ่งเป็นประสบการณ์ที่แย่มากสำหรับผู้ใช้
ปัญหานี้พบได้บ่อยมากในระบบที่ต้องรับไฟล์ขนาดใหญ่ เช่น ระบบ LMS ที่อัปโหลดวิดีโอบทเรียน, ระบบจัดการเอกสารของหน่วยงานภาครัฐ, หรือแอปพลิเคชัน Creative ที่รับไฟล์ RAW จากกล้อง
🔌 tus Protocol คืออะไร?
tus (อ่านว่า "tuːs") คือ open protocol สำหรับการอัปโหลดไฟล์แบบ resumable โดยเฉพาะ มันถูกออกแบบมาให้รองรับการหยุดกลางทาง ไม่ว่าจะโดยตั้งใจ (ผู้ใช้กด pause) หรือโดยอุบัติเหตุ (เน็ตหลุด, เบราว์เซอร์ปิด) แล้วสามารถกลับมาต่อจากจุดเดิมได้
จุดเด่นที่น่าสนใจอีกอย่างคือ คุณสามารถเริ่มอัปโหลดจากแล็ปท็อป แล้วมาต่อบนมือถือได้ เพราะ tus track ความคืบหน้าด้วย upload ID ที่ unique บน server ไม่ใช่บน device
📦 tus-php: Library ที่เราจะใช้
tus-php คือ pure PHP library ที่ implement tus protocol v1.0.0 ครบทั้ง server และ client โดยไม่ผูกติดกับ framework ใด ๆ (framework agnostic) จึงใช้กับทั้ง CodeIgniter 4 และ Laravel ได้สะดวก
ติดตั้งผ่าน Composer
⚙️ หลักการทำงานแบบ Step by Step
Client แบ่งไฟล์เป็น Chunks
JavaScript ฝั่ง client แบ่งไฟล์ออกเป็นก้อนเล็ก ๆ (เช่น 5 MB ต่อก้อน) แล้วส่งทีละ request
Server เก็บ Offset
Server (tus-php) เก็บค่า offset ไว้ใน Redis หรือ Cache ว่าไฟล์อัปโหลดมาถึงไบต์ที่เท่าไรแล้ว
เกิดการขัดจังหวะ? ต่อได้เลย
Client ส่ง HEAD request มาถามว่า server รับข้อมูลถึงไหนแล้ว แล้วส่ง chunk ที่เหลือต่อทันที
ประกอบ Chunks เป็นไฟล์สมบูรณ์
เมื่อรับครบทุก chunk แล้ว server จะ merge เป็นไฟล์ต้นฉบับที่สมบูรณ์
🖥️ ฝั่ง Server: สร้าง TUS Endpoint
ไฟล์นี้ทำหน้าที่เป็น tus server — รับ request จาก client และจัดการ chunk ทั้งหมด ตัวอย่างด้านล่างใช้ Redis เป็น storage สำหรับเก็บ upload metadata
ตั้งค่า Nginx ให้ชี้มาที่ server
🚀 ใช้กับ Laravel: ผ่าน Route
ใน Laravel ไม่จำเป็นต้องแก้ไข Nginx config ตรง ๆ — ให้กำหนด route ใน routes/web.php หรือ routes/api.php แทน
🔥 ใช้กับ CodeIgniter 4
CI4 มี Router ที่ยืดหยุ่น สามารถ map ทุก HTTP method เข้า controller เดียวได้ง่าย
🌐 ฝั่ง Client: HTML Form + Uppy.js
tus-php ทำงานร่วมกับ JavaScript client library ได้หลายตัว ที่ได้รับความนิยมสูงสุดคือ Uppy.js ซึ่ง support tus protocol แบบ built-in และมี UI สวยงาม พร้อม progress bar
📊 เปรียบเทียบวิธีการอัปโหลดแบบต่าง ๆ
| วิธีการ | Resumable | ไฟล์ขนาดใหญ่ | ความยากติดตั้ง | เหมาะกับ |
|---|---|---|---|---|
| HTML Form อย่างเดียว | ❌ ไม่รองรับ | ❌ จำกัดมาก | ง่ายมาก | ไฟล์เล็ก < 10 MB |
| PHP chunked upload (manual) | ⚠️ ทำเองได้ | ⚠️ พอใช้ได้ | ยากมาก | ระบบที่ต้อง custom เยอะ |
| tus-php + tus protocol | ✅ รองรับเต็ม | ✅ ไม่จำกัด | ปานกลาง | ไฟล์ใหญ่, production |
| Cloud Storage (S3, GCS) | ✅ รองรับ | ✅ ดีมาก | ซับซ้อน | Scale ใหญ่, enterprise |
🔧 ต้องการอะไรบ้าง?
PHP 7.4+ | Redis (แนะนำ) หรือ File-based cache | Composer | Nginx/Apache พร้อม URL Rewrite
| Component | รายละเอียด | หมายเหตุ |
|---|---|---|
tus-php | Library หลัก | install via Composer |
| Redis | เก็บ upload state | ใช้ file cache แทนได้ |
| Uppy.js | JS client สำหรับ browser | หรือ tus-js-client |
| Writeable folder | เก็บ chunk และไฟล์สุดท้าย | chmod 775 |
🎯 ทำอะไรหลังอัปโหลดเสร็จ?
tus-php มี event listener ให้คุณดักจับตอนที่ไฟล์ upload ครบ 100% ได้ เหมาะสำหรับ trigger งานต่อเนื่อง เช่น แปลงวิดีโอ, สร้าง thumbnail, หรือบันทึกข้อมูลลงฐานข้อมูล
📝 สรุป
การอัปโหลดไฟล์ขนาดใหญ่เป็นโจทย์ที่ดูเหมือนง่ายแต่มีรายละเอียดซ่อนอยู่มาก โดยเฉพาะเมื่อต้องรองรับผู้ใช้ที่มีอินเทอร์เน็ตไม่เสถียร tus protocol + tus-php library ช่วยแก้ปัญหานี้ได้อย่างสง่างาม โดยคุณไม่ต้องสร้าง chunking logic ขึ้นมาเอง
| สิ่งที่ได้จากบทความนี้ | สถานะ |
|---|---|
| เข้าใจหลักการ Resumable Upload | ✅ ครอบคลุม |
| ติดตั้งและตั้งค่า tus-php server | ✅ ครอบคลุม |
| ใช้งานกับ Laravel | ✅ ครอบคลุม |
| ใช้งานกับ CodeIgniter 4 | ✅ ครอบคลุม |
| ตั้งค่า Uppy.js client | ✅ ครอบคลุม |
| After-upload event hook | ✅ ครอบคลุม |
ขั้นตอนต่อไปที่แนะนำคือ เพิ่ม authentication middleware เพื่อป้องกัน upload endpoint, กำหนด file type validation ก่อนประกอบ chunk, และตั้งค่า cleanup job สำหรับไฟล์ chunk ที่อัปโหลดค้างนาน ๆ
