integrated cloudinary widget

app/api/memories/createMemories/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req:NextRequest){
+    try{
+        const {title,description,memoryCoverPic,memoryParticipants}=await req.json()
+        if(!title || memoryParticipants.length===0) return NextResponse.json({success:false,message:'One or more fields are missing!'},{status:422})
+
+    }
+    catch(err){
+        console.log(err)
+        return NextResponse.json({success:false,message:"Could not create memory, try again!"},{status:500})
+    }
+}

app/api/sample/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req:NextRequest){
+
+    try{
+        const {imagePath}=await req.json()
+        console.log(await req.json())
+
+    return NextResponse.json({success:true},{status:200})
+    }
+    catch(err){
+        console.log(err)
+    }
+}

app/models/fileSchema.ts

@@ -0,0 +1,26 @@
+import mongoose from "mongoose";
+const {ObjectId}=mongoose.Schema.Types
+const fileSchema=new mongoose.Schema({
+    fileName:{
+        type:String,
+        required:true
+    },
+    fileUrl:{
+        type:String,
+        required:true
+    },
+    createdBy:{
+        type:ObjectId,
+        ref:'USER'
+    },
+    memoryName:{
+        type:ObjectId,
+        ref:'MEMORY'
+    }
+},{
+    timestamps:true
+})
+
+const FILE=mongoose.models.FILE || mongoose.model('FILE',fileSchema)
+
+export default FILE;

app/ui/Navbar.tsx

@@ -1,16 +1,20 @@
 'use client'
-import { Fragment } from 'react'
+import { Fragment, useEffect, useRef, useState } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 import Image from 'next/image'
 import { useRouter } from "next/navigation";
 import toast from 'react-hot-toast'
+import { CldUploadWidget } from 'next-cloudinary'
 function classNames(...classes:string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
+
 export default function Navbar() {
     const router=useRouter()
+    const [imageUrl,setImageUrl]=useState([])
+
   async function logout(){
     const response=await fetch('/api/auth/logout',{
       method:'POST',
@@ -24,6 +28,9 @@ export default function Navbar() {
       router.push('/login')
     }
   }
+  useEffect(()=>{
+    console.log(imageUrl)
+  },[imageUrl])
   return (
     <Disclosure as="nav" className="bg-gray-800">
       {({ open }) => (
@@ -64,12 +71,29 @@ export default function Navbar() {
                   <span className="sr-only">View notifications</span>
 
                 </button>
-                <button className='flex mr-6 border-2 border-blue-500 bg-blue-500 p-2 rounded-lg'>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
-  <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+
+
+<CldUploadWidget uploadPreset="memories" onSuccess={(results) => {
+    setImageUrl((prevImages)=>[...prevImages,{fileName:results?.info?.original_filename, fileUrl:results?.info?.secure_url}])
+  }}>
+  {({ open, isLoading }) => {
+    return (
+      <>
+     {!isLoading? <button className='flex mr-6 border-2 border-blue-500 bg-blue-500 p-2 rounded-lg' onClick={()=>open()}>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
 </svg>
 <span className='font-bold ml-2'>Create a Memory</span>
 </button>
+:
+<button className='flex mr-6 border-2 border-blue-500 bg-blue-500 p-2 rounded-lg'>
+
+<span className='font-bold ml-2'>Loading....</span>
+</button>
+}
+</> );
+  }}
+</CldUploadWidget>
                 {/* Profile dropdown */}
                 <Menu as="div" className="relative ml-3">
                   <div>

package.json

@@ -16,6 +16,7 @@
     "lucide-react": "^0.378.0",
     "mongoose": "^8.4.0",
     "next": "14.2.3",
+    "next-cloudinary": "^6.5.2",
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1"