cloudinary-image-upload-route-handler
MIT License
Stars
0
Ecosystems:
TypeScript
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 API Route handlers.
Technologies
- Next.js
- TypeScript
- Cloudinary
- Tailwind CSS
- Database: PostgreSQL
- Migrations: Ley
Features
- Upload image to Cloudinary using
API Route - 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
License
This project is open source and available under the MIT License.