Search code examples
flutterfile-uploaddio

Flutter Dio: Failed Upload Image to Server


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

enter image description here enter image description here

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.


Solution

  • 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;
        }
      }