Property add and cloudinary upload

_theme_files/add-property.html

@@ -601,6 +601,7 @@
                 class="border rounded w-full py-2 px-3"
                 accept="image/*"
                 multiple
+                required
               />
             </div>
 

app/actions/addProperty.js

@@ -4,6 +4,7 @@ import Property from '@/models/Property';
 import { getSessionUser } from '@/utils/getSessionUser';
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
+import cloudinary from '@/config/cloudinary';
 
 async function addProperty(formData) {
   await connectDB();
@@ -18,10 +19,7 @@ async function addProperty(formData) {
 
   // Access all values for amenities and images
   const amenities = formData.getAll('amenities');
-  const images = formData
-    .getAll('images')
-    .filter((image) => image.name !== '') // Filter out empty names
-    .map((image) => image.name); // Extract only the names
+  const images = formData.getAll('images').filter((image) => image.name !== '');
 
   // Create the propertyData object with embedded seller_info
   const propertyData = {
@@ -48,10 +46,32 @@ async function addProperty(formData) {
       email: formData.get('seller_info.email'),
       phone: formData.get('seller_info.phone'),
     },
-    images,
     owner: userId,
   };
 
+  const imageUrls = [];
+
+  for (const imageFile of images) {
+    const imageBuffer = await imageFile.arrayBuffer();
+    const imageArray = Array.from(new Uint8Array(imageBuffer));
+    const imageData = Buffer.from(imageArray);
+
+    // Convert the image data to base64
+    const imageBase64 = imageData.toString('base64');
+
+    // Make request to upload to Cloudinary
+    const result = await cloudinary.uploader.upload(
+      `data:image/png;base64,${imageBase64}`,
+      {
+        folder: 'propertypulse',
+      }
+    );
+
+    imageUrls.push(result.secure_url);
+  }
+
+  propertyData.images = imageUrls;
+
   const newProperty = new Property(propertyData);
   await newProperty.save();
 

components/PropertyAddForm.jsx

@@ -389,6 +389,7 @@ const PropertyAddForm = () => {
           className='border rounded w-full py-2 px-3'
           accept='image/*'
           multiple
+          required
         />
       </div>
 

components/PropertyCard.jsx

@@ -23,7 +23,7 @@ const PropertyCard = ({ property }) => {
   return (
     <div className='rounded-xl shadow-md relative'>
       <Image
-        src={`/images/properties/${property.images[0]}`}
+        src={property.images[0]}
         alt=''
         height={0}
         width={0}

components/PropertyHeaderImage.jsx

@@ -6,7 +6,7 @@ const PropertyHeaderImage = ({ image }) => {
       <div className='container-xl m-auto'>
         <div className='grid grid-cols-1'>
           <Image
-            src={`/images/properties/${image}`}
+            src={image}
             alt=''
             className='object-cover h-[400px] w-full'
             width={0}

config/cloudinary.js

@@ -0,0 +1,9 @@
+import { v2 as cloudinary } from 'cloudinary';
+
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+});
+
+export default cloudinary;

package-lock.json

@@ -8,6 +8,7 @@
       "name": "property-pulse-2.0",
       "version": "0.1.0",
       "dependencies": {
+        "cloudinary": "^2.2.0",
         "mongodb": "^6.8.0",
         "mongoose": "^8.5.0",
         "next": "14.2.4",
@@ -588,6 +589,19 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cloudinary": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.2.0.tgz",
+      "integrity": "sha512-akbLTZcNegGSkl07Frnt9fyiK9KZ2zPS+a+j7uLrjNYxVhDpDdIBz9G6snPCYqgk+WLVMRPfXTObalLr5L6g0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "q": "^1.5.1"
+      },
+      "engines": {
+        "node": ">=9"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1013,6 +1027,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1733,6 +1753,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+      "deprecated": "You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.\n\n(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.0",
+        "teleport": ">=0.2.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "cloudinary": "^2.2.0",
     "mongodb": "^6.8.0",
     "mongoose": "^8.5.0",
     "next": "14.2.4",