Trying to display image or any type of data dynamically in my ejs template to get from mongodb collections

Question

I'm learner & trying express & mongodb with ejs in first time. How to show an uploaded image front end by ejs i don't understand. Kindly review following code, mention where is my mistake & based on mistake provide instruction.

Router handle code:

addmembersroute.js

const router = require('express').Router();
const multer = require('multer');

const storage = multer.diskStorage({
      destination: (req, file, callback) => {
        callback(null, './views/uploads/')
      },
      filename: (req, file, callback) => {
        callback(null, file.fieldname + '_' + Date.now() + path.extname(file.originalname))
      }
    })
const upload = multer({ storage: storage });

const { createMembers } = require('../../middlewares/members/addnewmembercontroller');
router.get('/', createMembers[0]);
router.post('/', upload.single('member_img'), createMembers[1]);

createMembers controller handle post request from outside of the route.

createMembers controller code:

addnewmembercontroller.js

const fs = require('fs');
const path = require('path');

const MembersModel = require('../../models/Members');
        
exports.createMembers = [(req,res,next) => {
  res.render('../views/pages/members/addmembers');
     next()
 },
   (req,res) => { 
       let {
           member_name, member_mob, member_email ...
       } = req.body;

       let img = fs.readFileSync(req.file.path);
       let encode_image = img.toString('base64');

       if (req.body && req.file) {    
         const Members = new MembersModel({
            name: member_name, 
            images: {
                  data: Buffer.from(encode_image, 'base64'),
                  contentType: req.file.mimetype
                 },
            .
            .
         })

          Members.save()
                 .then( () => {
                        res.render('../views/pages/members/addmembers')
                     })
                 .catch(error => {
                       res.json({
                           message: `error occured: ${error}`
                     })
                   })
                 }
}]

Hanlde get request from different controller.

memberscontroller.js

const MembersModel = require('../../models/Members');
exports.getAllMembers = (req,res) => {
  MembersModel.find()
              .then(members => {
                console.log(members);
                res.render('../views/pages/members/allmembers', {members})
              })
              .catch(error => {
                res.render('../views/pages/members/allmembers', {Error: `Error Occured: ${error}`})
              })
}

exports.updateMembersProfile = (req,res) => {
  res.send("I'm update member Profile page")
}

exports.deleteMembersProfile = (req,res) => {
  res.send("I'm delete member Profile page")
}

DB collections model:

const { Schema, model } = require('mongoose');

const MemberSchema = Schema({
  name: String,
  contact_no: String,
  email: String,
  ...
  images: {
    data: Buffer,
    contentType: String
  }
})

const MembersModel = model('Member', MemberSchema);

module.exports = MembersModel;

ejs template for data taking form:

<form action="/add-new" method="post" enctype="multipart/form-data" name="member-data-form" class="px-lg-3 px-md-3 py-3">
  <div class="row">
     <div class="col mb-2 mb-lg-1 mb-md-1">
       <label for="member_name" class="form-label">Full name</label>
       <input type="text" name="member_name" id="member_name" class="form-control" 
       placeholder="exm:John Doe" aria-label="member_name">
     </div>
     <div class="col">
        <div>
           <label for="member_img" class="form-label">(Attach your sharp photo)</label>
        </div>
           <input type="file" name="member_img" id="member_img">
      </div>
   </div>
....
</form>

I am able to save user's data in collection & save the file into the upload directory. But when i want to show data on the front end, I can't.

here image render structure:

<img src="member_img/<%= memberdata.images.data %> " style="width: 80px; height: auto;" class="img-fluid float-end me-2" alt="member-img">

may be I'm doing wrong to structure the image of the template.

Answer 1

memberdata.images.data is an array, which you can convert to a base64 data: URL:

<img src="data:<%=
  memberdata.images.contentType
%>,base64;<%=
  Buffer.from(memberdata.images.data).toString("base64")
%>" ...>