multer - req.file is undefined.

Question

I am creating an app using Node, Express and Handlebars and multer for uploading images. Every time I submit the form, req.file is undefined. I've spent the entire day troubleshooting but can't figure out what I'm doing wrong.

Router File:

const express = require('express');
const router = express.Router();
const multer = require('multer');
const mongoose = require('mongoose');
const path = require('path');
const methodOverride = require('method-override');


//Set Storage Engine
const storage = multer.diskStorage({
    destination: './public/uploads/images',
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + 
    path.extname(file.originalname));
    }
});

const upload = multer({
    storage: storage
}).single('featuredImage');

//Change Featured Image - POST
router.post('/saveImage/:id', (req, res) => {
    console.log(req.file);

    //removed the rest of the code to keep it simple. req.file here is always undefined.

});

Form

<form action="/saveImage/{{pitch.id}}" method="POST" enctype="multipart/form-data">

    <div class="form-group">
        <label for="featuredImage">Featured Image</label>
         <input type="file" name="featuredImage" id="featuredImage">
     </div>

     <input type="submit" value="SAVE">
</form>

app.js these requires are in the app.js file.

const express = require('express');
const exphbs  = require('express-handlebars');
const path = require('path');
const passport = require('passport');
const mongoose = require('mongoose'); 
const bodyParser = require('body-parser');
const flash = require('connect-flash');
const session = require('express-session');
const methodOverride = require('method-override');
const nodemailer = require('nodemailer');

//Set StaticFolder
app.use(express.static(path.join(__dirname, 'public')));

Answer 1

In my case it was issue with image size. I resolved it with defining multer limit as follows:

const upload = multer({ storage: storage, limits: { fieldSize: 10 * 1024 * 1024 } }); //10MB

Took me ages to figured out. Maybe this can help someone

Answer 2

Please refer to this question. It has answer you are looking for.

node js multer file upload not working. req.file and req.files always undefined

Answer 3

You have to pass middleware

router.post('/saveImage/:id', upload.single('featuredImage'),  (req, res) => {
    console.log(req.file);

});

Answer 4

At first I was having the same issue! But when I added this :

const { storage } = require ('debug/src/browser');

... it worked.

This is my multer code :

const { storage } = require('debug/src/browser');
 
const multer = require('multer');

const MINE_TYPES = {
'image/jpg' : 'jpg',

'image/jpeg': 'jpeg',

'image/png':'png'
}

const Storage = multer.diskstorage({

destination: (req, file, callback)=>{

callback(null, "public/images/articles")

},

filename: (req, file, callback) => {

var name = Math.floor(Math.random() * Math.floor(15258652325)).tostring() 

name = Math.floor(Math.random() * Math.floor(15258652325)).toString();

name = Math.floor (Math.random() * Math.floor(15258652325)).toString();

name = Math.floor(Math.random() * Math.floor(15258652325)).tostring();

name = Math.floor(Math.random() * Math.floor 
(15258652325)).toString();

name += Date.now();

const extension = MINE_TYPES[file.mimetype]; 

name += extension;

callback(null,name);

module.exports = multer({ storage: Storage)). 
single('image');

Answer 5

Use this:

var fileupload = require("express-fileupload");
app.use(fileupload());