Cloudinary Image Upload Examples in Next.js

This repository contains examples of how to upload images to Cloudinary in a Next.js application. The examples are based on the Cloudinary documentation and the Next.js documentation. The examples are written in TypeScript and it shows how you can upload images to Cloudinary using server actions.

Technologies

• Next.js
• TypeScript
• Cloudinary
• Tailwind CSS
• Database: PostgreSQL
• Migrations: Ley

Features

• Upload image to Cloudinary using server action
• Return data from the server action and access the data in the client
• Error handling in the server action and displaying the error message in the client
• Display the uploaded image in the client

Getting Started

Clone the repository

git clone https://github.com/Eprince-hub/cloudinary-image-upload-example.git

Change the directory

cd cloudinary-image-upload-example

Install the dependencies

pnpm install

Create a .env file in the root directory

touch .env

Add the following environment variables to the .env file: reference the .env.example file

PGHOST=localhost
PGDATABASE=your_database_name
PGUSERNAME=your_database_username
PGPASSWORD=your_database_password
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Run the migrations

pnpm migrate up

Start the development server

pnpm dev

Open your browser and visit http://localhost:3000

UI

Uploaded image

Error handling

Resources

• Cloudinary
• Next.js
• Tailwind CSS
• PostgreSQL
• Cloudinary and Next.js Server action
• TypeScript
• Ley
• Node.js
• React
• Vercel
• pnpm

License

This project is open source and available under the MIT License.