how to upload an image using multipart form data in flutter using dio with mime type

Question

here is my code

void _uploadFile(filePath1, filepath2) async {
    // Get base file name
    String fileName1 = basename(filePath1.path);
    var ij = lookupMimeType(fileName1);
    print('this is $ij');
    print("File base name: $fileName1");
    print(filePath1);
    String fileName2 = basename(filepath2.path);

    try {
      FormData formData = new FormData.fromMap({
        "text": 'hello',
        "productImages": [
          await MultipartFile.fromFile(filePath1.path, filename: fileName1),
          await MultipartFile.fromFile(filepath2.path, filename: fileName2),
        ]
      });

      Response response = await Dio().post("http://192.168.18.25:8080/test",
          data: formData,);
      print("File upload response: $response");

      // Show the incoming message in snakbar
      _showSnakBarMsg(response.data['message']);
    } catch (e) {
      print("Exception Caught: $e");
    }
  }

I am unable to get any files when mime type is set to image. I am able to get images when i set to any

Solution

The easiest method is to use the mime_type plugin from flutter.dev. Add this imports

import 'package:dio/dio.dart';
import 'package:http_parser/http_parser.dart';
import 'package:mime_type/mime_type.dart';

Add the specific contentType.

  String mimeType = mime(fileName);
  String mimee = mimeType.split('/')[0];
  String type = mimeType.split('/')[1];

  Dio dio = new Dio();
  dio.options.headers["Content-Type"] = "multipart/form-data";
  FormData formData = new FormData.fromMap({
   'file':await MultipartFile.fromFile(filePath,
      filename: fileName, contentType: MediaType(mimee, type))
  });
  Response response = await dio
      .post('http://192.168.18.25:8080/test', data: formData)
      .catchError((e) => print(e.response.toString()));