search

vuestorefront / vue-storefront

Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
https://www.alokai.com
MIT License
10.64k stars 2.09k forks source link

Image upload giving 'request entity too large': #6824

Closed anuj-bluebash closed 1 year ago

anuj-bluebash commented 2 years ago

Describe the Bug

We are adding return module in VueStorefront, everything is working fine but if we are trying to upload the image more than 10KB its giving request entity too large error.

Note: We are uploading image data in base64

Current behavior

No response

Expected behavior

It should upload image without any size constraints.

Steps to reproduce

No response

What version of Vue Storefront are you using?

2.6.14

What version of Node.js are you using?

v14.19.1

What browser (and version) are you using?

Chrome, Version 106.0.5249.119 (Official Build) (arm64)

What operating system (and version) are you using?

macOS

Relevant log output

{
  "error": {
    "message": "request entity too large",
    "name": "PayloadTooLargeError",
    "frames": [
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js",
        "method": "readStream",
        "line": 155,
        "column": 17,
        "context": {
          "start": 150,
          "pre": "\n  // check the length and limit options.\n  // note: we intentionally leave the stream paused,\n  // so users should handle the stream themselves.\n  if (limit !== null && length !== null && length > limit) {",
          "line": "    return done(createError(413, 'request entity too large', {",
          "post": "      expected: length,\n      length: length,\n      limit: limit,\n      type: 'entity.too.large'\n    }))"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js:155:17"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js",
        "method": "getRawBody",
        "line": 108,
        "column": 12,
        "context": {
          "start": 103,
          "pre": "    ? parseInt(opts.length, 10)\n    : null\n\n  if (done) {\n    // classic callback style",
          "line": "    return readStream(stream, encoding, length, limit, done)",
          "post": "  }\n\n  return new Promise(function executor (resolve, reject) {\n    readStream(stream, encoding, length, limit, function onRead (err, buf) {\n      if (err) return reject(err)"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js:108:12"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/read.js",
        "method": "read",
        "line": 77,
        "column": 3,
        "context": {
          "start": 72,
          "pre": "    }))\n  }\n\n  // read body\n  debug('read body')",
          "line": "  getBody(stream, opts, function (error, body) {",
          "post": "    if (error) {\n      var _error\n\n      if (error.type === 'encoding.unsupported') {\n        // echo back charset"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/read.js:77:3"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/types/json.js",
        "method": "jsonParser",
        "line": 135,
        "column": 5,
        "context": {
          "start": 130,
          "pre": "      }))\n      return\n    }\n\n    // read",
          "line": "    read(req, res, next, parse, debug, {",
          "post": "      encoding: charset,\n      inflate: inflate,\n      limit: limit,\n      verify: verify\n    })"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/types/json.js:135:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js",
        "method": "Layer.handle [as handle_request]",
        "line": 95,
        "column": 5,
        "context": {
          "start": 90,
          "pre": "    // not a standard request handler\n    return next();\n  }\n\n  try {",
          "line": "    fn(req, res, next);",
          "post": "  } catch (err) {\n    next(err);\n  }\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js:95:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "trim_prefix",
        "line": 317,
        "column": 13,
        "context": {
          "start": 312,
          "pre": "    debug('%s %s : %s', layer.name, layerPath, req.originalUrl);\n\n    if (layerError) {\n      layer.handle_error(layerError, req, res, next);\n    } else {",
          "line": "      layer.handle_request(req, res, next);",
          "post": "    }\n  }\n};\n\n/**"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:317:13"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": null,
        "line": 284,
        "column": 7,
        "context": {
          "start": 279,
          "pre": "\n      if (route) {\n        return layer.handle_request(req, res, next);\n      }\n",
          "line": "      trim_prefix(layer, layerError, layerPath, path);",
          "post": "    });\n  }\n\n  function trim_prefix(layer, layerError, layerPath, path) {\n    if (layerPath.length !== 0) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:284:7"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "Function.process_params",
        "line": 335,
        "column": 12,
        "context": {
          "start": 330,
          "pre": "  // captured parameters from the layer, keys and values\n  var keys = layer.keys;\n\n  // fast track\n  if (!keys || keys.length === 0) {",
          "line": "    return done();",
          "post": "  }\n\n  var i = 0;\n  var name;\n  var paramIndex = 0;"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:335:12"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "next",
        "line": 275,
        "column": 10,
        "context": {
          "start": 270,
          "pre": "      ? mergeParams(layer.params, parentParams)\n      : layer.params;\n    var layerPath = layer.path;\n\n    // this should be done for the layer",
          "line": "    self.process_params(layer, paramcalled, req, res, function (err) {",
          "post": "      if (err) {\n        return next(layerError || err);\n      }\n\n      if (route) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:275:10"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/init.js",
        "method": "expressInit",
        "line": 40,
        "column": 5,
        "context": {
          "start": 35,
          "pre": "    setPrototypeOf(req, app.request)\n    setPrototypeOf(res, app.response)\n\n    res.locals = res.locals || Object.create(null);\n",
          "line": "    next();",
          "post": "  };\n};\n\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/init.js:40:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js",
        "method": "Layer.handle [as handle_request]",
        "line": 95,
        "column": 5,
        "context": {
          "start": 90,
          "pre": "    // not a standard request handler\n    return next();\n  }\n\n  try {",
          "line": "    fn(req, res, next);",
          "post": "  } catch (err) {\n    next(err);\n  }\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js:95:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "trim_prefix",
        "line": 317,
        "column": 13,
        "context": {
          "start": 312,
          "pre": "    debug('%s %s : %s', layer.name, layerPath, req.originalUrl);\n\n    if (layerError) {\n      layer.handle_error(layerError, req, res, next);\n    } else {",
          "line": "      layer.handle_request(req, res, next);",
          "post": "    }\n  }\n};\n\n/**"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:317:13"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": null,
        "line": 284,
        "column": 7,
        "context": {
          "start": 279,
          "pre": "\n      if (route) {\n        return layer.handle_request(req, res, next);\n      }\n",
          "line": "      trim_prefix(layer, layerError, layerPath, path);",
          "post": "    });\n  }\n\n  function trim_prefix(layer, layerError, layerPath, path) {\n    if (layerPath.length !== 0) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:284:7"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "Function.process_params",
        "line": 335,
        "column": 12,
        "context": {
          "start": 330,
          "pre": "  // captured parameters from the layer, keys and values\n  var keys = layer.keys;\n\n  // fast track\n  if (!keys || keys.length === 0) {",
          "line": "    return done();",
          "post": "  }\n\n  var i = 0;\n  var name;\n  var paramIndex = 0;"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:335:12"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "next",
        "line": 275,
        "column": 10,
        "context": {
          "start": 270,
          "pre": "      ? mergeParams(layer.params, parentParams)\n      : layer.params;\n    var layerPath = layer.path;\n\n    // this should be done for the layer",
          "line": "    self.process_params(layer, paramcalled, req, res, function (err) {",
          "post": "      if (err) {\n        return next(layerError || err);\n      }\n\n      if (route) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:275:10"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/query.js",
        "method": "query",
        "line": 45,
        "column": 5,
        "context": {
          "start": 40,
          "pre": "    if (!req.query) {\n      var val = parseUrl(req).query;\n      req.query = queryparse(val, opts);\n    }\n",
          "line": "    next();",
          "post": "  };\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/query.js:45:5"
      }
    ]
  },
  "hasInternal": true
}

Able to fix / change the documentation?

Code of Conduct

bloodf commented 2 years ago

What integration you are using?

Describe the Bug

We are adding return module in VueStorefront, everything is working fine but if we are trying to upload the image more than 10KB its giving request entity too large error.

Note: We are uploading image data in base64

Current behavior

No response

Expected behavior

It should upload image without any size constraints.

Steps to reproduce

No response

What version of Vue Storefront are you using?

2.6.14

What version of Node.js are you using?

v14.19.1

What browser (and version) are you using?

Chrome, Version 106.0.5249.119 (Official Build) (arm64)

What operating system (and version) are you using?

macOS

Relevant log output

{
  "error": {
    "message": "request entity too large",
    "name": "PayloadTooLargeError",
    "frames": [
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js",
        "method": "readStream",
        "line": 155,
        "column": 17,
        "context": {
          "start": 150,
          "pre": "\n  // check the length and limit options.\n  // note: we intentionally leave the stream paused,\n  // so users should handle the stream themselves.\n  if (limit !== null && length !== null && length > limit) {",
          "line": "    return done(createError(413, 'request entity too large', {",
          "post": "      expected: length,\n      length: length,\n      limit: limit,\n      type: 'entity.too.large'\n    }))"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js:155:17"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js",
        "method": "getRawBody",
        "line": 108,
        "column": 12,
        "context": {
          "start": 103,
          "pre": "    ? parseInt(opts.length, 10)\n    : null\n\n  if (done) {\n    // classic callback style",
          "line": "    return readStream(stream, encoding, length, limit, done)",
          "post": "  }\n\n  return new Promise(function executor (resolve, reject) {\n    readStream(stream, encoding, length, limit, function onRead (err, buf) {\n      if (err) return reject(err)"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/raw-body/index.js:108:12"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/read.js",
        "method": "read",
        "line": 77,
        "column": 3,
        "context": {
          "start": 72,
          "pre": "    }))\n  }\n\n  // read body\n  debug('read body')",
          "line": "  getBody(stream, opts, function (error, body) {",
          "post": "    if (error) {\n      var _error\n\n      if (error.type === 'encoding.unsupported') {\n        // echo back charset"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/read.js:77:3"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/types/json.js",
        "method": "jsonParser",
        "line": 135,
        "column": 5,
        "context": {
          "start": 130,
          "pre": "      }))\n      return\n    }\n\n    // read",
          "line": "    read(req, res, next, parse, debug, {",
          "post": "      encoding: charset,\n      inflate: inflate,\n      limit: limit,\n      verify: verify\n    })"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/body-parser/lib/types/json.js:135:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js",
        "method": "Layer.handle [as handle_request]",
        "line": 95,
        "column": 5,
        "context": {
          "start": 90,
          "pre": "    // not a standard request handler\n    return next();\n  }\n\n  try {",
          "line": "    fn(req, res, next);",
          "post": "  } catch (err) {\n    next(err);\n  }\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js:95:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "trim_prefix",
        "line": 317,
        "column": 13,
        "context": {
          "start": 312,
          "pre": "    debug('%s %s : %s', layer.name, layerPath, req.originalUrl);\n\n    if (layerError) {\n      layer.handle_error(layerError, req, res, next);\n    } else {",
          "line": "      layer.handle_request(req, res, next);",
          "post": "    }\n  }\n};\n\n/**"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:317:13"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": null,
        "line": 284,
        "column": 7,
        "context": {
          "start": 279,
          "pre": "\n      if (route) {\n        return layer.handle_request(req, res, next);\n      }\n",
          "line": "      trim_prefix(layer, layerError, layerPath, path);",
          "post": "    });\n  }\n\n  function trim_prefix(layer, layerError, layerPath, path) {\n    if (layerPath.length !== 0) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:284:7"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "Function.process_params",
        "line": 335,
        "column": 12,
        "context": {
          "start": 330,
          "pre": "  // captured parameters from the layer, keys and values\n  var keys = layer.keys;\n\n  // fast track\n  if (!keys || keys.length === 0) {",
          "line": "    return done();",
          "post": "  }\n\n  var i = 0;\n  var name;\n  var paramIndex = 0;"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:335:12"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "next",
        "line": 275,
        "column": 10,
        "context": {
          "start": 270,
          "pre": "      ? mergeParams(layer.params, parentParams)\n      : layer.params;\n    var layerPath = layer.path;\n\n    // this should be done for the layer",
          "line": "    self.process_params(layer, paramcalled, req, res, function (err) {",
          "post": "      if (err) {\n        return next(layerError || err);\n      }\n\n      if (route) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:275:10"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/init.js",
        "method": "expressInit",
        "line": 40,
        "column": 5,
        "context": {
          "start": 35,
          "pre": "    setPrototypeOf(req, app.request)\n    setPrototypeOf(res, app.response)\n\n    res.locals = res.locals || Object.create(null);\n",
          "line": "    next();",
          "post": "  };\n};\n\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/init.js:40:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js",
        "method": "Layer.handle [as handle_request]",
        "line": 95,
        "column": 5,
        "context": {
          "start": 90,
          "pre": "    // not a standard request handler\n    return next();\n  }\n\n  try {",
          "line": "    fn(req, res, next);",
          "post": "  } catch (err) {\n    next(err);\n  }\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/layer.js:95:5"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "trim_prefix",
        "line": 317,
        "column": 13,
        "context": {
          "start": 312,
          "pre": "    debug('%s %s : %s', layer.name, layerPath, req.originalUrl);\n\n    if (layerError) {\n      layer.handle_error(layerError, req, res, next);\n    } else {",
          "line": "      layer.handle_request(req, res, next);",
          "post": "    }\n  }\n};\n\n/**"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:317:13"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": null,
        "line": 284,
        "column": 7,
        "context": {
          "start": 279,
          "pre": "\n      if (route) {\n        return layer.handle_request(req, res, next);\n      }\n",
          "line": "      trim_prefix(layer, layerError, layerPath, path);",
          "post": "    });\n  }\n\n  function trim_prefix(layer, layerError, layerPath, path) {\n    if (layerPath.length !== 0) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:284:7"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "Function.process_params",
        "line": 335,
        "column": 12,
        "context": {
          "start": 330,
          "pre": "  // captured parameters from the layer, keys and values\n  var keys = layer.keys;\n\n  // fast track\n  if (!keys || keys.length === 0) {",
          "line": "    return done();",
          "post": "  }\n\n  var i = 0;\n  var name;\n  var paramIndex = 0;"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:335:12"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js",
        "method": "next",
        "line": 275,
        "column": 10,
        "context": {
          "start": 270,
          "pre": "      ? mergeParams(layer.params, parentParams)\n      : layer.params;\n    var layerPath = layer.path;\n\n    // this should be done for the layer",
          "line": "    self.process_params(layer, paramcalled, req, res, function (err) {",
          "post": "      if (err) {\n        return next(layerError || err);\n      }\n\n      if (route) {"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/router/index.js:275:10"
      },
      {
        "file": "/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/query.js",
        "method": "query",
        "line": 45,
        "column": 5,
        "context": {
          "start": 40,
          "pre": "    if (!req.query) {\n      var val = parseUrl(req).query;\n      req.query = queryparse(val, opts);\n    }\n",
          "line": "    next();",
          "post": "  };\n};\n"
        },
        "lang": "js",
        "open": "/__open-in-editor?file=/Users/sheriff/apps/axel/spree-storefront/node_modules/express/lib/middleware/query.js:45:5"
      }
    ]
  },
  "hasInternal": true
}

Able to fix / change the documentation?

  • [ ] Yes
  • [x] No

Code of Conduct

  • [x] I agree to follow this project's Code of Conduct
anuj-bluebash commented 2 years ago

@bloodf I am using

VueStorefront + NuxtJs + Spree

bloodf commented 2 years ago

@anuj-bluebash this error is on the server, that is receiving the file upload (https://blog.hubspot.com/website/413-request-entity-too-large#:~:text=What%20does%20%E2%80%9C413%20Request%20Entity,error%20to%20alert%20the%20client.)

Can you change from Base64 to file stream? It's the best process for file manipulation. Or you can create a driver that receives different manipulation, like AWS, API and then you can create different manipulation process.

anuj-bluebash commented 2 years ago

@anuj-bluebash this error is on the server, that is receiving the file upload (https://blog.hubspot.com/website/413-request-entity-too-large#:~:text=What%20does%20%E2%80%9C413%20Request%20Entity,error%20to%20alert%20the%20client.)

Can you change from Base64 to file stream? It's the best process for file manipulation. Or you can create a driver that receives different manipulation, like AWS, API and then you can create different manipulation process.

Thanks @bloodf Got it, I will try with file stream. Do you have any suggested way for same? Like how we can create a quick form in VSF that work like a normal HTML form?

filrak commented 1 year ago

Closed due to inactivity