Flutter :- Getting the "PayloadTooLargeError: request entity too large" error in "MultipartRequest" API?

Question

I am using the MultipartRequest for the image upload with the requested parameters, but getting the following exception from my below lines of code. The same API I have used the Android Native and its working very fine there, but getting exception in Flutter Android platform, please check the below error I am getting from the server

request entity too large

413

PayloadTooLargeError: request entity too large
    at readStream (/data/consagous/loyaltie/node_modules/raw-body/index.js:155:17)
    at getRawBody (/data/consagous/loyaltie/node_modules/raw-body/index.js:108:12)
    at read (/data/consagous/loyaltie/node_modules/body-parser/lib/read.js:77:3)
    at jsonParser (/data/consagous/loyaltie/node_modules/body-parser/lib/types/json.js:135:5)
    at Layer.handle [as handle_request] (/data/consagous/loyaltie/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:317:13)
    at /data/consagous/loyaltie/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:335:12)
    at next (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:275:10)
    at logger (/data/consagous/loyaltie/node_modules/morgan/index.js:144:5)
    at Layer.handle [as handle_request] (/data/consagous/loyaltie/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:317:13)
    at /data/consagous/loyaltie/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:335:12)
    at next (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:275:10)
    at expressInit (/data/consagous/loyaltie/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/data/consagous/loyaltie/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:317:13)
    at /data/consagous/loyaltie/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:335:12)
    at next (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:275:10)
    at query (/data/consagous/loyaltie/node_modules/express/lib/middleware/query.js:45:5)
    at Layer.handle [as handle_request] (/data/consagous/loyaltie/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:317:13)
    at /data/consagous/loyaltie/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:335:12)
    at next (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:275:10)
    at Function.handle (/data/consagous/loyaltie/node_modules/express/lib/router/index.js:174:3)

I have used the below lines of code for the uploading the image using the Multipart like below, please check it once.

Future<dynamic> apiUploadImage(
      String url,
      String eventType,
      String name,
      String email,
      String password,
      String mobile,
      String _countryId,
      String _stateId,
      String _cityId,
      String _zipCId,
      String address,
      var lati,
      var longi,
      String _categoryId,
      File imageFile) async {
    print("Current state = " + _stateId + " " + _cityId);

    Uri uri = Uri.parse(url);
    MultipartRequest request = new MultipartRequest('POST', uri);
    request.headers[HEADER_CONTENT_TYPE_KEY] = HEADER_CONTENT_TYPE_VALUE;
    request.headers[HEADER_VERSION_KEY] = HEADER_VERSION_VALUE;
    request.headers[HEADER_DEVICE_TYPE_KEY] = HEADER_DEVICE_TYPE_VALUE;
    request.headers[HEADER_DEVICE_ID_KEY] = HEADER_DEVICE_ID_VALUE;
    request.headers[HEADER_AUTH_TOKEN_KEY] = HEADER_AUTH_TOKEN_VALUE;
    request.headers[HEADER_TIME_KEY] = HEADER_TIME_VALUE;

    request.fields['email'] = email;
    request.fields['password'] = password;
    request.fields['name'] = name;
    request.fields['mobile'] = mobile;
    request.fields['country'] = _countryId;
    request.fields['state'] = _stateId;
    request.fields['city'] = _cityId;
    request.fields['zip_code'] = _zipCId;
    request.fields['role_id'] = '3';
    request.fields['device_type'] = HEADER_DEVICE_TYPE_VALUE;
    request.fields['device_token'] = HEADER_AUTH_TOKEN_VALUE;
    request.fields['category_id'] = _categoryId;
    request.fields['address'] = address;
    request.fields['lati'] = lati.toString();
    request.fields['longi'] = longi.toString();

    print("Current state = " + _stateId + " " + _cityId);

    var stream =
        new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
    var length = await imageFile.length();
    var multipartFile = new MultipartFile("imagefile", stream, length,
        filename: imageFile.path);
    request.files.add(multipartFile);

    var response = await request.send();

    final respStr = await response.stream.bytesToString();

    debugPrint(respStr);

  }

