How to Upload Images in Node.js Using Multer

There are three main ways of handling file uploads in Node.js: saving the images directly to your server, saving the image’s binary data or base64 string data to your database, and using Amazon Web Service (AWS) S3 buckets to save and manage your images.

Here you will learn how to use Multer, a Node.js middleware, to upload and save images directly to your server in Node.js applications in a few steps.

Step 1: Setting Up Development Environment

The code used in this project is available in a GitHub repository and is free for you to use under the MIT license.

First, create a project folder and move into it by running the following command:

 mkdir multer-tutorial
cd multer-tutorial

Next, initialize npm in your project directory by running:

 npm init -y

Next, you will need to install some dependencies. The dependencies required for this tutorial include:

  • Express: Express is a Node.js framework that provides a robust set of features for web and mobile applications. It makes it easier to build backend applications with Node.js.
  • Multer: Multer is an express middleware that simplifies uploading and saving images to your server.

Install the packages with the node package manager by running:

 npm install express multer

Next, create an app.js file in your project’s root directory and add the code block below to create a basic Express server:

const express = require('express');
const app = express();

const port = process.env.PORT || 3000;

app.listen(port, ()=>{
    console.log(`App is listening on port ${port}`);

Step 2: Configuring Multer

First, import multer in your app.js file.

 const multer = require("multer");

multer requires a storage engine that contains information about the directory where the uploaded files will be stored and how the files will be named.

A multer storage engine is created by calling the diskStorage method on the imported multer module. This method returns a StorageEngine implementation configured to store files on the local file system.

It takes a configuration object with two properties: destination, which is a string or function that specifies where the uploaded images will be stored.

The second property, filename, is a function that determines the uploaded files’ names. It takes three parameters: req, file, and a callback (cb). req is the Express Request object, file is an object containing information about the processed file, and cb is a callback that determines the uploaded files’ names. The callback function takes error and filename as arguments.

Add the code block below to your app.js file to create a storage engine:

const storageEngine = multer.diskStorage({
  destination: "./images",
  filename: (req, file, cb) => {
    cb(null, `${}--${file.originalname}`);

In the code block above, you set the destination property to ”./images”, thus, the images will be stored in your project’s directory in an images folder. Then, in the callback, you passed null as the error and a template string as the file name. The template string consists of a timestamp generated by calling to ensure that the image names are always unique, two hyphens to separate the filename and the timestamp, and the file’s original name, which can be accessed from the file object.

The resulting strings from this template will look like this: 1663080276614–example.jpg.

Next, you need to initialize multer with the storage engine.

Add the code block below to your app.js file to initialize multer with the storage engine:

const upload = multer({
  storage: storageEngine,

multer returns a Multer instance that provides several methods for generating middleware that processes files uploaded in multipart/form-data format.

In the code block above, you pass a configuration object with a storage property set to storageEngine, which is the storage engine you created earlier.

Currently, your Multer configuration is complete, but there are no validation rules that ensure that only images can be saved on your server.

Step 3: Adding Image Validation Rules

The first validation rule you can add is the maximum size allowed for an image to be uploaded to your application.

Update your multer configuration object with the below code block:

 const upload = multer({
  storage: storageEngine,
  limits: { fileSize: 1000000 },

In the code block above, you added a limits property to the configuration object. This property is an object that specifies various limits on incoming data. You set the fileSize property, with which the max file size in bytes is set to 1000000, which is equivalent to 1MB.

Another validation rule you can add is the fileFilter property, an optional function to control which files are uploaded. This function is called for every file that is processed. This function takes the same parameters as the filename function: req, file, and cb.

To make your code cleaner and more reusable, you’ll abstract all the filtering logic into a function.

Add the code block below to your app.js file to implement the file filtering logic:

 const path = require("path");

const checkFileType = function (file, cb) {
  const fileTypes = /jpeg|jpg|png|gif|svg/;

  //check extension names
  const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());

  const mimeType = fileTypes.test(file.mimetype);

  if (mimeType && extName) {
    return cb(null, true);
  } else {
    cb("Error: You can Only Upload Images!!");

The checkFileType function takes two parameters: file and cb.

In the code block above, you defined a fileTypes variable that stores a regex expression with the allowed image file extensions. Next, you called the test method on the regex expression.

The test method checks for a match in the passed string and returns true or false depending on whether it finds a match. Then, you pass the uploaded file name, which you can access through file.originalname, into the path’s module extname method, which returns the extension of the string path to it. Finally, you chain the JavaScript toLowerCase string function to the expression to handle images with their extension names in uppercase.

Checking the extension name alone is not enough, as extension names can be easily edited. To ensure that only images are uploaded, you have to check the MIME type too. You can access a file’s mimetype property through the file.mimetype. So, you check for the mimetype property using the test method as you did for the extension names.

If the two conditions return true, you return the callback with null and true, or you return the callback with an error.

Finally, you add the fileFilter property to your multer configuration.

 const upload = multer({
  storage: storageEngine,
  limits: { fileSize: 10000000 },
  fileFilter: (req, file, cb) => {
    checkFileType(file, cb);

Step 4: Using Multer as an Express Middleware

Next, you have to implement route handlers that’ll handle the image uploads.

Multer can handle both single and multiple image uploads depending on the configuration.

Add the code block below to your app.js file to create a route handler for single image uploads:"/single", upload.single("image"), (req, res) => {
  if (req.file) {
    res.send("Single file uploaded successfully");
  } else {
    res.status(400).send("Please upload a valid image");

In the code block above, you called the single method on the upload variable, which stores your multer configuration. This method returns a middleware that processes a “single file” associated with the given form field. Then, you passed the image as the form field.

Finally, check if a file was uploaded through the req object in the file property. If it was, you send a success message, else you send an error message.

Add the code block below to your app.js file to create a route handler for multiple image uploads:"/multiple", upload.array("images", 5), (req, res) => {
  if (req.files) {
    res.send("Muliple files uploaded successfully");
  } else {
    res.status(400).send("Please upload a valid images");

In the code block above, you called the array method on the upload variable, which stores your multer configuration. This method takes two arguments—a field name and a max count—and returns middleware that processes multiple files sharing the same field name. Then, you passed images as the shared form field and 5 as the maximum number of images that can be uploaded at once.

Advantages of Using Multer

Using Multer in your Node.js applications simplifies the otherwise complicated process of uploading and saving images directly on your server. Multer is also based on busboy, a Node.js module for parsing incoming form data, making it very efficient for parsing form data.

Source link


Leave a Reply

Your email address will not be published. Required fields are marked *