use cloudinary for image storage. upload image to cloudinary and take the url generated and store in backend

Sooraj-krishna · Sooraj-krishna · commit fcc977faf5c2 · 2025-07-15T22:06:57.000+05:30
diff --git a/HOSTEL_README.md b/HOSTEL_README.md
@@ -30,11 +30,33 @@ This project has been converted from a project management system to a comprehens
 - **Role-based Access**: Only authorized users can add/edit hostels
 - **User Reviews**: Any authenticated user can rate and review hostels
 
+## Image Storage with Cloudinary
+
+Hostel images are now uploaded and stored using [Cloudinary](https://cloudinary.com/). The backend handles image uploads and stores the returned Cloudinary URLs in the database. **Firebase Storage is no longer used for images.**
+
+### Cloudinary Setup
+1. **Create a Cloudinary account** at https://cloudinary.com/ (free tier is sufficient).
+2. **Get your credentials** from the Cloudinary dashboard:
+   - Cloud name
+   - API Key
+   - API Secret
+3. **Add these to your `.env.local` file:**
+   ```env
+   CLOUDINARY_CLOUD_NAME=your_cloud_name
+   CLOUDINARY_API_KEY=your_api_key
+   CLOUDINARY_API_SECRET=your_api_secret
+   ```
+4. **Install the Cloudinary SDK:**
+   ```bash
+   npm install cloudinary
+   ```
+5. **No further setup is needed.** The backend API will handle all uploads and return the Cloudinary image URLs for use in the app.
+
 ## Database Schema
 
 ### Core Tables
 - **hostels**: Main hostel information
-- **hostel_images**: Image management with primary image support
+- **hostel_images**: Image management with primary image support (stores Cloudinary URLs)
 - **ratings**: User ratings with multiple categories
 - **comments**: User reviews and feedback
 - **categories**: Dynamic category system
diff --git a/app/api/hostel-images/route.ts b/app/api/hostel-images/route.ts
@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { db } from '../../../lib/db';
 import { hostelImages } from '../../../lib/schema';
 import { eq } from 'drizzle-orm';
+import { uploadImageToCloudinary } from '@/util/uploadImage';
 
 export async function GET(req: NextRequest) {
   try {
@@ -25,19 +26,37 @@ export async function GET(req: NextRequest) {
 
 export async function POST(req: NextRequest) {
   try {
-    const { hostelId, imageUrl, imageType, isPrimary } = await req.json();
+    // Parse multipart/form-data
+    const formData = await req.formData();
+    const hostelId = formData.get('hostelId');
+    const imageType = formData.get('imageType') || 'general';
+    const isPrimary = formData.get('isPrimary') === 'true';
+    const file = formData.get('file');
+
+    if (!hostelId || !file || typeof file === 'string') {
+      return NextResponse.json({ message: 'hostelId and image file are required.' }, { status: 400 });
+    }
+
+    // Convert file to Buffer
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const filename = `${Date.now()}_${file.name}`;
+
+    // Upload to Cloudinary
+    const result: any = await uploadImageToCloudinary(buffer, filename);
+    const imageUrl = result.secure_url;
 
     // If this is a primary image, unset other primary images for this hostel
     if (isPrimary) {
       await db.update(hostelImages)
         .set({ isPrimary: false })
-        .where(eq(hostelImages.hostelId, hostelId));
+        .where(eq(hostelImages.hostelId, Number(hostelId)));
     }
 
     const [newImage] = await db.insert(hostelImages).values({
-      hostelId,
+      hostelId: Number(hostelId),
       imageUrl,
-      imageType: imageType || 'general',
+      imageType: imageType as string,
       isPrimary: isPrimary || false,
       uploadedAt: new Date(),
     }).returning();
diff --git a/app/hostels/[id]/page.tsx b/app/hostels/[id]/page.tsx
@@ -4,6 +4,7 @@ import HostelInteractionWrapper from './HostelInteractionWrapper';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import HostelImageSlider from '@/components/main/HostelImageSlider';
 
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
 
@@ -21,18 +22,13 @@ export default async function HostelDetailsPage({ params }: { params: Promise<{
   const mainImage = hostel.images && hostel.images.length > 0 ? hostel.images[0].imageUrl : null;
 
   return (
-    <div className="max-w-4xl mx-auto p-0 md:p-6">
-      {/* Hero Section */}
-      <Card className="relative rounded-3xl overflow-hidden shadow-lg mb-8">
-        {mainImage ? (
-          <Avatar className="w-full h-64 rounded-3xl">
-            <AvatarImage src={mainImage} alt={hostel.hostelName} className="object-cover w-full h-64" />
-            <AvatarFallback className="w-full h-64 flex items-center justify-center text-4xl text-white font-bold bg-gradient-to-r from-blue-200 to-blue-400">
-              {hostel.hostelName.charAt(0)}
-            </AvatarFallback>
-          </Avatar>
+    <div className="max-w-5xl mx-auto p-0 md:p-6">
+      {/* Hero Section with Image Slider */}
+      <Card className="relative rounded-3xl overflow-hidden shadow-lg mb-8 border-none">
+        {hostel.images && hostel.images.length > 0 ? (
+          <HostelImageSlider images={hostel.images} alt={hostel.hostelName} large />
         ) : (
-          <div className="w-full h-64 bg-gradient-to-r from-blue-200 to-blue-400 flex items-center justify-center text-4xl text-white font-bold">
+          <div className="w-full h-[60vh] md:h-[66vh] bg-gradient-to-r from-blue-200 to-blue-400 flex items-center justify-center text-4xl text-white font-bold rounded-3xl">
             {hostel.hostelName.charAt(0)}
           </div>
         )}
diff --git a/app/manage-hostels/page.tsx b/app/manage-hostels/page.tsx
@@ -4,7 +4,6 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
-import { uploadFileToFirebase } from '@/lib/firebase/config';
 import { auth, firestore } from '@/lib/firebase/config';
 import { doc, getDoc } from 'firebase/firestore';
 import { useUserSession } from '@/hook/use_user_session';
@@ -173,13 +172,25 @@ export default function ManageHostelsPage() {
     setSubmitError(null);
     try {
       const uploadedImageUrls: string[] = [];
-      for (const file of imageFiles) {
-        const url = await uploadFileToFirebase(file, 'hostel-images');
-        uploadedImageUrls.push(url);
-      }
       const hostelCategoryOptions = Object.entries(selectedOptions).map(([categoryName, optionName]) => ({ categoryName, optionName }));
       let hostelId = editingHostelId;
       if (editMode && editingHostelId) {
+        // Edit mode: upload images with existing hostelId
+        for (let i = 0; i < imageFiles.length; i++) {
+          const file = imageFiles[i];
+          const formData = new FormData();
+          formData.append('hostelId', String(editingHostelId));
+          formData.append('file', file);
+          formData.append('imageType', 'general');
+          formData.append('isPrimary', String(existingImages.length + i === primaryImageIndex));
+          const res = await fetch('/api/hostel-images', {
+            method: 'POST',
+            body: formData,
+          });
+          if (!res.ok) throw new Error('Failed to upload image');
+          const data = await res.json();
+          uploadedImageUrls.push(data.imageUrl);
+        }
         let hostelRes: Response;
         hostelRes = await fetch('/api/hostels', {
           method: 'PUT',
@@ -203,18 +214,7 @@ export default function ManageHostelsPage() {
         for (const id of removedImageIds) {
           await fetch(`/api/hostel-images?imageId=${id}`, { method: 'DELETE' });
         }
-        for (let i = 0; i < uploadedImageUrls.length; i++) {
-          await fetch('/api/hostel-images', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              hostelId: editingHostelId,
-              imageUrl: uploadedImageUrls[i],
-              imageType: 'general',
-              isPrimary: false,
-            }),
-          });
-        }
+        // Set primary image
         const allImages = [...existingImages, ...uploadedImageUrls.map((url, i) => ({ imageUrl: url, imageId: null, isPrimary: false, isNew: true, idx: i }))];
         for (let i = 0; i < allImages.length; i++) {
           const img = allImages[i];
@@ -243,6 +243,7 @@ export default function ManageHostelsPage() {
           }
         }
       } else {
+        // Create hostel first, then upload images with real hostelId
         let hostelRes: Response;
         hostelRes = await fetch('/api/hostels', {
           method: 'POST',
@@ -262,17 +263,19 @@ export default function ManageHostelsPage() {
         if (!hostelRes.ok) throw new Error('Failed to create hostel');
         let hostelData: any = await hostelRes.json();
         hostelId = hostelData.hostelId;
-        for (let i = 0; i < uploadedImageUrls.length; i++) {
-          await fetch('/api/hostel-images', {
+        // Now upload images with correct hostelId
+        for (let i = 0; i < imageFiles.length; i++) {
+          const file = imageFiles[i];
+          const formData = new FormData();
+          formData.append('hostelId', String(hostelId));
+          formData.append('file', file);
+          formData.append('imageType', 'general');
+          formData.append('isPrimary', String(existingImages.length + i === primaryImageIndex));
+          const res = await fetch('/api/hostel-images', {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              hostelId,
-              imageUrl: uploadedImageUrls[i],
-              imageType: 'general',
-              isPrimary: i === primaryImageIndex,
-            }),
+            body: formData,
           });
+          if (!res.ok) throw new Error('Failed to upload image');
         }
       }
       handleCloseModal();
diff --git a/components/main/HostelImageSlider.tsx b/components/main/HostelImageSlider.tsx
@@ -0,0 +1,84 @@
+"use client";
+import React, { useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+interface HostelImageSliderProps {
+  images: { imageUrl: string; imageType?: string }[];
+  alt?: string;
+  large?: boolean; // If true, use large (details page) style
+}
+
+// Helper to get high quality Cloudinary URL
+function getHighQualityUrl(url: string) {
+  if (url.includes('res.cloudinary.com')) {
+    // Insert transformation after '/upload/'
+    return url.replace('/upload/', '/upload/q_auto:best/');
+  }
+  return url;
+}
+
+const HostelImageSlider: React.FC<HostelImageSliderProps> = ({ images, alt = '', large = false }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalImg, setModalImg] = useState<string | null>(null);
+
+  if (!images || images.length === 0) return null;
+
+  const handleImgClick = (imgUrl: string) => {
+    setModalImg(imgUrl);
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setModalImg(null);
+  };
+
+  return (
+    <>
+      <div className={large ? 'w-full h-[22rem] md:h-[24rem] rounded-3xl overflow-hidden' : 'w-full h-48 rounded-lg overflow-hidden'}>
+        <Swiper
+          modules={[Navigation, Pagination]}
+          navigation={images.length > 1}
+          pagination={{ clickable: true }}
+          spaceBetween={0}
+          slidesPerView={1}
+          className="h-full"
+        >
+          {images.map((img, idx) => (
+            <SwiperSlide key={idx}>
+              <img
+                src={getHighQualityUrl(img.imageUrl)}
+                alt={alt || `Hostel image ${idx + 1}`}
+                className="object-cover w-full h-full cursor-pointer"
+                draggable={false}
+                onClick={() => handleImgClick(getHighQualityUrl(img.imageUrl))}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+      {/* Modal for full-size image */}
+      {modalOpen && modalImg && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80"
+          style={{ width: '100vw', height: '100vh' }}
+          onClick={closeModal}
+        >
+          <img
+            src={modalImg}
+            alt="Full size hostel image"
+            className="block w-auto h-auto max-w-[100vw] max-h-[100vh] rounded-lg shadow-2xl border-4 border-white"
+            style={{ objectFit: 'contain' }}
+            onClick={e => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HostelImageSlider; 
diff --git a/components/main/hostelCard.tsx b/components/main/hostelCard.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { CalendarDays, MapPin, Star, Phone, Mail, Globe, DollarSign, ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
 import Link from "next/link";
 import { Hostel } from "@/types/project";
+import HostelImageSlider from './HostelImageSlider';
 
 interface HostelCardProps {
   hostel: Hostel;
@@ -28,9 +29,17 @@ export default function HostelCard({ hostel }: HostelCardProps) {
 
   return (
     <div 
-      className={`bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform ${expanded ? "scale-105" : "hover:-translate-y-1"}`}
+      className={`bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform ${expanded ? "scale-105" : "hover:-translate-y-1"} w-full`}
       onClick={toggleExpand}
     >
+      {/* Image Slider at the top */}
+      {hostel.images && hostel.images.length > 0 ? (
+        <HostelImageSlider images={hostel.images} alt={hostel.hostelName} />
+      ) : (
+        <div className="w-full h-48 bg-gradient-to-r from-blue-200 to-blue-400 flex items-center justify-center text-3xl text-white font-bold">
+          {hostel.hostelName.charAt(0)}
+        </div>
+      )}
       <div className="md:flex">
         <div className="bg-gradient-to-r from-blue-600 to-blue-800 p-6 md:w-1/3 relative">
           {primaryImage && (
diff --git a/components/main/hostelGrid.tsx b/components/main/hostelGrid.tsx
@@ -6,7 +6,7 @@ import { Hostel } from "@/types/project";
 import ProjectCardSkeleton from './hostelCardSkeleton'; // We'll rename this file later
 
 interface HostelGridProps {
-  activeTab: string;
+  activeTab: string;  
   filters: Record<string, string[]>; // Accept selected filters
   refreshTrigger?: boolean; // New prop to trigger re-fetch
 }
@@ -138,7 +138,7 @@ const HostelGrid = ({ activeTab, filters, refreshTrigger }: HostelGridProps) =>
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="space-y-6 animate-fadeIn">
+      <div className="grid grid-cols-1 gap-8 animate-fadeIn">
         {hostels.length > 0 ? (
           hostels.map((hostel, index) => (
             <div
@@ -150,7 +150,7 @@ const HostelGrid = ({ activeTab, filters, refreshTrigger }: HostelGridProps) =>
             </div>
           ))
         ) : (
-          <p className="text-gray-500 text-center">No hostels available.</p>
+          <p className="text-gray-500 text-center col-span-full">No hostels available.</p>
         )}
       </div>
     </div>
diff --git a/lib/firebase/config.ts b/lib/firebase/config.ts
@@ -21,10 +21,4 @@ export const firebaseApp: FirebaseApp =
 
 export const auth = getAuth(firebaseApp);
 export const firestore = getFirestore(firebaseApp);
-export const storage = getStorage(firebaseApp);
-
-export async function uploadFileToFirebase(file: File, folder: string): Promise<string> {
-  const storageRef = ref(storage, `${folder}/${file.name}`);
-  const snapshot = await uploadBytes(storageRef, file);
-  return await getDownloadURL(snapshot.ref);
-}
+export const storage = getStorage(firebaseApp);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/util/uploadImage.ts b/util/uploadImage.ts
