Using Multer upload a File

Author: Krishna Kant

controllers/postsController.js

@@ -32,6 +32,7 @@ module.exports.create = async (req, res)=> {
 module.exports.destroy = async (req, res)=> {
     try {
         let post = await Post.findById(req.params.id);
+        // console.log(post.user);
 
         if(post.user == req.user.id) {
             post.deleteOne();

controllers/usersController.js

@@ -1,4 +1,6 @@
 const User = require('../models/user');
+const fs = require('fs');
+const path = require('path');
 
 module.exports.profile = async (req, res)=> {
     try {
@@ -15,9 +17,38 @@ module.exports.profile = async (req, res)=> {
 
 module.exports.update = async (req, res)=> {
     if(req.user.id == req.params.id) {
-        let user = await User.findById(req.params.id, req.body);
-        req.flash('success', 'Profile Updated!')
-        return res.redirect('back');
+        try {
+            let user = await User.findById(req.params.id);
+
+            User.uploadedAvatar(req, res, function(err) {
+                if(err) {
+                    console.log('Multer Error: ', err); return;
+                }
+
+                user.name = req.body.name;
+                user.email = req.body.email;
+
+                if(req.file) {
+
+                    if(user.avatar) {
+                        const curAvatarPath = path.join(__dirname, '..', user.avatar);
+                        if(fs.existsSync(curAvatarPath)) {
+                            fs.unlinkSync(curAvatarPath);
+                        }
+                    }
+
+                    // this is saving the path of the uploaded file into the avatar field in the user
+                    user.avatar = User.avatarPath + '/' + req.file.filename;
+                }
+
+                user.save();
+                req.flash('success', 'Profile Updated!👍')
+                return res.redirect('back');
+            });
+        } catch (err) {
+            req.flash('error', err);
+            return res.redirect('back');
+        }
     } else {
         req.flash('error', 'Unauthorized!');
         return res.status(401).send("Unathorized");
@@ -50,7 +81,7 @@ module.exports.signUp = (req, res)=> {
 module.exports.create = async (req, res)=> {
     try {
         if (req.body.password != req.body.confirm_password) {
-          req.flash('error', `Passwords doesn't not match`);
+          req.flash('error', `Passwords doesn't not match😭`);
           return res.redirect('back');
         }
 
@@ -71,7 +102,7 @@ module.exports.create = async (req, res)=> {
 
 // For Creating Session and Cookies Store In Browser
 module.exports.createSession = async (req, res)=> {
-    req.flash('success', 'Logged in Successfully!');
+    req.flash('success', 'Logged in Successfully!👍');
     return res.redirect('/');
 }
 
@@ -83,7 +114,7 @@ module.exports.destroySession = (req, res) => {
             console.log('Error in killing Session!')
             return;
         }
-        req.flash('success', 'You have logged out!');
+        req.flash('success', 'You have logged out!😝');
         return res.redirect('/');
     });
 }

index.js

@@ -31,6 +31,7 @@ app.use(expressLayout);
 app.use(cookieParser());
 
 app.use(express.static("./assets"));
+app.use('/uploads', express.static(__dirname + '/uploads'));
 
 app.set("view engine", "ejs");
 app.set("views", "views");

models/user.js

@@ -1,5 +1,9 @@
 const mongoose = require('mongoose');
 
+const multer = require('multer');
+const path = require('path');
+const AVATAR_PATH = path.join('/uploads/users/avatars');
+
 const userSchema = new mongoose.Schema({
     email: {
         type: String,
@@ -13,11 +17,29 @@ const userSchema = new mongoose.Schema({
     name : {
         type: String,
         require: true
+    },
+    avatar: {
+        type: String
     }
 }, {
     timestamps: true
 });
 
+
+let storage = multer.diskStorage({
+    destination: function(req, file, cb) {
+        cb(null, path.join(__dirname, '..', AVATAR_PATH));
+    },
+    filename: function(req, file, cb) {
+        cb(null, file.fieldname + '-' + Date.now()+ path.extname(file.originalname));
+    }
+});
+
+
+// Static
+userSchema.statics.uploadedAvatar = multer({storage : storage}).single('avatar');
+userSchema.statics.avatarPath = AVATAR_PATH;
+
 const User = mongoose.model('User', userSchema);
 
 module.exports = User;

package-lock.json

@@ -19,6 +19,7 @@
     "express-ejs-layouts": "^2.5.1",
     "express-session": "^1.17.3",
     "mongoose": "^7.3.1",
+    "multer": "^1.4.5-lts.1",
     "node-sass-middleware": "^1.0.1",
     "nodemon": "^2.0.22",
     "passport": "^0.6.0",

package.json

@@ -1,8 +1,9 @@
 <link rel="stylesheet" href="/css/user_profile.css" />
+<img src="<%= user.avatar %>" alt="<%= user.name %>" width="100">
 
 <% if(user.id == profile_user.id) { %>
 <!-- if user matches then show the form -->
-<form action="/users/update/<%= profile_user.id %>" method="POST">
+<form action="/users/update/<%= profile_user.id %>" method="POST" enctype="multipart/form-data">
   <input
     type="text"
     name="name"
@@ -17,6 +18,7 @@
     value="<%= profile_user.email %>"
     required
   />
+  <input type="file" name="avatar" placeholder="Profile Picture">
   <input type="submit" value="Update" />
 </form>
 <%}else { %>