why req.body is empty and req.files undefined - node.js

Question

I'm using node and express and I'm trying to upload some files and some information with a form. The issue is that when I try to acces to anything in the form from backend it is undefined or empty. When I use req.body it's empty and when I try to use req.files they are undefined so I don't know what to do. This is the code:
routerProgress.post("/home/upload-progress", (req, res) => {
const user_id = req.user.id;
console.log(req.body);
const weight = req.body.weight;
const front = req.files.front;
const from_side = req.files.from_side;
const backwards = req.files.backwards;
let front_id = `${v4()}-${front.file.name}`;
let from_side_id = `${v4()}-${from_side.file.name}`;
let backwards_id = `${v4()}-${backwards.file.name}`;
const date = dateFormat(result.request_date, "yyyy-mm-dd");
from.mv('../../uploads/images', front_id, (req, res) => {
if (err) console.log(err);
else console.log("File Uploaded");
})
from_side.mv('../../uploads/images', from_side_id, (req, res) => {
if (err) console.log(err);
else console.log("File Uploaded");
})
backwards.mv('../../uploads/images', backwards_id, (req, res) => {
if (err) console.log(err);
else console.log("File Uploaded");
})
const newProgress = new Progress ({
user_id,
weight,
front_id,
from_side_id,
backwards_id,
date
})
res.redirect("/home");
});
The console.log is only {} and req.files.name_defined_in_form are undefined.
Here is my app.js
import express from 'express';
const app = express();
import path from 'path';
import sequelize from './db/db.js';
import { fileURLToPath } from 'url';
import flash from 'connect-flash';
import session from 'express-session';
import passport from 'passport';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// SERVER CONFIGURATION
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Listening at ${PORT}`);
sequelize.sync({ force: false })
.then(() => console.log('Database Connected!'))
.catch(err => console.log(err));
});
// VIEW SETTINGS
app.use(express.static(__dirname + "/public"));
app.set("view engine", "pug");
// app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, "/public/views"));
// BODYPARSER
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
// EXPRESS SESSION
app.use(session({
secret: 'GymApp',
resave: true,
saveUninitialized: true
}));
// CONNECT FLASH
app.use(flash());
// PASSPORT MIDDLEWARE
import passportConfig from './config/passport.js';
passportConfig(passport);
app.use(passport.initialize());
app.use(passport.session());
// GLOBAL VAR
app.use((req, res, next) => {
res.locals.success_msg = req.flash('success_msg');
res.locals.error_msg = req.flash('error_msg');
res.locals.error = req.flash('error');
next();
});
// ROUTES
import { routerIndex } from './routes/index.js';
import { routerProgress } from './routes/app/progress.js';
import { routerAuthentication } from './routes/authentication.js';
import { routerHome } from './routes/app/home.js'
app.use(routerIndex);
app.use(routerProgress);
app.use(routerAuthentication);
app.use(routerHome);
And here is the form done with pug:
form(class="form add-form space-down" method="POST" enctype="multipart/form-data")
div.title
h1 UPLOAD NEW PROGRESS
div.form-group
label(for="weight") Weight:
input(type="number" name="weight" class="form-control" placeholder="Enter your weight")
div.form-group
label(for="front") Upload a front photo
input(type="file" name="front")
div.form-group
label(for="from_side") Upload a from side photo
input(type="file" name="from_side")
div.form-group
label(for="backwards") Upload a backwards photo
input(type="file" name="backwards")
div.button-container
button(type="submit" class="btn btn-primary btn-color space") Upload
If anyone know what I should do to solve this issue I would be very grateful with him.

Answer 1

In order to access the req.files object, you need to add a specific middleware named express-fileupload that allows this functionality.
Simply run npm i express-fileupload, and then add it to your app.js, like so:
const fileUpload = require('express-fileupload');
app.use(fileUpload());
In your specific app.js, you could add it near your other middleware, such as:
import express from 'express';
const app = express();
import path from 'path';
import sequelize from './db/db.js';
import { fileURLToPath } from 'url';
import flash from 'connect-flash';
import session from 'express-session';
import passport from 'passport';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// SERVER CONFIGURATION
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Listening at ${PORT}`);
sequelize.sync({ force: false })
.then(() => console.log('Database Connected!'))
.catch(err => console.log(err));
});
// FILE UPLOAD
const fileUpload = require('express-fileupload');
app.use(fileUpload());
// VIEW SETTINGS
app.use(express.static(__dirname + "/public"));
app.set("view engine", "pug");
// app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, "/public/views"));
// BODYPARSER
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
// EXPRESS SESSION
app.use(session({
secret: 'GymApp',
resave: true,
saveUninitialized: true
}));
// CONNECT FLASH
app.use(flash());
// PASSPORT MIDDLEWARE
import passportConfig from './config/passport.js';
passportConfig(passport);
app.use(passport.initialize());
app.use(passport.session());
// GLOBAL VAR
app.use((req, res, next) => {
res.locals.success_msg = req.flash('success_msg');
res.locals.error_msg = req.flash('error_msg');
res.locals.error = req.flash('error');
next();
});
// ROUTES
import { routerIndex } from './routes/index.js';
import { routerProgress } from './routes/app/progress.js';
import { routerAuthentication } from './routes/authentication.js';
import { routerHome } from './routes/app/home.js'
app.use(routerIndex);
app.use(routerProgress);
app.use(routerAuthentication);
app.use(routerHome);
After installing and implementing the middleware via app.use(), the req.files object should now be accessible, given you are passing the files from your form properly.