Flutter: วิธีแยกแยะ MIME type ของไฟล์ก่อนอัพโหลด

สำหรับ Flutter การอัพโหลดไฟล์ไปที่ Server นั่นสามารถเขียนใช้งานได้หลายรูปแบบ ไม่ว่าจะเป็น http package หรือ Dio

แต่หากเป็นเรื่องของการอัพโหลดไฟล์ไปที่ Server หลายครั้งเราจำเป็นต้องกำหนด MIME type ของไฟล์ให้ถูกต้องด้วย ไม่งั้นอาจจะมีปัญหาพวก ไฟล์ไปถึง Server จริง แต่ไม่สามารถบันทึกเป็นไฟล์จริงบน Server ได้เป็นต้น

คล้ายๆ เห็นว่าไฟล์มานะ แต่เอาไปใช้ไม่ได้

กรณีที่พลเจอคือการใช้งาน Dio อัพโหลดไฟล์ไปที่ Web API ที่สร้างด้วย Express (Node.js) และใช้ Multer ช่วยในการรับไฟล์นะครับ

วิธีแก้หนึ่งที่ได้ผลดี ก็คือการกำหนด MIME Type ให้ถูกต้องครับ (เช่นใน Dio เวอร์ชั่น 4.0.4 เป็นต้นไปต้องกำหนดค่านี้ตอนอัพโหลดไฟล์ด้วยนะ)

การแยกแยะ MIME Type แบบอัตโนมัติ

ทีนี้การกำหนด MIME Type มันก็ไม่ได้มีแค่แบบเดียวหน่ะสิ ไฟล์ PDF, PNG, JPG, JPEG พวกนี้ จะมานั่งเขียนโค้ดแยกแยะเองก็ใช่เรื่อง

พอดีจากการ consult โปรเจคหนึ่ง ได้พบเจอกับ package ที่ช่วยเรื่องนี้ได้ครับ นั่นคือ mime นี่เอง

วิธีใช้ก็ง่ายมาก จะมี function ชื่อ lookupMimeType() ครับ เราแค่ใส่ชื่อไฟล์ลงไป มันก็จะคืนค่าออกมาเป็นรูปแบบที่เอาไปใช้ในการอัพโหลดไฟล์ต่อได้

lookupMimeType('nextflow.png')
// ก็จะได้เป็น image/png

ดังนั้น ถ้าเอาไปรวมกับ การอัพโหลดไฟล์ด้วย Dio ที่พลเคยเล่าไว้ที่นี่ ก็จะสามารถแปลงออกมาได้เป็นแบบนี้ครับ

var formData = FormData.fromMap({
      'file': await MultipartFile.fromFile(
        'ที่อยู่ของไฟล์' ,
        filename: 'ชื่อไฟล์',

        // ส่วนนี้เราเอา lookupMimeType() มาใช้ร่วมกับ MediaType.parse เพื่อกำหนด contentType ของไฟล์นั่นเอง
        contentType: MediaType.parse(lookupMimeType('ชื่อไฟล์')!),
   )
});

สำหรับความรู้ส่วนนี้ได้มาจากระหว่างไป consult ให้บริษัท 2bsimple ขอบคุณคุณกันที่แนะนำมา ณ ที่นี้ครับ 🙏