Cosmic Next File Upload

Example of uploading files to Cosmic using React Dropzone, Cosmic JavaScript SDK, Next.js, and React Server Actions (no exposed API keys). Uses the Cosmic file upload Block.

[View Demo]

Getting Started

First, clone this repo.

git clone https://github.com/cosmicjs/cosmic-next-file-upload
cd cosmic-next-file-upload

Then go to Your Project > API keys and add them to a new file .env.local

# .env.local
COSMIC_BUCKET_SLUG=your_bucket_slug
COSMIC_READ_KEY=your_bucket_read_key
COSMIC_WRITE_KEY=your_bucket_write_key

Then install the app dependencies run the app.

bun i
bun dev

Open http://localhost:3000 with your browser and upload files. Go to the media page in your Cosmic project and see the available files.

Features

Uses:

1. React Dropzone
2. Cosmic CMS
3. React Server Actions (no exposed API keys)
4. Next.js app directory

Learn More

To learn more about Cosmic media and other API methods, visit the Cosmic Documentation.