Node Js Multer Multiple Image File Upload Tutorial

Node Multiple image upload tutorial; In this comprehensive guide, we will explain how to create multiple image file upload components in the Node js application using express js and multer middleware.

Building application in a node environment is fun and easy, and it evades cumbersomeness from developers’ life.

We have plenty of features to discuss about node js. However, we are going to share one of the most used functionalities, which is multiple file upload in Node js.

File uploading is a common feature primarily developed to upload images onto the server.

This quick node express multiple image upload example will show detailed information on building the functionality. Let us look at why we need to use express and multer packages.

Express js is a free open source framework for node js that helps create flawless yet profound web applications.

On the other hand, Multer is a popular module exclusively built for node js. It is a middleware that allows handling multipart/form-data, mainly used for uploading files.

How to Create Multiple Image File Upload in Node Js with Express / Multer

  • Step 1: Set Up Node Project
  • Step 2: Install External Dependencies
  • Step 3: Create File Upload View
  • Step 4: Create Node Server
  • Step 5: Run Application

Set Up Node Project

To set up the new node application, create an empty directory.

mkdir node-demo

Next, step inside the project folder using given command:

cd node-demo

Now, you have to create the package.json file and you can create it by using the following command.

npm init

Furthermore, you have to create the server.js file, and don’t forget to add it in the package.json file.

{
  "main": "server.js",
}

Install External Dependencies

We require a couple of external packages to build the file upload feature in the node; therefore, go ahead and install the following packages.

npm install express multer

To run the app install the nodemon module:

npm install nodemon --save-dev

Create File Upload View

In the next step, create a ‘public’ folder, then create index.html file inside the folder.

Next, open the index file and add the code into the public/index.html file.

To create the file upload component we are using Bootstrap 5 CDN library.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Node Multiple Image File Upload Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container mt-5">
      <h2 class="mb-3">Node Multiple Image File Upload Example</h2>
      <form action="/" enctype="multipart/form-data" method="post">
        <div class="mb-3">
          <input
            class="form-control"
            type="file"
            id="formFile"
            name="imgFiles"
            accept="image/*"
            multiple
          />
        </div>
        <div class="d-grid">
          <input type="submit" class="btn btn-primary" value="Store" />
        </div>
      </form>
    </div>
  </body>
</html>

Create Node Server

In this section, you have to go to the server.js file; first, in this file, import the express, multer and path modules.

Define the multer methods to access the disk storage method; the uploaded files are stored in the uploads directory.

Therefore make sure to create the ‘uploads’ folder at the root of your project.

Create the two endpoints; one for showing the view file and another for making the post request.

Lastly, define the application port.

const express = require('express')
const multer = require('multer')
const path = require('path')

const app = express()

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },

  filename: function (req, file, cb) {
    cb(
      null,
      file.fieldname + '-' + Date.now() + path.extname(file.originalname),
    )
  },
})

const upload = multer({ storage: storage })

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html')
})

app.post('/', upload.array('imgFiles'), (req, res) => {
  res.redirect('/')
})

app.listen(4000)

Run Application

At last, add the following command onto the command prompt and invoke the command to run the node app.

nodemon

You have to use the provided url to test the multiple file upload in node js:

http://localhost:4000

Here is how the node file upload component will appear on the web page:

Node Js Multer Multiple Image File Upload Tutorial