Multer File Upload Not Working in Firefox

Question

Multer adds the uploaded files to req.file or req.files. My code works in Chrome as expected, but both req.file and req.files are empty in both Firefox (68.01) and Edge (44.17763.1.0).

Why does the request object doesn't contain the files in Firefox and Edge?

My multer config:

const path = require('path');
const uuidv4 = require('uuid/v4');
const multer = require('multer');
const projectRoot = require('./projectRoot');


// Allowed audio mime types
const audioMimeTypeToExt = {
    'audio/wav': '.wav',
    'audio/mp3': '.mp3',
};

// Allowed image mime types
const imageMimeTypeToExt = {
    'image/jpeg': '.jpg',
    'image/png': '.png'
};

// Storage options
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, path.join(projectRoot.path, '/public/tracks/'))
    },
    filename: function (req, file, cb) {
        if (file) {
            // New file name is uuid + extension (i.e. '10ba038e-48da-487b-96e8-8d3b99b6d18a.mp3')
            cb(null, uuidv4() + audioMimeTypeToExt[file.mimetype])
        } else {
            console.log('File missing.');
        }
    }
});


// Filter options
const filter = function (req, file, cb) {
    if (!(file.mimetype.toLowerCase() in audioMimeTypeToExt)) {
        // Reject upload
        cb(null, false);
    }
    // Accept upload
    cb(null, true);
};

const uploadMiddleware = (req, res, next) => {
    multer(
        {
            storage: storage,
            fileFilter: filter,
            limits: {fileSize: 50000000} //50mb
        }
    ).array('tracks', 10)(req, res, function (err) {
        if (err && err.code === "LIMIT_FILE_SIZE") {
            return res.status(413).send(err.message);
        }
        next();
    });
};

module.exports = {
    audioMimeTypeToExt,
    imageMimeTypeToExt,
    uploadMiddleware: uploadMiddleware,
};

My route

const express = require('express');
const router = express.Router();
const sessionMiddleware = require('../middlewares/sessionMiddleware');
const {uploadMiddleware} = require('../config/multerConfig');
const uploadController = require('../controllers/uploadController');

router.post('/',
    sessionMiddleware.requiredLogin,
    uploadMiddleware,
    uploadController.upload_post
);

module.exports = router;

My controller

const {processUploads} = require('../utilities/uploadsProcessor');

exports.upload_post = async function (req, res, next) {
    if (req.files && req.files.length) { // req.files empty in Firefox and Edge
        await processUploads(req);
        console.log('Upload successful.');
        res.status(200).end();
    }
    else {
        res.status(404).end();
    }

};

Thank you

Answer 1

Figured out what was going wrong. Firefox and Edge have different values in the file.mimetype field. For MP3 files, Chrome adds 'audio/mp3', while Firefox and Edge add 'audio/mpeg'. So my filter was filtering our files that don't contain 'audio/mp3' or 'audio/wav' mimetypes.