PayloadTooLargeError on loopback 3

Question

I need to save base64 image in loopback model. When i'm saving base64 image i get an error saying . I have tried updating in middleware same added below, i have done it before in loopback2, for this project i upgraded to loopback3 and got stuck in this problem, any help will be much appreciated

Stack Trace

Unhandled error for request POST /api/assets/{type}/upload: PayloadTooLargeError: request entity too large
    at readStream (/project/node_modules/raw-body/index.js:155:17)
    at getRawBody (/project/node_modules/raw-body/index.js:108:12)
    at read (/project/node_modules/body-parser/lib/read.js:77:3)
    at urlencodedParser (/project/node_modules/body-parser/lib/types/urlencoded.js:116:5)
    at Layer.handle [as handle_request] (/project/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/project/node_modules/express/lib/router/index.js:317:13)
    at /project/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/project/node_modules/express/lib/router/index.js:335:12)
    at next (/project/node_modules/express/lib/router/index.js:275:10)
    at jsonParser (/project/node_modules/body-parser/lib/types/json.js:118:7)
    at Layer.handle [as handle_request] (/project/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/project/node_modules/express/lib/router/index.js:317:13)
    at /project/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/project/node_modules/express/lib/router/index.js:335:12)
    at next (/project/node_modules/express/lib/router/index.js:275:10)
    at nosniff (/project/node_modules/dont-sniff-mimetype/index.js:4:5)

server.js

let loopback = require('loopback');
let boot = require('loopback-boot');
let bodyParser = require("body-parser");
let app = module.exports = loopback();

app.use(bodyParser.urlencoded({extended: true,limit:10485760}));

config.json

{
  "restApiRoot": "/api",
  "host": "0.0.0.0",
  "port": 3000,
  "remoting": {
    "context": false,
    "rest": {
      "handleErrors": false,
      "normalizeHttpPath": false,
      "xml": false
    },
    "json": {
      "strict": false,
      "limit": 10485760
    },
    "urlencoded": {
      "extended": true,
      "limit": 10485760
    },
    "cors": false
  },
  "legacyExplorer": false,
  "logoutSessionsOnSensitiveChanges": true
}

I have also tried updating in middleware.json

  "parse": {
    "body-parser#json": {
      "limit": "52428800"
    },
    "body-parser#urlencoded": {
      "params": {
        "extended": true
      },
      "limit": "52428800"
    }
  },

Answer 1

Inside the middleware.json file, locate or add "parse" and input this config object like the following:

"parse": {
    "body-parser#json": { "params" : { "limit" : "50mb"} },
    "body-parser#urlencoded": {"params": { "limit" : "50mb", "extended": true }}
  },

(Source)

Answer 2

I also faced this problem and resolved it by adding two lines inside the server/config.json file

{
  "restApiRoot": "/api",
  "host": "0.0.0.0",
  "port": 3000,
  "remoting": {
    "context": false,
    "rest": {
      "handleErrors": false,
      "normalizeHttpPath": false,
      "xml": false
    },
    "json": {
      "strict": false,

       // add this line
      "limit": "50mb"
    },
    "urlencoded": {
      "extended": true,

       // and this line
      "limit": "50mb"
    },
    "cors": false
  }
}

Answer 3

For Loopback4

• create a json-body-parser.ts class which implements BodyParser interface and override the default configurations

import {inject} from '@loopback/core';
import {json} from 'body-parser';
import {is} from 'type-is';

import {
  BodyParser,
  BodyParserMiddleware,
  builtinParsers, getParserOptions, invokeBodyParserMiddleware, RequestBody,
  RequestBodyParserOptions,
  RestBindings,
  sanitizeJsonParse,
} from '@loopback/rest';
import {Request} from '@loopback/rest';


export class JsonBodyParser implements BodyParser {
  name = builtinParsers.json;
  private jsonParser: BodyParserMiddleware;

  constructor(
    @inject(RestBindings.REQUEST_BODY_PARSER_OPTIONS, {optional: true})
      options: RequestBodyParserOptions = {
      limit:"2048576MB",
      json: {
        strict: false
      },
    },
  ) {
    const jsonOptions = getParserOptions('json', options);
    const prohibitedKeys = [
      '__proto__',
      'constructor.prototype',
      ...(options.validation?.prohibitedKeys ?? []),
    ];
    jsonOptions.reviver = sanitizeJsonParse(
      jsonOptions.reviver,
      prohibitedKeys,
    );
    this.jsonParser = json(jsonOptions);
  }

  supports(mediaType: string) {
    return !!is(mediaType, '*/json', '*/*+json');
  }



  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  async parse(request: Request): Promise<RequestBody> {
    let body = await invokeBodyParserMiddleware(this.jsonParser, request);
    // https://github.com/expressjs/body-parser/blob/master/lib/types/json.js#L71-L76
    const contentLength = request.get('content-length');
    if (contentLength != null && +contentLength === 0) {
      body = undefined;
    }
    return {value: body};
  }


}

• bind the newly created class in your application.ts file

this.bodyParser(JsonBodyParser)

see this for more examples: https://github.com/loopbackio/loopback-next/tree/master/packages/rest/src/body-parsers