Uploading multiple image files with multer from different input fields - node.js

Question

I am not able to upload two images from two different input tags using Multer.
This is the code of the html form
<form action="/upload" method="post" enctype="multipart/form-data">
<h1>Upload Image 1</h1>
<input name="photo1" type="file" />
<img id="output_image" />
<h1>Upload Image 2</h1>
<input name="photo2" type="file" />
<img id="output_image1" />
<button type="submit">Upload</button>
</form>
This is the code of the nodejs file
const upload = multer({ dest: 'uploads/' })
app.post('/upload', upload.fields([
{ name: 'photo1', maxCount: 1},
{ name: 'photo2', maxCount: 1}
]), (req, res, next) => {
console.log(req.file);
next();
});
But the request object is always undefined.
I tried following the documentation but it didn't solve this issue.
Previously I tried uploading a single file which did work out. For that I removed the below part of the form
<h1>Upload Image 2</h1>
<input name="photo2" type="file" />
<img id="output_image1" />
And this was the nodejs file same as the one on the documentation
const upload = multer({ dest: 'uploads/' })
app.post('/upload', upload.single('photo1'), (req, res, next) => {
console.log(req.file);
next();
});
I am not able to find the mistake here. Is it not possible to take two images from different input fields using multer? Any suggestions would be appreciated.

Answer 1

Use any of the following approaches
Will this help you .any()
Accepts all files that comes over the wire. An array of files will be stored in req.files.
WARNING: Make sure that you always handle the files that a user uploads. Never add multer as a global middleware since a malicious user could upload files to a route that you didn't anticipate. Only use this function on routes where you are handling the uploaded files.
i am saying this from [here][1].
or for multiple files use this
Instead of upload.single('image') you want to do upload.array('image'), and then look at req.files instead of req.file.
3)
app.post("/upload", function(req, res, fields) {
const storage = multer.diskStorage({
destination: "public/data/",
filename: function(req, file, cb){
crypto.randomBytes(20, (err, buf) => {
cb(null, buf.toString("hex") + path.extname(file.originalname))
})
}
});
const upload = multer({
storage: storage
}).fields([{name: "pp"}, {name: "banner"}]);
upload(req, res, (err) => {
if (err) throw err;
});
});
for more explanation https://codingstatus.com/upload-multiple-files-using-multer-in-node-js-and-express/