Issue with uploading multi part image file with dio in Flutter

Question

I used Dio framework to upload image to server in my flutter app. Dio version 3.0.9. Post method. Added 4 headers Created form data with image and other fields.

I have analysed many more methods. Like degrading Dio to 2.3.1, to use UploadFileInfo method. Not a success. Then with multipartfileupload. Finally this one.

Future<bool> createStoreWithDio() async {
    Map<String, String> headers = {
      "Accept": "application/json",
      "authorization": tokenString,
      "authtype": "admin",
      "Content-Type": "multipart/form-data"
    };
    try {
      FormData formData = new FormData.fromMap({
        "logo": await http.MultipartFile.fromPath("logo", imageFile.path,
            contentType: new MediaType('image', 'png')),
        "name": " Bala ios",
        "description": "_description",
        "website": "www.website.com",
        "password": "Test password",
        "user_name": "Test userInformationName",
        "mobile": "9988776655",
        "email": "[email protected]",
   
      });

      print(formData.fields);
      Response response = await dio
          .post(
        "API",
        data: formData,
        options: Options(
          headers: headers,
        ),
      )
          .then((value) {
        print(value.toString());
      });
      print(response.toString());
    } catch (error) {
      print(error);
    }
  }

imageFile is the file I captured from camera/ gallery.

I am getting 500 exception. Any help would be helpful

Solution

I am not sure what caused this,this code is used in an app i have change based on your code,but i am not sending any headers so you need to add then try with this code let me know it it's work for you.also make sure you have file imageFile.path also your api url is correct or not make sure you have imported

`'import  package:http_parser/http_parser.dart';
  import 'package:mime/mime.dart';`

 Dio dio = new Dio();
      final mimeTypeData =
      lookupMimeType(imageFile.path, headerBytes: [0xFF, 0xD8]).split('/');
      FormData formData = FormData.fromMap({
        "name": " Bala ios",
        "description": "_description",
        "website": "www.website.com",
        "password": "Test password",
        "user_name": "Test userInformationName",
        "mobile": "9988776655",
        "email": "[email protected]",
        "logo": await MultipartFile.fromFile(imageFile.path,
            contentType: MediaType(mimeTypeData[0], mimeTypeData[1])),
      });

      var response = await dio.post(
        Urls.ImageInsert,
        data: formData,
      );

      var message = response.data['message'];

Comments

[chandru]

Thanks for your response, I still get the 500 exception

[chandru]

Unhandled Exception: DioError [DioErrorType.RESPONSE]: Http status error [500]

[Abhijith]

The server didn't like something and returned status code 500, which typically means "server error",may be something wrong with header values ,did you try to upload a data with postman with this API,@chandru

[Abhijith]

can you upload data without sending any header you have to change the API for test@chandru

[chandru]

Let us continue this discussion in chat.