add image upload feature

backend/app.js

@@ -1,16 +1,37 @@
 const express = require("express");
 const mongoose = require("mongoose");
-const dotenv = require("dotenv");
+const dotenv = require("dotenv"); 
 const cors = require("cors");
 const app = express(); 
-const User = require("./model/User");
 const UserRoutes = require("./routes/UserRoutes");
 const BlogRoutes = require("./routes/BlogRoutes")
-
+const multer = require("multer");
+const path = require("path");
+const User = require('./model/User')
+const Blog = require('./model/Blogs')
+const BlogsController = require('./contollers/BlogsController')
 dotenv.config();
 app.use(cors());
 app.use(express.json())
+app.use(express.static('public'));
 app.use("/api/user", UserRoutes);
+
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, "public/images");
+  },
+  filename: (req, file, cb) => {
+    const uniqueSuffix =
+      Date.now() +
+      "-" +
+      Math.round(Math.random() * 1e9) +
+      path.extname(file.originalname);
+    cb(null, file.fieldname + uniqueSuffix);
+  },
+});
+const upload = multer({ storage: storage });
+
+app.post("/api/blog/create",upload.single('file'), BlogsController.createBlog);
 app.use("/api/blog", BlogRoutes);
 
 mongoose

backend/contollers/BlogsController.js

@@ -38,6 +38,8 @@ const getBlogById = async(req, res) => {
 }
 
 const createBlog = async (req, res) => {
+
+  const image = req.file.filename;
   const { title, content, creator, author, date } = req.body;
 
   try {
@@ -46,7 +48,7 @@ const createBlog = async (req, res) => {
       return res.status(404).json({ message: "User not found" });
     }
 
-    const newBlog = new Blog({ title, content, creator , author, date});
+    const newBlog = new Blog({ title, content, creator , author, date, image});
     await newBlog.save();
 
     user.blogs.push(newBlog);

backend/model/Blogs.js

@@ -8,7 +8,7 @@ const isoDate = currentDate.toISOString().split('T')[0];
 const BlogSchema = new mongoose.Schema({
     title : {type : String, required : true},
     content : {type : String, required : true},
-    image : {type : String},
+    image : {type : String, required : true},
     creator : {type : mongoose.Types.ObjectId, required : true, ref : 'User'},
     author : {type : String},
     date : {type : String}

backend/package.json

@@ -14,6 +14,7 @@
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "mongoose": "^8.3.1",
+    "multer": "^1.4.5-lts.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

backend/routes/BlogRoutes.js

@@ -1,14 +1,18 @@
-
 const express = require("express");
 const BlogsController = require("../contollers/BlogsController");
 const router = express.Router();
 
 
+
+
+// app.
 router.get("/blogs", BlogsController.getAllBlogs);
-router.get("/myblogs/:uid", BlogsController.getBlogsByUserId)
-router.post("/create",BlogsController.createBlog);
+router.get("/myblogs/:uid", BlogsController.getBlogsByUserId);
+// router.post("/create", BlogsController.createBlog);
+
+// router.post("/create", upload.single("file"), BlogsController.createBlog);
 router.get("/:bid", BlogsController.getBlogById);
 router.patch("/:bid", BlogsController.updateBlog);
-router.delete("/:bid", BlogsController.deleteBlog)
+router.delete("/:bid", BlogsController.deleteBlog);
 
-module.exports = router;
+module.exports = router;

frontend/src/App.js

@@ -18,21 +18,24 @@ import EditBlog from "./components/pages/EditBlog";
 function App() {
   const [isLoggedIn , setIsLoggedIn] = useState(false);
   const [userId, setUserId ] = useState(null);
-  const login = (userId) => {
+  const [name, setName] = useState("");
+  const login = (userId, name) => {
     setIsLoggedIn(true);
     setUserId(userId);
+    setName(name);
   }
 
   const logout = () => {
     setIsLoggedIn(false);
     setUserId(null);
+    setName("")
   }
 
   return (
     <React.Fragment>
       <BrowserRouter>
+        <AuthContext.Provider value={{isLoggedIn : isLoggedIn,login : login, logout : logout , userId : userId, name : name}}>
         <Navbar />
-        <AuthContext.Provider value={{isLoggedIn : isLoggedIn,login : login, logout : logout , userId : userId}}>
         <Routes>
           <Route path='/' exact Component={Home}/>
           <Route path="/blog" exact Component={Auth}/>

frontend/src/Contexts/AuthContext.js

@@ -5,7 +5,7 @@ import {createContext} from "react";
 const AuthContext = createContext({
     userId : null,
     isLoggedIn : false,
-
+    name  : "",
     login : () => {},
     logout : () => {}
 })