Multipart form data post method using express js
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.
Solution 1:
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 themulter
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.
Solution 2:
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