Why are Express-Validator fields empty when using multer for multipart/form-data uploads?

I'm developing a Node.js backend with Express to create posts that include file uploads, and I'm facing an issue where express-validator reports that the title and content fields are empty, even though they're provided in the form-data via Postman. The images, however, are being uploaded to Cloudinary successfully.

Below is my current setup:

Middleware (uploadImage.js):

JAVASCRIPTCopied
const cloudinary = require("cloudinary").v2;
const { CloudinaryStorage } = require("multer-storage-cloudinary");
const multer = require("multer");

// Configure Cloudinary storage for multer
const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: "post/uploads",
    public_id: (req, file) => file.originalname,
    resource_type: "image", // Ensure the resource type is image
    transformation: [
      { width: 1000, crop: "scale" }, // Resize the image to a width of 1000 pixels
      { quality: "auto:best" }, // Automatically adjust the best quality
      { fetch_format: "auto" }, // Automatically convert to the best format
    ],
  },
});

// Multer upload middleware
const upload = multer({ storage }).fields([
  { name: "imageUri", maxCount: 1 },
  { name: "thumbnails", maxCount: 4 },
]);

module.exports = upload;

Routes (postRoutes.js):

JAVASCRIPTCopied
const express = require("express");
const router = express.Router();
const { body } = require("express-validator");
const postController = require("../controller/postController");
const upload = require("../middleware/uploadImage");

router.get("/posts", postController.getPosts);
router.post(
  "/posts/new",
  [
    body("title")
      .trim()
      .isLength({ min: 5 })
      .notEmpty()
      .withMessage("Title is required"),
    body("content")
      .trim()
      .isLength({ min: 5 })
      .notEmpty()
      .withMessage("Content is required"),
  ],
  upload,
  postController.createPost
);

router.get("/posts/:id", postController.getPostById);

router.put(
  "/posts/:id",
  [
    body("title")
      .trim()
      .isLength({ min: 5 })
      .notEmpty()
      .withMessage("Title is required"),

    body("content")
      .trim()
      .isLength({ min: 5 })
      .notEmpty()
      .withMessage("Content is required"),
  ],
  postController.updatePostById
);

router.delete("/posts/:id", postController.deletePostById);

module.exports = router;

Controller (postController.js):

JAVASCRIPTCopied
exports.createPost = async (req, res, next) => {
  console.log("Request Body:", req.body);
  console.log("Request Files:", req.files);
  const { title, content } = req.body;
  const error = validationResult(req);

  if (!error.isEmpty()) {
    return res.status(400).json({
      status: "Failed",
      code: 400,
      message: "Validation failed",
      errors: error.array(),
    });
  }

  try {
    const imageUri = req.files.imageUri ? req.files.imageUri[0].path : null;
    const thumbnails = req.files.thumbnails ? req.files.thumbnails.map(file => file.path) : [];

    const post = new Post({
      title,
      content,
      imageUri,
      thumbnails,
    });

    const result = await post.save();

    return res.status(201).json({
      status: "Success",
      code: 201,
      message: "Post created successfully",
      data: result,
    });
  } catch (error) {
    return res.status(500).json({
      status: "Failed",
      code: 500,
      message: "An error occured while creating post",
      error,
    });
  }
};

Model (postModel.js):

JAVASCRIPTCopied
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const postSchema = new Schema(
  {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
    imageUri: {
      type: String,
      required: false,
    },
    thumbnails: {
      type: [String],
      required: false,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("post", postSchema);

Server Setup (server.js):

JAVASCRIPTCopied
require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const postRoutes = require("./routes/postRoutes");
const cloudinary = require('./config/CloudinaryConfig')

const hostname = "localhost";
const port = 8080;

const MONGODB_URI = process.env.MONGODB_URI

const app = express();

app.use(bodyParser.json());

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET , POST , PUT , DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type , Authorization");
  next();
});

app.use("/", postRoutes);

mongoose
  .connect(MONGODB_URI)
  .then(() => {
    console.log("Connected to database");
    app.listen(port, hostname, () => {
      console.log(`Server is running at http://${hostname}:${port}`);
    });
  })
  .catch((err) => {
    console.log(err);
  });

Request in Postman:

• Method: POST

• URL: http://localhost:3000/api/posts/new

• Body: form-data

  • title: First Post
  • content: Hello World
  • imageUri:(file)
  • thumbnails: (file)
    
    

Server Logs:

BASHCopied
[nodemon] starting `node app.js`
Connected to database
Server is running at http://localhost:8080
Request Body: [Object: null prototype] {
  title: 'First Post',
  content: 'Hello World'
}
Request Files: [Object: null prototype] {
  imageUri: [
    {
      fieldname: 'imageUri',
      originalname: 'Leonardo_Kino_XL_wildlife_jungle_and_include_all_animals_2.jpg',
      encoding: '7bit',
      mimetype: 'image/jpeg',
      path: 'https://res.cloudinary.com/du9ze60lr/image/upload/v1738605266/post/uploads/Leonardo_Kino_XL_wildlife_jungle_and_include_all_animals_2.jpg.jpg',
      size: 190411,
      filename: 'post/uploads/Leonardo_Kino_XL_wildlife_jungle_and_include_all_animals_2.jpg'
    }
  ],
  thumbnails: [
    {
      fieldname: 'thumbnails',
      originalname: 'NEW_Vision.webp',
      encoding: '7bit',
      mimetype: 'image/webp',
      path: 'https://res.cloudinary.com/du9ze60lr/image/upload/v1738605268/post/uploads/NEW_Vision.webp.png',
      size: 48171,
      filename: 'post/uploads/NEW_Vision.webp'
    }
  ]

Validation Error Response:

JSONCopied
{
  "status": "Failed",
  "code": 400,
  "message": "Validation failed",
  "errors": [
    { "type": "field", "value": "", "msg": "Invalid value", "path": "title", "location": "body" },
    { "type": "field", "value": "", "msg": "Title is required", "path": "title", "location": "body" },
    { "type": "field", "value": "", "msg": "Invalid value", "path": "content", "location": "body" },
    { "type": "field", "value": "", "msg": "Content is required", "path": "content", "location": "body" }
  ]
}```

In summary:
- Why are the title and content fields empty even though they are sent in the request? 
- Why are image files still uploaded to Cloudinary despite the validation errors? 

Any help clarifying and resolving these issues would be appreciated. Thanks!