Multipart form data post method using express js

Question

I tried to post form data to my express js server side. This is my pug file

form(action="/profile" method="post" enctype="multipart/form-data")
 input(type="file" accept="image/*" name="profileimage")
 input(type="text" name="username")
 input(type="submit" value="Upload")

After that I tried to log the post data with req.body inside server side js as follow. That is my profile.js

router.post('/', function (req, res) {
  console.log('Body- ' + JSON.stringify(req.body));
});

And this is my console result body- {}

If I post without enctype="multipart/form-data" like form(action="/profile" method="post"), I can get the post data from my console result.

duplicate for https://stackoverflow.com/questions/49029893/accessing-raw-post-data-in-express/49030208#49030208 — Giannis Mp, Mar 02 '18 at 10:40
Possible duplicate of [Accessing raw POST data in Express](https://stackoverflow.com/questions/49029893/accessing-raw-post-data-in-express) — leonheess, Aug 08 '19 at 08:07

score 13 · Accepted Answer · edited Sep 04 '21 at 03:11

13

You need to use a middleware to handle multipart form data, i think the most famous one is multer.

You can find it here: https://github.com/expressjs/multer

To use it:

First add it to your modules with npm install --save multer in your root project
Then import it in your .js file var multer = require('multer');
Choose your upload directory by setting the dest argument in the multer constructor: var upload = multer({ dest: 'uploads/' });

Now just pass it as a middleware in your POST function as follows:

router.post('/', upload, function (req, res) {
  console.log('Body- ' + JSON.stringify(req.body));
});

And don't forget to read the documentation at their github repo.

edited Sep 04 '21 at 03:11

ggorlen

44,755
7
76
106

answered Mar 02 '18 at 10:47

Atef

1,294
1
14
27

2

Thanks @Atef but this would slit the data into req.file and req.body. Please is there a way to have in all in one formData. in req.body so that I can send the data as it is to another api. – Vixson Aug 14 '20 at 09:07
@Vixson I had the same situation and I would suggest using `formidable`, as it has a simpler handler and doesn't split into req.file and req.body. It's also 4 times the size of `multer` but still light IMO – d0st Jan 26 '21 at 11:06

score 3 · Answer 2 · edited Jan 23 '22 at 15:40

express-formidable module is best suited to send post data to the server I think. install express-formidable with following command npm install express-formidable below is a sample code example

let express = require('express');
let app = express();
let formidable = require('express-formidable');
let path = require('path');

app.use(formidable({
  encoding: 'utf-8',
  uploadDir: path.join(__dirname, 'uploads'),
  multiples: true,
  keepExtensions: true// req.files to be arrays of files
}));

app.post('/uploads',function(req,res){
  console.log('Files '+JSON.stringify(req.files));// contains data about file fields
  console.log('Fields '+JSON.stringify(req.fields));//contains data about non-file fields
});

you have create a folder uploads in your project root directory. All the data related to file will be in req.files and non-file data will be in req.fields I have used it with ejs templating engine and it would work just as fine with pug. click This Link for further information about express-formidable

Multipart form data post method using express js

2 Answers2

Linked

Related