How to ignore "req.file.path" from form data if user do not choose a file using multer - reactjs

Question

Hello I'm working on a social network project using MERN Stack and in there user can either make a post with only text or can make a post by uploading an image along with some text as a caption, but the problem is that when a user doesn't wish to upload image and just want to post only with text and leaves postImage field empty then this error occurs Cannot read property 'path' of undefined what can be the solution for this, I'm attaching the post schema, post routes and post state:
Post Schema:
const mongoose = require('mongoose');
const postSchema = mongoose.Schema({
user: {
type: mongoose.Schema.ObjectId,
ref: 'Users',
},
text: {
type: String,
required: [true, 'post cannot be empty'],
},
postImage: {
type: String,
},
name: {
type: String,
},
avatar: {
type: String,
},
likes: [
{
user: {
type: mongoose.Schema.ObjectId,
ref: 'User',
},
},
],
comments: [
{
user: {
type: mongoose.Schema.ObjectId,
ref: 'User',
},
comment: {
type: String,
required: true,
},
name: {
type: String,
},
avatar: {
type: String,
},
date: {
type: Date,
default: Date.now,
},
},
],
date: {
type: Date,
default: Date.now,
},
});
module.exports = mongoose.model('Post', postSchema);
Post Route:
const express = require('express');
const router = express.Router();
const auth = require('../middleware/auth');
const Post = require('../models/postModel');
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads');
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});
const fileFilter = (req, file, cb) => {
if (
file.mimetype === 'image/jpeg' ||
file.mimetype === 'image/png' ||
file.mimetype === 'image/gif'
) {
cb(null, true);
} else {
cb(new Error('The supported file types are jpeg, png and gif'), false);
}
};
const upload = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5,
},
fileFilter: fileFilter,
});
const { check, validationResult } = require('express-validator');
const User = require('../models/userModel');
router.post(
'/',
upload.single('postImage'),
[auth, check('text', 'Text is required').not().isEmpty()],
async (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
try {
const user = await User.findById(req.user.id).select('-password');
const newPost = new Post({
text: req.body.text,
postImage: req.file.path,
name: user.name,
avatar: user.avatar,
user: req.user.id,
});
const post = await newPost.save();
res.json(post);
} catch (err) {
console.error(err.message);
res.status(500).send('Server Error');
}
}
);
Post State:
const createPost = async postData => {
try {
const config = {
headers: {
'Content-Type': 'multipart/form-data',
},
};
const res = await axios.post('/api/posts', postData, config);
dispatch({
type: ADD_POST,
payload: res.data,
});
} catch (err) {
dispatch({
type: POST_ERROR,
payload: err.response.msg,
});
}
};

Answer 1

You can simply check if req.file is defined - if yes set postImage to its path, else set it to undefined:
const newPost = new Post({
text: req.body.text,
postImage: req.file ? req.file.path : undefined,
name: user.name,
avatar: user.avatar,
user: req.user.id,
});