Node.js, multer and req.body empty

node.js upload multer

26,343

Solution 1

2017 Update

Note that req.body might not have been fully populated yet. It depends on the order that the client transmits fields and files to the server.

I resolved my issue by reversing the order of my form object properties in the front end:

    var newFormObj  = new FormData();
    newFormObj.append('internalUserID', internalUserID);
    newFormObj.append('listingImage', this.binaryImages[image]);

On the backend:

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    console.log(req.body.internalUserID) // YAY, IT'S POPULATED
    cb(null, 'listing-pics/')
  },                    
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }                     
});                     

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

Solution 2

You need to re-arrange the fields from frontend request, Below i will explain,

I am using multer to upload multiple files and single file in my nodejs application.

Postman request screenshot (Mistaked):

Postman request screenshot (correct method):

See the difference in order of fields. Always attach media files in last of the req content.

I had spent a 2 hours nearly to find this. Definitly Work. Just try it.

Solution 3

I resolve moving req.body at the end of the post function:

app.post('/api/upload?:test',function(req,res){

    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    console.log(req.body);

    });
});

If someone can tell me why I will happy to learn a new thing! But, for now, I resolved!

Solution 4

Move your console.log(req.body) inside upload(req,res,function(err) {...})

The default express body-parser cannot work with multipart/form-data, hence we use multer to parse form-data which is accessible inside your upload function.

View more solutions

26,343

Author by

Filippo1980

I'm blind and Italian. These are very important informations because could explaine many my posts! I'm working as web developer and I'm learning JPA2 and JSF2. I'm also learning to use Vinux, a linux distro based on Ubuntu. My preferred IDE is Netbeans with the plug-in Sappy. My preferred screen reader is NVDA. For now it is enought.

Updated on September 25, 2021

Comments

Filippo1980 over 2 years

Here it is my problem, I have a form where I can insert a file and a field but I receive only the file and not the parameter test! Why?

This is my code:

app.js:

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var port = 8000;
var multer = require('multer'); // v1.0.5
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname.substring(0,file.originalname.lastIndexOf('.')) + '-' + Date.now() + file.originalname.substring(file.originalname.lastIndexOf('.'),file.originalname.length));
  }
});
var upload = multer({ storage : storage}).single('fileUpload');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.post('/api/upload',function(req,res){
    console.log(req.body);
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

app.listen(port, function () {
    console.log('Express server inizializzato sulla porta ' + port);
});

index.html:

<html>
    <head>
        <title>Test upload</title>
    </head>
    <body>
        <form name="form" action="http://localhost:8000/api/upload" method="post" enctype="multipart/form-data">
            <input type="text" name="test" />
            <input type="file" name="fileUpload" />
            <input type="submit" value="invia" />
        </form>
    </body>
</html>

Someone can help me?