🖼️ Image Uploader Multer Mern API — Modern Image Upload App (Node.js + Express + EJS)

Image Uploader Multer Mern API is a sleek, full-stack image upload and management web application built using Node.js, Express, MongoDB, and EJS. It supports both manual uploads via form and API-based uploads, with an elegant Glassmorphism UI, dark gradient design, and a modern responsive gallery layout.

---

🚀 Features

✅ Glassmorphism + Dark Gradient UI — clean, aesthetic design with modern effects ✅ Responsive Layout — grid gallery auto-adjusts to screen size ✅ Instant Image Preview & Upload Feedback ✅ Dual Upload Methods — via form and API ✅ EJS Templating — server-side rendering for simplicity ✅ MongoDB Integration — stores image data efficiently ✅ Static Hosting for Uploaded Files — easily accessible URLs ✅ Error Handling Middleware — user-friendly API messages

---

🧱 Tech Stack

Category	Technology
Frontend	EJS, CSS (Glassmorphism Design), Poppins Font
Backend	Node.js, Express.js
Database	MongoDB (Mongoose)
Templating	EJS
Styling	Custom CSS + Gradient + Hover Effects
File Uploads	Multer
Environment	dotenv
Cross-Origin Access	CORS

---

📂 Folder Structure

Image Uploader Multer Mern API/
│
├── public/
│   └── css/
│       └── styles.css        # Gradient + Glassmorphism styling
│
├── uploads/                  # Uploaded images stored here
│
├── views/
│   ├── index.ejs             # Upload page (form + API section)
│   └── gallery.ejs           # Modern gallery grid
│
├── routes/
│   └── upload.routes.js      # Upload routes (form + API)
│
├── models/
│   └── Image.model.js        # MongoDB schema for storing image data
│
├── .env                      # Environment variables
│
├── server.js                 # Main Express server
│
└── package.json              # Project dependencies and scripts

---

⚙️ Installation & Setup

Follow these steps to run Image Uploader Multer Mern API locally:

1️⃣ Clone the Repository

git clone https://github.com/yourusername/Image Uploader Multer Mern API.git
cd Image Uploader Multer Mern API

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Environment Variables

Create a .env file in the project root:

MONGODB_URI=mongodb+srv://<your-cluster-url>
PORT=3000

4️⃣ Run the Server

npm start

The server will run at: 👉 http://localhost:3000

---

🖋️ Usage

🧍 Manual Upload (Web Form)

1. Visit / route.
2. Choose an image file and click Upload.
3. Image will appear in your Gallery section.

⚙️ API Upload

Use the /api/uploads endpoint:

Example (using cURL)

curl -X POST -F "image=@yourfile.jpg" http://localhost:3000/api/uploads

Example Response

{
  "message": "Image uploaded successfully",
  "image": {
    "originalName": "yourfile.jpg",
    "url": "http://localhost:3000/uploads/yourfile.jpg"
  }
}

---

🖼️ Gallery View

• Responsive 4-column grid layout
• Hover animation for image zoom
• Displays uploaded images dynamically from the database

---

🎨 Design Highlights

• Gradient background with subtle animation
• Glass card design for upload box
• Smooth transitions on hover and button clicks
• Modern typography using Poppins
• Fully responsive for mobile, tablet, and desktop

---

🧠 Future Enhancements

🔹 Drag-and-drop image upload 🔹 Image compression and preview before upload 🔹 User authentication for private uploads 🔹 Delete/edit uploaded images 🔹 Cloud storage integration (e.g., Cloudinary, AWS S3)

---

🤝 Contributing

Contributions are welcome! If you have suggestions for improvement, feel free to open a pull request or issue.

---

🧑‍💻 Author

👨‍💻 Abdullah Niaz 📫 GitHub • 💼 LinkedIn (add your link)