Even though i even compressed the image file before sending but the problem is same, please check my compressor code for the image like below.

imageFile = await ImagePicker.pickImage(source: ImageSource.camera,imageQuality: 85);

I have searched the solutions , but it even not working please check it once.

1). First link
2). Second link
3). Third link
4). Forth link

From the server-side , we have also increased the payload limit in node server like below, but it is not working

bodyParser = { json: {limit: '50mb', extended: true}, urlencoded: {limit: '50mb', extended: true} };

I have tried all the ways on server-side and my side and i have referred this link but all are not working for me.Please check the my above code and let me know where am i wrong? Thanks

Solution 1

I have used all the possible ways to come out from the problem but no one has worked for me, then after I have used the third part library dio 3.0.8 and working very well to upload the image on the server along with request parameters.

Inside the pubspec.yaml used this library,

dio: ^3.0.8

And on the code side, I have used the following code which works.Please check it once.

Dio dio = new Dio(); // with default Options

// Set default configs
    dio.options.baseUrl = BASE_URL;
    dio.options.connectTimeout = 5000; //5s
    dio.options.receiveTimeout = 3000;

    FormData formData = new FormData.fromMap({
      "email": email,
      "password": password,
      "name": name,
      "mobile": mobile,
      "country":_countryId,
      "state": _stateId,
      "city": _cityId,
      "zip_code": _zipCId,
      "role_id": "3",
      "category_id":_categoryId,
      "address": address,
      "lati": lati.toString(),
      "longi": longi.toString(),
      "device_type": HEADER_DEVICE_TYPE_VALUE,


      "profile_image": await MultipartFile.fromFile(imageFile.path,filename: imageFile.path.split("/").last),

    });

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

    if (response.statusCode == 200) {
      apiResponse.onSuccess(response.toString(), eventType);
      print("Image Uploaded");
    } else {
      apiResponse.onError('Failed to load post');
      print("Upload Failed");
    }
  }

Please check this library for more information Click here

Solution 2

There's a named convenience constructor for files. Use it like this:

  request.files.add(
    await http.MultipartFile.fromPath(
      'some_form_value_name',
      File('somefile.zip').path,
      contentType: MediaType('application', 'zip'),
    ),
  );

To send test data, use the other named constructors (fromString and fromBytes) for example:

  request.files.add(http.MultipartFile.fromBytes(
    'another_form_name',
    Uint8List(1000),
    filename: 'somefile.zip',
    contentType: MediaType('application', 'zip'),
  ));

Comments

[pskink]

and what is the value of var length = await imageFile.length();?

[Ravindra Kushwaha]

@pskink I getting the length= 48614

[pskink]

so your image is ~50kB? and your server limit is limit: '50mb'? something is wrong here...

[Ravindra Kushwaha]

@pskink What is wrong, please guide me on it.

[pskink]

tried to upload smaller files? do they fail too?

[Ravindra Kushwaha]

Yes getting the same error @pskink

[pskink]

so double check what you really got on the server side (i mean if it is really what you expect to be received)

[Richard Heap]

Why wouldn't you use the MultipartFile.fromPath convenience constructor to replace the whole stream/length/base constructor lines? As suggested by @pskink, try one of the other constructors to debug - for example .fromString and/or .fromBytes to send a known, short, value to the server. Can you send a random 50k byte array from memory without error?

[Ravindra Kushwaha]

@RichardHeap thanks for your suggestions.. Currently I am out of the office, will come back at 2nd January..Can you please add some code which I will try on day after tomorrow and will let u know soon..thanks

[Ravindra Kushwaha]

Getting the same exception from the above code, please check the code which i have tried ibb.co/VtX23z8, Have tried the both solutions.

[Ravindra Kushwaha]

Thanks for the input, It has not worked for me then after I have used the DIO library which work very well, again thanks and +1 for your effort.