413 error on AWS Amplify hosting for React App

// React App (Simplified - you'll need Cognito setup for credentials)
import { Storage } from 'aws-amplify';

async function handleFileUpload(file) {
  try {
    await Storage.put(file.name, file, { contentType: file.type });
    console.log('File upload successful!');
  } catch(error) {
    console.error('Upload error:', error);
  }
}

The 413 "Request Entity Too Large" error signifies that the file you're attempting to upload exceeds the maximum request payload size allowed by AWS Amplify frontend hosting. There are a few things to note here:

Amplify Hosting is for Static Assets: AWS Amplify hosting is primarily designed for hosting the static frontend assets of your web application (HTML, CSS, JavaScript, images, etc.). It may have size limitations for direct file uploads to the hosting service itself. Solutions

Utilize S3 for Large File Uploads:

The recommended approach is to directly upload your large files to an Amazon S3 bucket. Structure your React app to handle these uploads as follows: Obtain temporary credentials: Use AWS services like Amazon Cognito to gain temporary security credentials allowing your React app to interact with S3. Use an S3 Pre-signed URL: Generate a pre-signed URL in your backend which authorizes the file upload directly to S3. Direct Upload from Client: Utilize the AWS SDK within your React app to upload the file directly to S3 using the pre-signed URL. Implement a Serverless Backend (API Gateway + Lambda):

API Gateway: Set up an API Gateway endpoint to handle file uploads. Lambda Function: Create a Lambda function that receives the file through the API gateway, processes it if needed, and stores it in S3. Trigger from React App: Your React app would send files to the API Gateway endpoint for upload. Advantages of S3 or Serverless Approach

Scalability: These solutions are inherently scalable, unlike trying to increase frontend hosting limits. Control: You have more control over upload size limits and potential processing required for large files. Security: Better security by directly interacting with S3 or through an API layer using temporary credentials. Code Example (Simplified S3 Approach):

Refer to the AWS SDK documentation for the specific method based on your JavaScript setup.

Me too. I use NextJS and I have a "profile" section where I can't upload images over 1mb. The worst thing is that I use NextJS API Routes.