Flutter Dio: Failed Upload Image to Server

Question

First of all, I try in Postman first and it's work.

After that, I created my dio function to upload to the server like this.

Future<AttendanceResponse> checkOut(
    String timeOfCheckout,
    File image,
    String notes,
  ) async {
    try {
      String fileName = image.path.split('/').last;
      print("Image name --> $fileName");
      print("Image path --> ${image.path}");
      final formData = FormData.fromMap({
        "out": timeOfCheckout,
        "out_picture": await MultipartFile.fromFile(
          image.path,
          filename: fileName,
        ),
        "out_note": notes,
        "late": 0,
      });
      final response = await dio.post("attendances/check-out", data: formData);
      return AttendanceResponse.fromJson(response.data);
    } on DioError catch (e) {
      return e.error;
    }
  }

But getting the error like below.

Dio Response Error --> DioError [DioErrorType.RESPONSE]: Http status error [302]

And this is the file and path from the camera.

I/flutter ( 2163): Image name --> scaled_32592bd5-704d-4e0a-9976-9ea94c667f7d4583818212866102164.jpg
I/flutter ( 2163): Image path --> /storage/emulated/0/Android/data/id.cometdev.bozzetto.dev/files/Pictures/scaled_32592bd5-704d-4e0a-9976-9ea94c667f7d4583818212866102164.jpg

I already googling and read the docs from dio and follow it, but still stack with this error.

Answer 1

You need to add contentType property to your form data. It will look like this,

  final formData = FormData.fromMap({
    "out": timeOfCheckout,
    "out_picture": await MultipartFile.fromFile(
        image.path, 
        filename: fileName,
        contentType: new MediaType("image", "jpeg"), // Here we add the content type!
     ),
    "out_note": notes,
    "late": 0,
  });

Answer 2

This is my bad, I forgot to add token to my dio function.

Future<AttendanceResponse> checkOut(
    String timeOfCheckout,
    File image,
    String notes,
  ) async {
    try {
      var fileName = image.path.split('/').last;
      var token = await prefHelper.getToken();
      print("Token --> $token");

      var headers = {
        'content-type': 'application/json',
        'accept': 'application/json',
        'authorization': 'Bearer $token',
      };

      final formData = FormData.fromMap({
        "out": timeOfCheckout,
        "out_picture": await MultipartFile.fromFile(
          image.path,
          filename: fileName,
        ),
        "out_note": notes,
        "late": 0,
      });
      final response = await dio.post("attendances/check-out",
          data: formData, options: Options(method: "POST", headers: headers));
      return AttendanceResponse.fromJson(response.data);
    } on DioError catch (e) {
      return e.error;
    }
  }