Multer: Uploading image does not seem to grab file.

[sandysaders]

I'm working on getting image uploads to work with react and multer. However multer doesn't seem to get a req.file key, only finds req.body.photo key and holds the value '[object File]' when I console it out. Multer goes ahead and create the folders specified in destination but does not store the image there (I'm guessing because it doesn't have req.file). If you know what the problem is please reply, and in case you interested in SoF points heres a link:
http://stackoverflow.com/questions/37473634/uploading-images-with-fetch-to-express-using-multer

server.js

var storage = multer.diskStorage({
        destination: './public/users',
        filename: function (req, file, cb) {
            switch (file.mimetype) {
                case 'image/jpeg':
                    ext = '.jpeg';
                    break;
                case 'image/png':
                    ext = '.png';
                    break;
            }
            cb(null, file.originalname + ext);
        }
    });

var upload = multer({storage: storage});

app.use(upload.single('photo'));

app.post('/uploadUserImage', function (req, res) {
    console.log(JSON.stringify(req.body.photo)) // form fields
    console.log(req.photo) // form files
    console.log(req.file) // form files
    res.send(req.body.photo);
});

client.js

    function uploadImage (image) {
      var formData = new FormData();
      formData.append('photo', image);
      fetch('http://localhost:8080/uploadUserImage/', {
        method:'POST',
         body: formData
      });
    }

[herkyl]

I'm having the same issue, any news on this?

[gjsjy]

I am also facing the same issue - console.log is printing empty always.
do you have any workaround and/or root cause? appreciate any help.

[gjsjy]

One thing i have noticed in multer, file input value is being considered as field instead of file to process through busboy.on('file', function(){ ............. .............. });
dont know why. still having that issue.

[gjsjy]

Finally, i have got something going with this issue.
Processing filelist field like this will send the required payload to server by browser, it was an issue with front end and not multer.

Object.keys(data).forEach(( key ) => {
      if (data[key] instanceof FileList) {
        body.append(key, data[key][0], data[key][0].name);
      } else {
        body.append(key, data[key]);
      }
    });

[HenrikGr]

I got this problem too, how did you solve it?

[rustyforeal]

well - i have this exact same issue..i see that the req.headers are perfect - but the file is being sent as an object..using jQuery to send the file from the front end - have tried everything..any suggestions there @gjsjy ? thanks

[rustyforeal]

yea - well - looks like i just nailed it moments after i posted the above..jQuery is a little weird..it passes the object as a whole when the image tag is accessed. need to pass the right "file" while POST-ing.!

[gireeshpunathil]

no an issue with multer, a close candidate.

[HarshithaKP]

@sandysaders @HenrikGr @herkyl @gjsjy @rustyforeal This is related with react client, as multer in back end expects complete header (Content-Type,boundry ), it needs to be passed. Here is an example showing working Axios client with multer.

https://gist.github.com/HarshithaKP/ebc0e79800e5638fe827c157360378be
Let me know if it helps in resolving your issue.

[LinusU]

Seems like this was a client problem that can be solved by the code linked, happy to reopen if we should change something in Multer