Can I use body-parser and Formidable at the same time?

Question

I am tryint to resolve a problem a couple of days, but can't understand some things. I have a web site created with NodeJS and ExpressJS, and for handling forms I use body-parser.

    var adName = req.body.adName;
    var adMessage = req.body.adMessage;
    var phone = req.body.phone;
    var rawPrice = req.body.price;
    var rawCurrency = req.body.currency;

So, using this method I handle form values. But now, I need to use node-formidable to parse images from users. The question is, can I use somehow formidable only for images and body-parser for forms? Or, can anyone help me with formidable, to understand how to handle forms and attach values to my variables?

Answer 1

You may want to take some time out to study/practice with the formidable module. See this url: https://github.com/felixge/node-formidable

Yes, formidable can be used to process both form fields and file upload including multiple file uploads. body-parser middleware does not handle multiparts - https://github.com/expressjs/body-parser. In this case, I will advise you use formidable and drop body-parser.

See if below express app help you out.

var formidable = require('formidable'),
    util = require('util'),
    express = require('express'),
    app = express();

app.set('port', process.env.PORT || 3600);
app.get('/', function (req, res) {
    res.send(     
    '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="adName" placeholder="adName"><br>'+
    '<input type="text" name="adMessage" placeholder="adMessage"><br>'+
    '<input type="text" name="phone" placeholder="phone"><br>'+
    '<input type="text" name="rawPrice" placeholder="rawprice"><br>'+
    '<input type="text" name="rawCurrency" placeholder="rawcurrency"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
});

app.post('/upload', function(req, res){
    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname + "/data";
    form.parse(req, function(err, fields, files) {
        //fields is an object containing all your fields, do waht ever you want with them from here
        //file is an object containing properties of your uploaded file
      res.send(util.inspect({fields: fields, files: files}));
      console.log('file uploaded : ' + files.upload.path + '/' + files.upload.name);
      console.log('Fields : ' + fields.adName);//you can access all your fields
    });
});

//starting server
app.listen(app.get('port'), function () {
    console.log('Express is listening: http://localhost:%s;', app.get('port'));
});

Answer 2

You can use both body-parser and formidable at the same time if you wish. You can use formidable just for some specific routes and continue using body-parser on the rest. Below I show the code needed to use formidable for just one route:

const formidableMiddleware = require('express-formidable');

app.post('/api/v1/uploadfile', formidableMiddleware(), async (req, res) => {
  const file = req.files.file;
  console.log('file info: ' + file);

  const fields = req.fields;
  console.log('fields = ' + JSON.stringify(fields));
});

Take a look at this link: https://github.com/utatti/express-formidable/issues/1