add save images into mongo

Author: VovaStelmashchuk

server/api/admin/image/all.get.js

@@ -1,5 +1,5 @@
 import { defineEventHandler, createError } from 'h3'
-import { db } from '~/server/utils/mongo'
+import { db, getBlogImageBucket } from '~/server/utils/mongo'
 
 export default defineEventHandler(async (event) => {
     const isAuth = event.context?.auth?.username || false
@@ -9,10 +9,11 @@ export default defineEventHandler(async (event) => {
             statusMessage: 'Unauthorized'
         })
     }
-    const images = await db.collection('images').find().toArray()
+    const bucket = await getBlogImageBucket()
+    const allImages = await bucket.find().toArray()
     return {
-        images: images.map((image) => ({
-            url: `api/image/${image.key}`
+        images: allImages.map((image) => ({
+            url: `api/image/${image.filename}`
         }))
     }
 })

server/api/admin/image/upload.post.js

@@ -1,6 +1,7 @@
 import { defineEventHandler, readMultipartFormData, createError } from 'h3'
 import { generateSessionId } from '~/server/utils/string'
-import { db } from '~/server/utils/mongo'
+import { getBlogImageBucket } from '~/server/utils/mongo'
+import { Readable } from 'stream'
 
 export default defineEventHandler(async (event) => {
     const isAuth = event.context?.auth?.username || false
@@ -33,23 +34,30 @@ export default defineEventHandler(async (event) => {
 
     const buffer = Buffer.from(file.data)
 
-    try {
-        await db.collection('images').insertOne({
-            key: fileKey,
-            originalFilename: file.filename,
+    const bucket = await getBlogImageBucket()
+
+    await new Promise((resolve, reject) => {
+        const readableStream = Readable.from(buffer)
+        const uploadStream = bucket.openUploadStream(fileKey, {
             contentType: file.type,
-            data: buffer,
-            createdAt: new Date()
+            metadata: {
+                originalFilename: file.filename,
+                createdAt: new Date()
+            }
         })
 
-        return {
-            fileKey: fileKey
-        }
-    } catch (error) {
-        console.error('MongoDB insert error:', error)
-        throw createError({
-            statusCode: 500,
-            statusMessage: 'Error saving file to MongoDB'
-        })
+        readableStream
+            .pipe(uploadStream)
+            .on('error', (error) => {
+                console.error('Error uploading to GridFS:', error)
+                reject(error)
+            })
+            .on('finish', () => {
+                resolve()
+            })
+    })
+
+    return {
+        fileKey: fileKey
     }
 })

server/api/image/[key].get.js

@@ -0,0 +1,14 @@
+import { getBlogImageBucket } from '~/server/utils/mongo'
+
+export default defineEventHandler(async (event) => {
+    const slug = event.context.params.slug
+
+    const bucket = await getBlogImageBucket()
+    const readStream = bucket.openDownloadStreamByName(slug)
+
+    setResponseHeaders(event, {
+        'Content-Type': 'image/jpeg',
+        'Cache-Control': 'public, max-age=86400' // Cache for 1 day
+    })
+    return readStream
+})

server/api/image/[slug].get.js

@@ -1,4 +1,4 @@
-import { MongoClient } from 'mongodb'
+import { MongoClient, GridFSBucket } from 'mongodb'
 import { getConfig } from '~/server/utils/config'
 
 const mongoUrl = getConfig().mongoUri
@@ -37,3 +37,18 @@ export async function connectDB() {
     }
     return db2
 }
+
+let blogImageBucket
+
+/**
+ * @returns {Promise<GridFSBucket>}
+ */
+export async function getBlogImageBucket() {
+    await connectDB()
+    if (!blogImageBucket) {
+        blogImageBucket = new GridFSBucket(db, {
+            bucketName: 'blogImages'
+        })
+    }
+    return blogImageBucket
+}