Using Express JS to implement a post method for multipart form data transmission

Question

Using Express JS to implement a post method for multipart form data transmission

I recently attempted to send form data to my express js server. Below is the code snippet from 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")

Afterwards, I tried to access the post data using req.body in my server-side JavaScript file (profile.js):

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

However, when I checked the console, this was the result: body- {}

Interestingly, I noticed that if I remove enctype="multipart/form-data" from the form declaration like

form(action="/profile" method="post")

, then I am able to successfully retrieve the posted data in the console.

javascript express pug multipartform-data

Answer 1

Answer №1

If you're looking to handle multipart form data, consider using a middleware like multer, which is highly popular.

You can download it from: https://github.com/expressjs/multer

To implement it:

Start by adding it to your modules with npm install --save multer in the main project directory
Then import it into your .js file using var multer = require('multer');
Specify the upload directory by setting the dest parameter in the multer constructor:
```
var upload = multer({ dest: 'uploads/' });
```

Lastly, include it as middleware in your POST function like this:

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

Make sure to refer to the documentation on their GitHub repository for more information.

Answer 2

If you're looking to handle multipart form data, consider using a middleware like multer, which is highly popular.

You can download it from: https://github.com/expressjs/multer

To implement it:

Start by adding it to your modules with npm install --save multer in the main project directory
Then import it into your .js file using var multer = require('multer');
Specify the upload directory by setting the dest parameter in the multer constructor:
```
var upload = multer({ dest: 'uploads/' });
```

Lastly, include it as middleware in your POST function like this:

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

Make sure to refer to the documentation on their GitHub repository for more information.

Answer 3

Answer №2

express-formidable module is great for handling post data on the server. To install express-formidable, use this command npm install express-formidable. Here's a sample code snippet:

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
});

Make sure to create a folder uploads in your project root directory. File-related data will be in req.files, and non-file data will be in req.fields. I've tested it with ejs templating engine, but it should also work well with pug. For more information about express-formidable, check out This Link.

Answer 4

express-formidable module is great for handling post data on the server. To install express-formidable, use this command npm install express-formidable. Here's a sample code snippet:

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
});

Make sure to create a folder uploads in your project root directory. File-related data will be in req.files, and non-file data will be in req.fields. I've tested it with ejs templating engine, but it should also work well with pug. For more information about express-formidable, check out This Link.

Using Express JS to implement a post method for multipart form data transmission

Answer №1

Answer №2

Similar questions

Is it possible to display data on a webpage without using dynamic content, or do I need to rely on JavaScript

"Encountered an error while attempting to save data to MongoDB: Unable to insert a single buffer of 10,

How to create a transparent background on a canvas

Running NPM module via Cordova

Exporting JSON data to CSV or XLS does not result in a saved file when using Internet Explorer

Utilizing PostgreSQL with Node JS Express for Powerful Datatables

Employing ajax with dynamically created buttons in PHP

The operation of "grunt build" results in a Lexer Error, causing the ng-include

Tips for executing getJSON requests one after the other

Trouble with HTML2PDF.js - download not being initiated

Transferring information from an Express.js request to a form

`Where to include controller.js scripts in an Angular application`

Vue: Utilizing computed properties to monitor changes in offsetHeight of elements

Issue encountered when attempting to push jQuery AJAX requests into an array

What is the purpose of parsing my array if they appear identical in the console?

Showcase a sizable picture broken down into smaller sections

Challenges surrounding jQuery's .before

Tips for Successfully Sending Vue Data in Axios POST Call

Formik causing malfunction in MUI DatePicker functionality

Can someone guide me on how to extract checkbox values in a post method using Angular