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.

You can use Vercel Blob for file storage. Vercel Blob allows you to upload and serve files via a global network through unique and unguessable URLs.

See our docs to learn how to integrate Vercel Blob into your workflow.

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

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