Flutter: การอัพโหลดไฟล์แบบ Form Data ด้วย Dio

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

ทางฝั่ง Server หรือ Web API รับการอัพโหลดเป็น FormData เพราะต้องทำงานกับแอพเวอร์ชั่นเว็บด้วย

ส่วนนี้จะเป็นการประยุกต์ใช้ส่วนเสริมที่ชื่อว่า

1. Image_Picker
2. Dio
3. http_parser

ใครยังไม่เคยใช้ ไม่คุ้นเคย ไปลองเรียนรู้การใช้งานก่อนได้

ซึ่งพอเราได้ที่อยู่ของไฟล์ในเครื่องมาแล้ว ก็สามารถนำมาอ้างอิงใช้งานตามโค้ดด้านล่างได้

Future<String?> upload() async {

    var filePath = 'ที่อยู่ของไฟล์ในเครื่อง';
    var fileName = 'ชื่อของไฟล์ในเครื่อง';
    
    // สร้าง form data โดยการเรียกใช้ FormData.fromMap()
    var formData = FormData.fromMap({
      'file': await MultipartFile.fromFile(
        filePath!,
        filename: fileName,

        // ใน Dio เวอร์ชั่นล่าสุด ต้องมีการกำหนด contentType นะ เช่นถ้าเป็นการอัพโหลดรูปต้องกำหนด Media Type แบบด้านล่าง
        // ปล. class MediaType อันนี้ 
        contentType: MediaType(
          'image',
          'jpeg',
        ),
      )
    });
    
    // ส่ง request แบบ POST ด้วย Dio ไปยัง URL endpoint ที่รับไฟล์ของเรา
    var response = await Dio().post(
      'https://nextflow.in.th/api/upload',
      data: formData
    );
}

และถ้าเกิดตัว Web API ของเรามีการใช้งาน token ด้วยก็สามารถแทรก token เข้าไปใน Request ได้ดังนี้

Dio().post(
  'https://nextflow.in.th/api/upload',
  data: formData,

  // สามารถกำหนด option header เพิ่มเข้าไปตอนส่ง request ได้
  options: Options(
       headers: {
         'Authorization':'Bearer token ใส่ตรงนี้',
       },
    ),
 );

ใครสนใจเรียนรู้ขั้นตอนเต็มๆ สามารถเรียนรู้ได้จากคอร์ส Workshop พิเศษใน Flutterverse ของพลได้เลย