Express and Multer upload issue - req.files is always empty

3
votes

My express form processing req.files giving me empty array or object for all the strategy i have tried.

and my file field is not considerd as file by makemiddleware object inside multer. (try to console that out and form submittion is not going there).

i have my client side request payload look like this below and servicer side req.headers['content-type'] consoling out as multipart/form-data

    ------WebKitFormBoundaryjcaOV7ABMw82oDRB
Content-Disposition: form-data; name="username"

Yash
------WebKitFormBoundaryjcaOV7ABMw82oDRB
Content-Disposition: form-data; name="email"

[email protected]
------WebKitFormBoundaryjcaOV7ABMw82oDRB
Content-Disposition: form-data; name="password"

yash
------WebKitFormBoundaryjcaOV7ABMw82oDRB
Content-Disposition: form-data; name="confirmPassword"

yash
------WebKitFormBoundaryjcaOV7ABMw82oDRB
Content-Disposition: form-data; name="profilePicture"

[object FileList]
------WebKitFormBoundaryjcaOV7ABMw82oDRB--



 //Middleware

var uploadPath = path.join(__dirname, '../public/upload');
var upload = multer({
  dest: uploadPath,
  rename: function (fieldname, filename) {
      return filename.replace(/\W+/g, '-').toLowerCase() + Date.now();
  },
  onFileUploadStart: function (file) {
      console.log(file.fieldname + ' is starting ...');
  },
  onFileUploadData: function (file, data) {
      console.log(data.length + ' of ' + file.fieldname + ' arrived');
  },
  onFileUploadComplete: function (file) {
      console.log(file.fieldname + ' uploaded to  ' + file.path);
  }
});


//Route

    router.route('/user/signmeup')
      .post(function(req, res){
        upload.array('profilePicture', 2)(req, res, (err) => {
          console.dir(req.headers['content-type']);
          if (err) {
            console.log('err', err);
          }else{
            console.log('coming here');  console.log(req.files); console.log(req.body);
            var reg = new Registration();
            let args = { body : req.body, session : req.session };
            reg.applyForMembership(args, function(err, result){
              res.json(result);
            });
          }
        });
      });

After req process through middleware and req.body and req.files are always printing like this below

coming here
[]
{ username: 'Yash',
  email: '[email protected]',
  password: 'yash',
  confirmPassword: 'yash',
  profilePicture: '[object FileList]' }

Is it an issue with front end form processing and/or the way multer is being configured in my app.

appreciate any help on this, struggling with this for last few days and nothing seems to be working.

Thanks, Gj

2
fileexpressuploadmulter
Have you found a solution yet ? Can you add an answer if so. - Illep

2 Answers

5
votes

OK I was struggling with this for hours - I finally managed to get it working.

The problem turned out to be that I had to add a 'name' attribute to my <input type='file' /> tag, like this <input type='file' name='myFileName'>

Then also - I had to make sure that in my multer setup - I had to have exactly the same name 'myFileName' in my array() function call - like this:

router.post('/', multer({dest:'./uploads'}).array('myFileName', 1), function(req, res, next) {});

This happened to fix the problem..

Hope this helps!

0
votes

To get req.file correct, first you have to set the parameters for .post() in correct way. Use it as:

router.route('/user/signmeup').post(upload.array('profilePicture', 2),
function(req, res){
        console.dir(req.headers['content-type']);
        if (err) {
            console.log('err', err);
        }else{
            console.log('coming here');
            console.log(req.files);
            console.log(req.body);
            var reg = new Registration();
            let args = { body : req.body, session : req.session };
            reg.applyForMembership(args, function(err, result){
            res.json(result);
            });
        }
});