Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
A variation on our earlier post 'How to Handle File Uploads with Node.js and Express' (which used express-fileupload). This time, we'll use Multer, a powerful middleware for handling file uploads with Node.js and Express.
In our , we showed how easy it is to handle file uploads using . brings additional flexibility and control:
With these features, Multer is ideal for both simple and advanced upload workflows.
Project Scaffold/Setup
The first step is to create and initialize a new Express project.
npx express-generator --view=pug myapp
cd myapp
npm install
.
├── app.js
├── package.json
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
├── views
│ ├── error.pug
│ └── index.pug
│ └── layout.pug
On MacOS, Linux or Git Bash on Windows, run the app with this command:
DEBUG=myapp:* npm start
Or use this command for Windows:
set DEBUG=myapp:* & npm start
Or this command for Windows Powershell:
$env:DEBUG='myapp:*'; npm start
Then navigate to in your browser to access the app - you should see a page that looks like this:
npm install multer@^1.4.5-lts.2
npm install node-fetch@^2.7.0
npm install form-data
Frontend
Before we write JavaScript code to handle the file upload, let’s create a simple web page that lets the end user select a file to upload.
extends layout
block content
h2 File Upload
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Upload File</button>
</form>
br
h2 Malware Scan
<form action="/scan" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Scan File</button>
</form>
We’ve added two forms to the page. When the File Upload form is submitted, the file will be sent to a route at /upload - the next step is to create the route and route handler. We’ll get back to the Malware Scan form later.
Backend - Simple File Upload
Now we’re going to add a route handler to process uploaded files, and then we’ll wire up the handler to the /upload route.
const express = require('express');
const multer = require('multer');
const router = express.Router();
const storage = multer.diskStorage({
// Configure file uploads with maximum file size 10MB
limits: { fileSize: 10 * 1024 * 1024 }
});
const fileUpload = multer({ storage: storage });
router.post('/', fileUpload.single('file'), async function(req, res, next) {
// Was a file submitted?
if (!req.file) {
return res.status(422).send('No files were uploaded');
}
const uploadedFile = req.file;
// Print information about the file to the console
console.log(`Original File Name: ${uploadedFile.originalname}`);
console.log(`Uploaded File Name: ${uploadedFile.filename}`);
console.log(`Uploaded File Path: ${uploadedFile.path}`);
console.log(`File Size: ${uploadedFile.size}`);
console.log(`File Mime Type: ${uploadedFile.mimetype}`);
// Return a web page showing information about the file
res.send(`File Name: ${uploadedFile.originalname}<br>
File Size: ${uploadedFile.size}<br>
File Mime Type: ${uploadedFile.mimetype}`);
});
module.exports = router;
This simple handler will both print information about the file to the console and return it in as a web page, so you can see what has been received by your router.
Next, we need to wire up this code to the /upload route.
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
We’ve only added 2 lines to the default code provided by the Express generator (lines #9 and #25 above), telling Express to use our upload.js router for the /upload route.
Testing File Uploads
Now we’re ready to test it! ?
If everything was set up correctly, you should see information about the file being printed to the console, and also shown in a web page.
Backend - Malware Scanning
Now we’re going to add a route handler to perform a virus scan on uploaded files, and then we’ll wire up the handler to the /scan route.
const express = require('express');
const fetch = require('node-fetch');
const multer = require('multer');
const FormData = require('form-data');
const fs = require('fs');
const router = express.Router();
const storage = multer.diskStorage({
// Configure file uploads with maximum file size 10MB
limits: { fileSize: 10 * 1024 * 1024 }
});
const fileUpload = multer({ storage: storage });
router.post('/', fileUpload.single('file'), async function(req, res, next) {
// Was a file submitted?
if (!req.file) {
return res.status(422).send('No files were uploaded');
}
const uploadedFile = req.file;
// Print information about the file to the console
console.log(`Original File Name: ${uploadedFile.originalname}`);
console.log(`Uploaded File Name: ${uploadedFile.filename}`);
console.log(`Uploaded File Path: ${uploadedFile.path}`);
console.log(`File Size: ${uploadedFile.size}`);
console.log(`File Mime Type: ${uploadedFile.mimetype}`);
// Scan the file for malware using the Verisys Antivirus API - the same concepts can be
// used to work with the uploaded file in different ways
try {
// Attach the uploaded file to a FormData instance
var form = new FormData();
form.append('file', fs.createReadStream(uploadedFile.path), uploadedFile.originalname);
const headers = {
'X-API-Key': '<YOUR API KEY HERE>',
'Accept': '*/*'
};
// Send the file to the Verisys Antivirus API
const response = await fetch('', {
method: "POST",
body: form,
headers: headers
});
// Did we get a response from the API?
if (response.ok) {
const result = await response.json();
// Did the file contain a virus/malware?
if (result.status === 'clean') {
return res.send('Uploaded file is clean!');
} else {
return res.status(500).send(`Uploaded file contained malware: <b>${result.signals[0]}</b>`);
}
} else {
throw new Error('Unable to scan file: ' + response.statusText);
}
} catch (error) {
// Delete the uploaded file
fs.rm(uploadedFile.path, () => {});
// Forward the error to the Express error handler
return next(error);
}
});
module.exports = router;
As with the /upload handler, this new /scan handler will print information about the file to the console, so you can see what has been received by your route handler. It then uploads the file to Verisys Antivirus API to scan it for malware.
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var scanRouter = require('./routes/scan');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);
app.use('/scan', scanRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
We’ve only added two lines to the previous code (lines #10 and #27 above), telling Express to use our scan.js router for the /scan route.
Testing Malware Scanning
Now we’re ready to test malware scanning! ?
If everything was set up correctly, as before you should see information about the file being printed to the console, but you should also see a response from :
Code for this tutorial can be found on :
Why Choose Multer?
In our , we showed how easy it is to handle file uploads using . brings additional flexibility and control:
- Disk & Memory Storage Engines: Choose between saving files directly to disk or keeping them in memory for immediate processing. Third parties even offer pluggable engines for cloud storage.
- File Filtering: Accept or reject files based on MIME type or custom criteria.
- Limits & Validation: Set size limits, file count limits, and other constraints to protect your server.
- Streaming Support: Process large uploads efficiently without consuming excessive RAM.
With these features, Multer is ideal for both simple and advanced upload workflows.
Project Scaffold/Setup
The first step is to create and initialize a new Express project.
- Open a terminal or command prompt, navigate to the directory where you want to store the project, and run the following commands:
npx express-generator --view=pug myapp
cd myapp
npm install
- The generated app should have the following directory structure:
.
├── app.js
├── package.json
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
├── views
│ ├── error.pug
│ └── index.pug
│ └── layout.pug
- Before we move on, make sure you are able to run the app and view it in a browser
On MacOS, Linux or Git Bash on Windows, run the app with this command:
DEBUG=myapp:* npm start
Or use this command for Windows:
set DEBUG=myapp:* & npm start
Or this command for Windows Powershell:
$env:DEBUG='myapp:*'; npm start
Then navigate to in your browser to access the app - you should see a page that looks like this:
Go ahead and stop the server by hitting CTRL-C at the command prompt
Next we’re going to add a few NPM packages:
- We'll add a package to deal with file uploads easier. There are several popular choices here, including and - but for this tutorial, we'll use .
- For this tutorial, we're going to scan the file for malware using , and so we'll add a package to make it easier to make external HTTP requests. Popular choices include and - for this article, we'll use node-fetch.
- We'll also add the package to allow working with multipart form data, which is used to perform file uploads.
npm install multer@^1.4.5-lts.2
npm install node-fetch@^2.7.0
npm install form-data
Frontend
Before we write JavaScript code to handle the file upload, let’s create a simple web page that lets the end user select a file to upload.
- Update the content of myapp/views/index.pug to contain the following:
extends layout
block content
h2 File Upload
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Upload File</button>
</form>
br
h2 Malware Scan
<form action="/scan" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Scan File</button>
</form>
We’ve added two forms to the page. When the File Upload form is submitted, the file will be sent to a route at /upload - the next step is to create the route and route handler. We’ll get back to the Malware Scan form later.
Backend - Simple File Upload
Now we’re going to add a route handler to process uploaded files, and then we’ll wire up the handler to the /upload route.
- Create file myapp/routes/upload.js with the following content:
const express = require('express');
const multer = require('multer');
const router = express.Router();
const storage = multer.diskStorage({
// Configure file uploads with maximum file size 10MB
limits: { fileSize: 10 * 1024 * 1024 }
});
const fileUpload = multer({ storage: storage });
router.post('/', fileUpload.single('file'), async function(req, res, next) {
// Was a file submitted?
if (!req.file) {
return res.status(422).send('No files were uploaded');
}
const uploadedFile = req.file;
// Print information about the file to the console
console.log(`Original File Name: ${uploadedFile.originalname}`);
console.log(`Uploaded File Name: ${uploadedFile.filename}`);
console.log(`Uploaded File Path: ${uploadedFile.path}`);
console.log(`File Size: ${uploadedFile.size}`);
console.log(`File Mime Type: ${uploadedFile.mimetype}`);
// Return a web page showing information about the file
res.send(`File Name: ${uploadedFile.originalname}<br>
File Size: ${uploadedFile.size}<br>
File Mime Type: ${uploadedFile.mimetype}`);
});
module.exports = router;
This simple handler will both print information about the file to the console and return it in as a web page, so you can see what has been received by your router.
Next, we need to wire up this code to the /upload route.
- Update the content of myapp/app.js to contain the following:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
We’ve only added 2 lines to the default code provided by the Express generator (lines #9 and #25 above), telling Express to use our upload.js router for the /upload route.
Testing File Uploads
Now we’re ready to test it! ?
- Begin by starting your Node.js server using the same command as before
- Open your browser and navigate to - you should see a page that looks like this:
- Use the File Upload form, Browse to select a file and press the Upload File button
If everything was set up correctly, you should see information about the file being printed to the console, and also shown in a web page.
Backend - Malware Scanning
Now we’re going to add a route handler to perform a virus scan on uploaded files, and then we’ll wire up the handler to the /scan route.
- Create file myapp/routes/scan.js with the following content:
const express = require('express');
const fetch = require('node-fetch');
const multer = require('multer');
const FormData = require('form-data');
const fs = require('fs');
const router = express.Router();
const storage = multer.diskStorage({
// Configure file uploads with maximum file size 10MB
limits: { fileSize: 10 * 1024 * 1024 }
});
const fileUpload = multer({ storage: storage });
router.post('/', fileUpload.single('file'), async function(req, res, next) {
// Was a file submitted?
if (!req.file) {
return res.status(422).send('No files were uploaded');
}
const uploadedFile = req.file;
// Print information about the file to the console
console.log(`Original File Name: ${uploadedFile.originalname}`);
console.log(`Uploaded File Name: ${uploadedFile.filename}`);
console.log(`Uploaded File Path: ${uploadedFile.path}`);
console.log(`File Size: ${uploadedFile.size}`);
console.log(`File Mime Type: ${uploadedFile.mimetype}`);
// Scan the file for malware using the Verisys Antivirus API - the same concepts can be
// used to work with the uploaded file in different ways
try {
// Attach the uploaded file to a FormData instance
var form = new FormData();
form.append('file', fs.createReadStream(uploadedFile.path), uploadedFile.originalname);
const headers = {
'X-API-Key': '<YOUR API KEY HERE>',
'Accept': '*/*'
};
// Send the file to the Verisys Antivirus API
const response = await fetch('', {
method: "POST",
body: form,
headers: headers
});
// Did we get a response from the API?
if (response.ok) {
const result = await response.json();
// Did the file contain a virus/malware?
if (result.status === 'clean') {
return res.send('Uploaded file is clean!');
} else {
return res.status(500).send(`Uploaded file contained malware: <b>${result.signals[0]}</b>`);
}
} else {
throw new Error('Unable to scan file: ' + response.statusText);
}
} catch (error) {
// Delete the uploaded file
fs.rm(uploadedFile.path, () => {});
// Forward the error to the Express error handler
return next(error);
}
});
module.exports = router;
As with the /upload handler, this new /scan handler will print information about the file to the console, so you can see what has been received by your route handler. It then uploads the file to Verisys Antivirus API to scan it for malware.
Next, we need to wire up this code to the /scan route.
- Update the content of myapp/app.js to contain the following:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload');
var scanRouter = require('./routes/scan');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter);
app.use('/scan', scanRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
We’ve only added two lines to the previous code (lines #10 and #27 above), telling Express to use our scan.js router for the /scan route.
Testing Malware Scanning
Now we’re ready to test malware scanning! ?
- Begin by starting your Node.js server using the same command as before
- Open your browser and navigate to - you should see a page that looks like this:
- Use the Malware Scan form, Browse to select a file and press the Scan File button
If everything was set up correctly, as before you should see information about the file being printed to the console, but you should also see a response from :
Code for this tutorial can be found on :