Multer & Cloudinary Image Upload App

A modern Node.js Express application for uploading profile pictures using both local disk storage (with Multer) and Cloudinary cloud storage. Features a beautiful UI for both upload methods.

Features

• Upload profile pictures using two methods:
  • Local Disk Storage (Multer)
  • Cloud Storage (Cloudinary)
• Image preview after upload
• Modern, responsive UI for both upload forms
• Latest uploaded image is always shown
• Environment variable support for sensitive credentials

Getting Started

1. Clone the repository

git clone <your-repo-url>
cd <your-project-folder>

2. Install dependencies

npm install

3. Configure Environment Variables

Create a .env file in the root directory and add your Cloudinary credentials:

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
COOKIE_EXPIERY=86400000 # 1 day in ms

4. Run the app

npm start
# or, for auto-reload during development:
npm run dev

The server will start on the default port (e.g., 3000). Visit:

• http://localhost:3000/multer/diskStorage — Disk Storage Upload
• http://localhost:3000/multer/cloud — Cloudinary Upload

Project Structure

├── app.js                  # Main Express app
├── package.json            # Project metadata & scripts
├── config/
│   └── cloudinary.config.js # Cloudinary configuration
├── routes/
│   └── user.route.js        # All upload routes
├── uploads/                # Local uploaded images
├── views/
│   ├── cloudForm.ejs        # Cloudinary upload UI
│   ├── diskMulter.ejs       # Disk storage upload UI
│   └── index.ejs            # (Optional) Home page
└── ...

Main Routes

• GET /multer/diskStorage — Show disk upload form & latest image
• POST /multer/upload — Handle disk upload
• GET /multer/cloud — Show Cloudinary upload form & latest image
• POST /multer/cloudUpload — Handle Cloudinary upload
• GET /multer/latest — Get latest uploaded image (JSON)

Technologies Used

• Node.js
• Express.js
• Multer
• Cloudinary SDK
• EJS (Embedded JavaScript templates)
• Modern CSS

License

MIT

---

Made with ❤️ for learning and modern web development.