Express server sends 500 error code when doing post / put request with large string

Question

I am building small project when I use nodejs + express and body-parser package to manage my routes and data on the server side. On the front end I have simple react app that has installed tinyMCE editor. Problem is when I select image to insert to a document, editor makes it a base64 blob and when I attempt to save changes including that base64 image (by doing PUT request to server) node spits error 500. At the beginning I was thinking its a problem with application json headers as suggested in one of the git issue topics.

So I switched to

"Content-Type": "application/x-www-form-urlencoded"

Yet problem persists.

Then I tried with some small image 16x16 (previously it was 340x300) and it worked...

So it means probably that POST had too much characters in the data section, but I thought limit is to 1.9GB.

Here is some server code example:

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

router.put("/:id", update);

const update = (req, res, next) => {
    documentController.update(req, res, next);
};

const update = async (req, res, next) => {
    const { name } = req.body;
    const document = await Document.findOne({ name });

    ...

    document
        .save()
        .then(document => {
            ...
        })
        .catch(err => next(err));
};

and front end request:

  request = async (url, method, data) => {
    try {
      let headers = {
        //"Content-Type": "application/json"
        "Content-Type": "application/x-www-form-urlencoded"
      };
      let config = {
        headers,
        method
      };
      if (data !== undefined) {
        //config["body"] = data;
        let query = "";
        data = JSON.parse(data);
        for (let key in data) {
          query +=
            encodeURIComponent(key) + "=" + encodeURIComponent(data[key]) + "&";
        }
        query = query.slice(0, -1);
        config["body"] = query;
      }
      let response = await fetch(url, config).catch(error =>
        console.log(error)
      );
      let json = await response.json();
      return json;
    } catch (error) {
      console.log(error);
    }
  };

Maybe some one can point me to whats wrong with PUT request when image is larger and how to solve it.

EDIT

yes as i suspected its a problem with large string, i checked error:

message: 'request entity too large', expected: 328465, length: 328465, limit: 102400,

EDIT 2

this is complete solution that solves the problem

app.use(
  bodyParser.urlencoded({
    limit: "50mb",
    extended: true,
    parameterLimit: 50000
  })
);
app.use(bodyParser.json({ limit: "50mb" }));

Answer 1

Have a look at the multer node middleware. It will handle the upload using streams, instead of waiting for the whole file to be loaded in server's memory before saving it.

Edit (after seeing the comment with the error)

Try and increase the size limit your app accepts with:

app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));