'fixed-img-upload'

client/src/componets/AddBlogs.js

@@ -10,32 +10,45 @@ const labelStyles = { mb: 1, mt: 2, fontSize: "24px", fontWeight: "bold" };
 const AddBlogs = () => {
   const classes = useStyles();
   const navigate = useNavigate();
-  const [inputs, setInputs] = useState({
-    title: "",
-    description: "",
-    imageURL: "",
-  });
-  const handleChange = (e) => {
-    setInputs((prevState) => ({
-      ...prevState,
-      [e.target.name]: e.target.value,
-    }));
-  };
+
+  // added useState variables removed input and handlechange method
+  const [title,setTitle] = useState("");
+  const [desc,setDesc] = useState("");
+  const [image,setImage] = useState("");
+  // const [inputs, setInputs] = useState({
+  //   title: "",
+  //   description: "",
+  //   imageURL: "",
+  // });
+  // const handleChange = (e) => {
+  //   setInputs((prevState) => ({
+  //     ...prevState,
+  //     [e.target.name]: e.target.value,
+  //   }));
+  // };
   const sendRequest = async () => {
+    const formdata = new FormData();
+    // console.log(title,desc,image)
+    formdata.append('title',title);
+    formdata.append('desc',desc);
+    formdata.append('image',image);
+    formdata.append('user',localStorage.getItem('userId'));
+    // removed object data {
+        // title: inputs.title,
+        // desc: inputs.description,
+        // img: inputs.imageURL,
+        // user: localStorage.getItem("userId"),
+      // } 
+      // from axios added formdata 
     const res = await axios
-      .post(`${config.BASE_URL}/api/blogs/add`, {
-        title: inputs.title,
-        desc: inputs.description,
-        img: inputs.imageURL,
-        user: localStorage.getItem("userId"),
-      })
+      .post(`${config.BASE_URL}/api/blogs/add`,formdata )
       .catch((err) => console.log(err));
     const data = await res.data;
     return data;
   };
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log(inputs);
+    // console.log(inputs);
     sendRequest()
       .then((data) => console.log(data))
       .then(() => navigate("/blogs"));
@@ -68,8 +81,9 @@ const AddBlogs = () => {
           <TextField
             className={classes.font}
             name="title"
-            onChange={handleChange}
-            value={inputs.title}
+            type="text"
+            onChange={(e)=>setTitle(e.target.value)}
+            // value={inputs.title}
             margin="auto"
             variant="outlined"
           />
@@ -78,21 +92,23 @@ const AddBlogs = () => {
           </InputLabel>
           <TextareaAutosize
             className={classes.font}
-            name="description"
-            onChange={handleChange}
+            name="desc"
+            type="text"
+            onChange={(e)=>setDesc(e.target.value)}
             minRows={10}
             margin="auto"
             variant="outlined"
-            value={inputs.description}
+            // value={inputs.description}
           />
           <InputLabel className={classes.font} sx={labelStyles}>
             ImageURL
           </InputLabel>
           <TextField
             className={classes.font}
-            name="imageURL"
-            onChange={handleChange}
-            value={inputs.imageURL}
+            name="image"
+            type="file"
+            onChange={(e)=>setImage(e.target.files[0])}
+            // value={inputs.imageURL}
             margin="auto"
             variant="outlined"
           />

client/src/componets/Blog.js

@@ -70,7 +70,7 @@ const Blogs = ({ title, desc, img, user, isUser, id }) => {
           }
           title={title}
         />
-        <CardMedia component="img" height="194" image={img} alt="Paella dish" />
+        <CardMedia component="img" height="400" image={img} alt="Paella dish" />
 
         <CardContent>
           <hr />

client/src/componets/Blogs.js

@@ -25,7 +25,7 @@ const Blogs = () => {
             isUser={localStorage.getItem("userId") === blog.user._id}
             title={blog.title}
             desc={blog.desc}
-            img={blog.img}
+            img={`${config.BASE_URL}/${blog?.imgUrl}`}
             user={blog.user.name}
             date={new Date(blog.date).toLocaleDateString()}
           />

server/controller/blog-controller.js

@@ -2,7 +2,7 @@ const mongoose = require("mongoose");
 const { findByIdAndRemove } = require("../model/Blog");
 const Blog = require("../model/Blog");
 const User = require("../model/User");
-
+// const path = require('path')
 const getAllBlogs = async(req,res,next) =>{
     let blogs;
     try{
@@ -53,7 +53,11 @@ const getAllBlogs = async(req,res,next) =>{
 
 const addBlog = async(req,res,next) =>{
 
-    const { title , desc , img , user } = req.body;
+    // const { title , desc , img , user } = req.body;
+    const title = req.body.title;
+    const desc = req.body.desc;
+    const imgUrl = req.file.path;
+    const user = req.body.user;
 
     const currentDate = new Date();
 
@@ -69,7 +73,7 @@ const addBlog = async(req,res,next) =>{
 
 
     const blog = new Blog({
-        title ,desc , img , user, date: currentDate
+        title ,desc , imgUrl , user, date: currentDate
     });
 
     try {

server/model/Blog.js

@@ -11,7 +11,8 @@ const blogSchema = new Schema({
         type: String,
         required: true,
     },
-    img :  {
+    //img-->imgUrl
+    imgUrl :  {
         type: String,
         required: true,
     },

server/package.json

@@ -1,73 +1,78 @@
-{
-
-
-  "name": "blogapp",
-
-
-  "version": "1.0.0",
-
-
-  "description": "",
-
-
-  "main": "server.js",
-
-
-  "scripts": {
-
-
-
-
-  "start": "nodemon server.js",
-
-
-
-
-  "test": "echo \"Error: no test specified\" && exit 1"
-
-
-  },
-
-
-  "author": "khushi patel",
-
-
-  "license": "ISC",
-
-
-  "devDependencies": {
-
-
-
-
-  "nodemon": "^2.0.16"
-
-
-  },
-
-
-  "dependencies": {
-
-
-
-
-  "bcryptjs": "^2.4.3",
-
-
-
-
-  "cors": "^2.8.5",
-
-
-
-
-  "express": "^4.18.1",
-
-
-
-
-  "mongoose": "^6.3.4"
-
-
-  }
-}
+{
+
+
+  "name": "blogapp",
+
+
+  "version": "1.0.0",
+
+
+  "description": "",
+
+
+  "main": "server.js",
+
+
+  "scripts": {
+
+
+
+
+  "start": "nodemon server.js",
+
+
+
+
+  "test": "echo \"Error: no test specified\" && exit 1"
+
+
+  },
+
+
+  "author": "khushi patel",
+
+
+  "license": "ISC",
+
+
+  "devDependencies": {
+
+
+
+
+  "nodemon": "^2.0.16"
+
+
+  },
+
+
+  "dependencies": {
+
+
+
+
+  "bcryptjs": "^2.4.3",
+
+
+
+
+  "cors": "^2.8.5",
+
+
+
+
+  "express": "^4.18.1",
+
+
+
+
+  "mongoose": "^6.3.4",
+
+
+
+
+  "multer": "^1.4.5-lts.2"
+
+
+  }
+}

server/routes/blog-routes.js

@@ -3,9 +3,25 @@ const blogRouter = express.Router();
 const { getAllBlogs , addBlog ,
      updateBlog ,getById , 
     deleteBlog , getByUserId} = require("../controller/blog-controller");
+const multer = require('multer')
+
+// defined disk storage for multer 
+
+const storage = multer.diskStorage({
+    destination: function (req, file, cb) {
+      cb(null, "uploads");
+    },
+    filename: function (req, file, cb) {
+      cb(null, file.originalname);
+    },
+  });
+
+// used multer for storing images 
+
+let upload = multer({storage:storage})
 
 blogRouter.get("/",getAllBlogs);
-blogRouter.post('/add', addBlog);
+blogRouter.post('/add',upload.single("image"), addBlog);
 blogRouter.put("/update/:id",  updateBlog);
 blogRouter.get("/:id", getById);
 blogRouter.delete("/:id",deleteBlog);

server/server.js

@@ -5,9 +5,14 @@ require("./config/db");
 const cors = require("cors");
 
 const app = express();
+const path = require('path')
+
 
 app.use(cors());
 
+// defined  path for serving the upload folder
+app.use('/uploads',express.static(path.join(__dirname,'uploads')));
+
 app.set("view engine", "ejs");
 app.use(express.json());