Multer not receiving Files from FormData

Backend Development
1

Good day all, I’ve been trying multer in nodejs to upload some audio files. But I kept getting this ‘Unexpected field’ error. I have made sure that the name for the input tag matched the one specified in multer.

Error message

MulterError: Unexpected field
    at wrappedFileFilter (C:\Users\leonl\Desktop\music_player\node_modules\multer\index.js:40:19)
    at Multipart.<anonymous> (C:\Users\leonl\Desktop\music_player\node_modules\multer\lib\make-middleware.js:107:7)
    at Multipart.emit (node:events:513:28)
    at HeaderParser.cb (C:\Users\leonl\Desktop\music_player\node_modules\busboy\lib\types\multipart.js:358:14)
    at HeaderParser.push (C:\Users\leonl\Desktop\music_player\node_modules\busboy\lib\types\multipart.js:162:20)
    at SBMH.ssCb [as _cb] (C:\Users\leonl\Desktop\music_player\node_modules\busboy\lib\types\multipart.js:394:37)
    at feed (C:\Users\leonl\Desktop\music_player\node_modules\streamsearch\lib\sbmh.js:248:10)
    at SBMH.push (C:\Users\leonl\Desktop\music_player\node_modules\streamsearch\lib\sbmh.js:104:16)
    at Multipart._write (C:\Users\leonl\Desktop\music_player\node_modules\busboy\lib\types\multipart.js:567:19)
    at writeOrBuffer (node:internal/streams/writable:392:12)

Backend Code
Note that the route isn’t the same as used in the fetch request as I separated the routes in the main JS file.

server.js

app.use("/user",require("./routes/user"));

routes/user.js

let multerStorage = multer.memoryStorage()
let multerUploads = multer({storage: multerStorage, limits: { fileSize: 1024 * 1024 * 10 }})
router.post("/uploadMusic", multerUploads.Array("musics"),
function (req, res, next) {
    const musicFiles = req.files;
    console.log(musicFiles);
});

Front-end code

const formData = new FormData();
let files = document.getElementById("musicFiles").files
Array.from(files).forEach( (file) => {
    formData.append('musics', file, file.name);
})

fetch('/user/uploadMusic', {
    method: 'POST',
    body: formData,
})
.then((response) => {
    console.log(response);
})
.catch((error) => {
    console.error(error);
});

Thanks.

2

So I found the issue, it was caused by the app.use(upload.array()); line I added into my main JS file.