PayloadTooLargeError: request entity too large

#1

I have a page where a user can annotate the image using marker.js. Upon render the image, it will create a canvas dataURL.

The submission of the rendered image is via AJAX.
Here is the code:
$.ajax({
url: ‘/save-image-comment’,
type: ‘POST’,
data: {
image: dataUrl,
project_id: ‘{{ project_page_part.project_id }}’,
project_page_part_id: ‘{{ project_page_part.id }}’,
review_id: ‘{{ review_id }}’
},
success: function(data){
// load the whole page
window.location = “{{ route(‘page_part’,{ project_page_part_id: project_page_part.id, review_id: review_id }) }}”
},
error: function (e) {
alert(e.responseText)
alert(e)
}
})

I already set the limit to 20MB and maxSize to 20MB as well.
I also adjust my nginx client_max_body_size 20M.
I always get the 413 PayloadTooLargeError: request entity too large.
The size of the canvas dataURL is only 9KB.

Does anyone able to find a solution?
Thanks for your help.

0 Likes

#2

@josebernard If you take just 2mins to format your codeblocks, it will help everyone to understand your question properly and help you out.

Trust me, non-formatted codeblocks gives headache :slight_smile:

0 Likes

#3
$.ajax({
                            url: '/save-image-comment',
                            type: 'POST',
                            data: {
                                image: dataUrl,
                                project_id: '{{ project_page_part.project_id }}',
                                project_page_part_id: '{{ project_page_part.id }}',
                                review_id: '{{ review_id }}'
                            },
                            success: function(data){
                                // load the whole page
                                window.location = "{{ route('page_part',{ project_page_part_id: project_page_part.id, review_id: review_id }) }}"
                            },
                            error: function (e) {
                                alert(e.responseText)
                                alert(e)
                            }
                        })
                    })
0 Likes

#4

May I know where in AdonisJs config you increased the size to 20mb?

0 Likes

#5

I adjust it in the bodyParser.js file.
json limit to 20mb
files maxsize to 20mb

0 Likes

#6

Changing both the values will no impact.

maxFileSize is used when you are uploading files via multipart/form-data

json settings are used when it’s a request with json body and content-type = application/json

And I believe the ajax request you make is going to do a normal for submission, so increase the size in the formkey of your config file

1 Like

#7

I managed to work on smaller file size but with bigger filesize, it says
“PayloadTooLargeError: maxFieldsSize 2097152 exceeded”

0 Likes