req.body is undefined in middleware before multer middleware - node.js

Question

I want to make an app that takes a name and an image from user and saves it to the server using multer.
The problem is that i want to validate the name before saving the image, using a middleware before the multer upload middleware.
this is the server code:
const express = require('express');
const app = express();
const ejsMate = require('ejs-mate');
const path = require('path');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.engine('ejs', ejsMate);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));
const validateName = ( req, res, next ) => {
const { name } = req.body;
if ( name.length <= 0 ) return res.send(JSON.stringify({ success: -1 }));
next();
};
app.route('/upload')
.get(( req, res ) => { res.render('index'); })
.post(validateName, upload.single('image_file'), function (req, res) {
console.log(req.file, req.body);
res.send(JSON.stringify({ success: 1 }));
});
app.listen(3000, () => {
console.log("Server started");
});
I am sending the name and image using fetch api:
window.onload = () => {
const submitBtn = document.querySelector("#submit");
const nameInput = document.querySelector('[name="name"');
const imageInput = document.querySelector('[name="image"');
function handleRenderImage() {
console.log( "SUCCESS" );
};
submitBtn.addEventListener('click', async () => {
const formData = new FormData();
const name = nameInput.value;
const image = imageInput.files[0];
formData.append('name', name);
formData.append('image_file', image);
await fetch('/upload', {
method: "POST",
body: formData
})
.then( response => response.json() )
.then( data => {
const { success } = data;
if ( success ) handleRenderImage();
})
.catch(e => { console.error(e); });
});
};
I think the app.use(express.urlencoded({ extended: true })); and app.use(express.json()); is the reason because the request send from client side should be json encoded.
How can i read the req.body inside validateName middleware ?

Answer 1

First off, if you're sending a name and a binary image from a browser, then your data won't be urlencoded or JSON. It will likely have a content-type of multipart/form-data.
You won't get any access to any data from the body of the request until some code reads the body from the stream and parses it for you. If this content-type is multipart/form-data, then you have to use middleware that can read and parse that type (which is something multer can do).
So, what you're kind of asking to do is to read part of the body, parse it, let you look at, then if you like it, read the rest of the body. I'm not aware of any multipart/form-data middleware that will do that easily. It's not even clear to me that the name is guaranteed to arrive BEFORE the image in the data so you might have to read through the whole image just to get to the name anyway.
What I suggest you do instead, is parse the whole response, put the image in a temporary location and then, if the rest of the data looks appropriate, you can then put the image in its final location. If not, you can delete it.
Another possibility would be take the name out of the body and make it a query parameter (this would require custom coding on the client-side). You can then see the query parameter before you've read and parsed the body.
Another possibility would be to split the upload into two parts, the first request would give you the name which you could check independently. The second would then provide the image. You would have to keep some server-side state (perhaps express-session) that has the name that is to be associated with the uploaded image. I would generally not recommend this approach as it has lots of edge cases to deal with and avoiding server-side state between requests when possible is a general design goal.