req.file is undefined (multer, node.js)

Question

I've been trying to upload an image for a while now, but req.file is still undefined. Can someone see why?

this is my page. I am able to pick an image when I click the '+' glyphicon, but on the server side req.file is still empty.

EJS file

input[type="file"] and input[type="submit"] have css styles display: none

<form action="/profile/addProfilepicture" method="post" id="form" enctype="multipart/form-data">
            <span id="upload" class="glyphicon glyphicon-plus-sign"></span>
            <label for="profilePic"></label>
            <input id=profilePic type='file'  />
            <input type="submit">
        </form>

        <img class="profileImg"
             src="<%="images/pexels-photo-370799.jpeg"%>"
             alt="fail">

Client JS file

When I click the '+'glyphicon it lets me pick an image. When I do this, this will trigger the form to submit and send a post request.

   $("#upload").on('click',function() {
        $("input[type='file']").click();
    });

    $('input[type="file"]').change(function (e) {
       $("input[type='submit']").click()
    });

server side JS

On the server side it stops at:

TypeError: Cannot read property 'filename' of undefined at C:\Users\Tijl Declerck\Desktop\projects\digitalNomadApp\routes\profile.js:27:38 at Immediate._onImmediate (C:\Users\Tijl Declerck\Desktop\projects\digitalNomadApp\node_modules\multer\lib\make-middleware.js:53:37) at runCallback (timers.js:793:20) at tryOnImmediate (timers.js:751:5) at processImmediate [as _immediateCallback] (timers.js:722:5)

The console.logs I tried gave me this: req.body returns an empty object and req.file returns undefined.

var express = require('express');
var router = express.Router();
var multer  = require('multer');
var User = require('../models/Users');

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './public/uploads/profilePics')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
    }
});

var upload = multer({ storage: storage }).single('myImage');


router.post('/addProfilePicture', function (req, res) {

    var profilePicUrl = '';
    upload(req, res, function (err) {
        if (err) {
            // An error occurred when uploading

        } else {
            console.log(req.file);
            profilePicUrl = req.file.filename;

            User.update({username: req.user.username}, {'profilePic.uploaded': true, 'profilePic.link': profilePicUrl}, function(err, doc){
            console.log('THIS IS DONE')
            });
        }
    });
});

Answer 1

You have to provide a name to your file input and it should match the single method's name, this is from multer doc:

.single(fieldname)

Accept a single file with the name fieldname. The single file will be stored in req.file.

This is not well documented but fieldname refers to input name attribute

EJS file

<input id='profilePic' name='myImage' type='file'  />

Express

...
var upload = multer({ storage: storage }).single('myImage');
...