0

I'm trying to store images in the project then use hbs to get the name of the image and use it in the img src file path but the name of the file is not getting stored in MongoDB.

This is my model:

const mongoose = require('mongoose');
const playerObj =
{
    ign: {
        type: String,
        require: true
    },
    role: {
        type: String,
        require: true
    },
    team: {
        type: String,
        require: true
    },
    playerIcon: {
        type: String,
        require: true
    },
    playerName: {
        type: String,
        require: true
    },
    playerNumber: {
        type: String,
        require: true
    },
    verificationStatus: {
        type: String,
        require: true,
        default: "No"
    }

}

const playerSchema = new mongoose.Schema(playerObj);
module.exports = mongoose.model('Player', playerSchema); 

This is my router:

const express = require('express');
const router = express.Router();
const Player = require('../models/player');
const multer = require('multer');


const storage = multer.diskStorage({
    destination: 'images/',
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

const upload = multer({
    storage: storage,
    limits: { fileSize: 1000000 },
});

router.post('/add', upload.single('playerIcon'), (req, res, next) => {
Player.create(
    {
        ign: req.body.ign,
        role: req.body.role,
        team: req.body.team,
        playerIcon: req.file.filename.playerIcon,
        playerName: req.body.playerName,
        playerNumber: req.body.playerNumber,
        verificationStatus: req.body.verificationStatus
    },
    (err, newPlayer) => {
        if (err) { console.log(err); }
        else {
            res.redirect('/players');
        }
    }
);
});

this my form view:

 <div class="addPlayerCon" id="PlayerForm">
     
    <form method="POST" class="Form" enctype="multipart/form-data">
      <Label class="fromlabel">{{title}}</Label>
      <label for="playerName" class="inputLabel">Player Name</label>
      <input type="text" name="playerName" placeholder="Enter Player Name" required/>
      <br>
      <label for="playerNumber" class="inputLabel">Player Number</label>
      <input type="text" name="playerNumber" placeholder="Enter Player Number" required/>
      <br>
      <label for="ign" class="inputLabel">In Game Name</label>
      <input type="text" name="ign" placeholder="Enter IGN" required/>
      <br>
      <label for="role" class="inputLabel">Position/Role</label>
      <input type="text" name="role" placeholder="Enter Position or Role" required/>
      <br>
      <label for="playerIcon" class="inputLabel">Player Icon</label>
      <input type="file" name="playerIcon"/>
      <br>
        <label for="team" class="inputLabel">Team</label>
        <select name="team" class="addPlayerDrop" required>
            {{#each teams}}
            <option>{{this.teamName}}</option>
            {{/each}}
        </select>
      <br>
        <label for="verificationStatus" class="inputLabel">Verification Status</label>
        <select name="verificationStatus" class="addPlayerDrop" required>
            <option value="No">No</option>
            <option value="Yes">Yes</option>
        </select>
      <br>
      <button type="submit" class="btnAdd">Add Player</button>
    </form>
  </div>

I've read through the multer npm doc here and tried messing around with the req. file and the data type of playerIcon in the model but I'm not sure what causes it to not send the file name to MongoDB my hunch is that it's something I'm missing in the model or the router.

0 Answers0