Search code examples
flutterdartpostdio

Flutter Dio package Exception 413 when uploading an image

I am trying to upload a jpg image using Form data through the Dio package, the request is working properly on Postman, so i think the problem is either in my code or in the image am trying to upload.

As for the image, I have a bitmap with some edits applied on it, i turn this btm into a Uint8List and then I encode it into a jpg file, i use the Bitmap plugin to do that.

final directory = await getApplicationDocumentsDirectory();
File image = await File('${directory.path}/image.jpg').create();
await image.writeAsBytes(widget.editedBitmap.buildHeaded());

Then i get the image width and height through decoding it

var decodedImage = await decodeImageFromList(imageBytes);
print(decodedImage.width);
print(decodedImage.height);

and then i create my form data

FormData formData = new FormData.fromMap({
  'title': titleController.text,
  'description': descriptionController.text,
  'is_public': privacy == 'Public' ? true : false,
  'photo_width': decodedImage.width,
  'photo_height': decodedImage.height,
  'media_file': await MultipartFile.fromFile(
    image.path,
    filename: image.path.split("/").last,
    contentType: new MediaType("image", "jpeg"),
  ),
});

then i create my dio instance and configure the options

var dio = new Dio();
dio.options.baseUrl = globals.HttpSingleton().getBaseUrl();
dio.options.connectTimeout = 5000; //5s
dio.options.receiveTimeout = 3000;
dio.options.headers = {
  HttpHeaders.acceptHeader: '*/*',
  HttpHeaders.authorizationHeader: 'Bearer ' + globals.accessToken,
  HttpHeaders.contentTypeHeader: 'multipart/form-data'
};

and here is my request

Response response;
try {
  response = await dio.post(
    '/photos/upload',
    data: formData,
    onSendProgress: (int sent, int total) {
      print('$sent $total');
    },
  );
} on DioError catch (e) {
  print(e.response.data);
}

And here is the response (e) i get

I/flutter (12154): <html>
I/flutter (12154): <head><title>413 Request Entity Too Large</title></head>
I/flutter (12154): <body>
I/flutter (12154): <center><h1>413 Request Entity Too Large</h1></center>
I/flutter (12154): <hr><center>nginx/1.18.0 (Ubuntu)</center>
I/flutter (12154): </body>
I/flutter (12154): </html>

when I searched about this, it said that 413 happens when my request is too large for the server, however, using postman, and while uploading a bigger sized image, it still works which doesn't make sense to me, any idea what could be the problem?

If any further info is needed please let me know.

Solution

  • Turns out when the server was deployed, if not specified, the upload limit is set to 1MB by default, and due to my mistake of uploading different images with different sizes from phone and postman, it took me a lot of time to figure it out. I contacted the DevOps and it was solved.