Uploading and storing files from the browser (e.g. images) is a common requirement for applications. If you are using a Headless CMS, it might offer file storage built-in. Otherwise, you'll need a file storage provider.

When dealing with large files or images, uploading using a presigned POST helps shift processing from your server to your provider. For example, you can:

  1. Create a Serverless Function to return a presigned URL.
  2. From the front-end, call your Serverless Function to get the presigned POST URL.
  3. Allow the user to upload a file on the front-end.
  4. Forward the file to the POST URL.

Providers

Here are two example Next.js applications using presigned URLs to upload images.

Related

For more information on what to do next, we recommend the following articles: