prayag upd prayag upd - 1 month ago 24
Node.js Question

node expressjs - parsing a multipart/form-data POST data using body-parser middleware

I am posting my form data which has

multipart/form-data
enctype. I used
formiddable
nodejs middlerware before which simply worked for
application/json
type.

I found out express.js has a middlerware called
require('body-parser');
which can achieve the same thing.

Here's my
app.js


var Express = require('express');
var Multer = require('multer');
var BodyParser = require('body-parser');

var app = Express();
app.use(BodyParser.json());
app.use(BodyParser.urlencoded({extended: false}));

var storage = Multer.diskStorage({
destination: (req, file, callback) => {
callback(null, './uploads');
},
filename: (req, file, callback) => {
callback(null, file.fieldname + '-' + Date.now());
}
});
var upload = Multer({storage: storage}).single('songUpload');

app.post('/artists', (req, resp) => {

var song = req.body //its empty, {}
console.log(req.body.album) // its undefined
console.dir(song)
upload(req, resp, (err) => {
if (err) {
return resp.end("Error uploading file, " + err);
}
resp.render("artists/profile", {artistName: "UPD : Radio for Dreams"});
});
})


The form view is

<form id="musicUpload" method="POST" enctype="multipart/form-data">

<fieldset>
<label for="album">Album</label>
<input name="album"/>
<br/>

<label for="song"> Song </label>
<input name="email"/>
<br/>

<label for="songUpload"> Upload audio </label>
<input name="songUpload" type="file" multifile="multifile">
<br/>

<label for="tags"> Tags </label>
<input name="message"/>
<br/>

<input type="submit" value="Share to listeners">
</fieldset>
</form>


The http request with
Content-Type:multipart/form-data
looks as below,

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,en-GB;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:509
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryCSC5Po9i0QGe587Z
Host:localhost:3000
Origin:http://localhost:3000
Referer:http://localhost:3000/artists
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36


And, the post data is

enter image description here

But, on the server side, I can't get the posted data using express.js parser. Its all empty.

Answer

You need to add the multer middleware call to your route handler:

app.post('/artists', upload, (req, resp) =>