413 payload too large error when uploading image(s)

Problem

413 payload too large error occurred when users were trying to upload their images.

Issue

Since our API server had a large enough limit to uploadable image sizes and had configured AWS Elastic Beanstalk nginx proxy server's configuration client_max_body_size, we did not know what the issue was.

💡
AWS Elastic Beanstalk uses nginx as a reverse proxy to map your application to your Elastic Load Balancing load balancer. For more info read AWS documentation.

Solution

Check the (actual) client_max_body_size set on EC2 instances.

I did not have a clear solution in mind, however, knew that it had to be a configuration issue. After searching for a command to check the actual configuration set on our API servers EC2 instance I came across a post on AWS knowledge center.

$ sudo nginx -T | egrep -i "client_max_body_size"

By connecting to our team's EC2 instances on the AWS console, I found out that it was a configuration issue on our frontend.

Implementation

Our frontend was deployed using nginx which had it's configuration. By changing it's nginx configuration (nginx.conf) and setting the client_max_body_size to an appropriate size, we fixed the issue.