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

Question

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

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

@mparnisari you rock bro \,,/ That does work. Post as an answer. — prayagupa, Oct 17 '16 at 01:40

score 2 · Accepted Answer · answered Oct 17 '16 at 01:41

2

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

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

answered Oct 17 '16 at 01:41

Maria Ines Parnisari

16,584
9
85
130

Cool, it does work. I'm still wondering why the heck I need `bodyParser` then? I thought bodyParser is what would give me post data in json format and multer would help me upload the files etc. – prayagupa Oct 17 '16 at 01:44
Where did you read that you need `bodyParser`? They handle different things. `multer` handles file uploads. `bodyParser` handles json bodies, url-encoded bodies, etc. – Maria Ines Parnisari Oct 17 '16 at 01:48

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

1 Answers1

Linked