multer npm: TypeError: Cannot read property 'path' of undefined

Question

I have a problem uploading an image file to my server, I watched a tutorial on YouTube about multer and I do exactly the same thing that is done in the tutorial and for whatever reason I get an error: ("TypeError: Cannot read property 'path' of undefined"). I googled for the error and found some people having the same issue and I tried to solve it like them, but it didn't work for me.

This is my code:

const multer = require('multer');

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

const fileFilter = (req, file, cb) => {
  // reject a file
  if (file.mimetype === 'image/jpg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 1024 * 1024 * 5
  },
  fileFilter: fileFilter
});

app.use(express.static('public'))

the Image Schema and model:

const imageSchema = new mongoose.Schema({
    profilePicture: String
})

const Image = new mongoose.model('Image', imageSchema)

My post route:

app.post('/changeProfilePic', upload.single('profilePicture'), function(req, res, next){
    console.log(req.file);
   const newImage = new Image({
       profilePicture: req.file.path
   })
   newImage.save()
})

My html upload form:

<form action="/changeProfilePic" method="POST" enctype = "multipart/form-data">
      <input type="file" name="profilePicture" placeholder="Image" />
      <button class="btn btn-light btn-lg" type="submit">Upload</button>
    </form>

and when I logged the value of (req.file) it says that its type is 'undefined', so that must mean that multer didn't recognize or even didn't received the image file. what am I doing wrong that multer doesn't get the file?

Answer 1

I changed the destination to ./uploads works fine for me