How to Upload and Store Files with Vercel

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

The following guide and project show Next.js applications using presigned URLs to upload images:

• Amazon Web Services (AWS) S3
• Google Cloud Storage Bucket