Image upload giving 'request entity too large':
anuj-bluebash opened this issue · 5 comments
anuj-bluebash commented
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
- No
Code of Conduct
- I agree to follow this project's Code of Conduct
bloodf commented
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 largeerror.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
- No
Code of Conduct
- I agree to follow this project's Code of Conduct
anuj-bluebash commented
@bloodf I am using
VueStorefront + NuxtJs + Spree
bloodf commented
@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
@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
Closed due to inactivity