Node js Multiple Image Upload using Multer Example

To upload multiple image in node js using multer express js. In this tutorial; i am going to show you how to upload multiple images in node js using multer, sharp and express js.

Multiple image upload allows the user to select multiple files at once and upload all files to the server. index. html Create a simple HTML page to select multiple files and submit it to upload files on the server. Here, the HTML file contains a form to select and upload files using the POST method.

In this tutorial; i will create html markup for for upload multiple images/files and then create routes for display mulitiple image upload form and store image into node js app directory using multer sharp modules.

How to Upload Multiple Image in Node js Expres using Multer

  • Step 1 – Create Node JS App
  • Step 2 – Install Express and Multer Modules
  • Step 3 – Create Server.js File and Import Modules into it
  • Step 4 – Create Routes
  • Step 5 – Create Multiple Image Upload Form
  • Step 6 – Start App Server

Step 1 – Create Node JS App

Execute the following command on terminal to create node js app:

mkdir my-app
cd my-app
npm init

Step 2 – Install Express and Multer Modules

Install required node js modules; So execute the following command to install express and multer dependencies in your node js app:

npm install express multer --save
npm install sharp --save

Step 3 – Create Server.js File and Import Modules into it

Create server.js file; and import above installed node js modules into it; as shown below:

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

Step 4 – Create Routes

Create routes for multiple image upload; so open your server.js file and add the following routes into it:

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));
    }
});
  
var upload = multer({ storage: storage })
  
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
  
app.post('/', upload.array('multi-files'), (req, res) => {
  res.redirect('/');
});
  
app.listen(3000);

Step 5 – Create Multiple Image Upload Form

Create index.html file; add the following html markup code for multiple image upload form:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node js Express Multiple Image Upload using Multer Example - Laratutorials.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1>Node js Express Multiple Image Upload using Multer Example - Laratutorials.com</h1>
    <form action="/" enctype="multipart/form-data" method="post">
      <input type="file" name="multi-files" accept='image/*' multiple>
      <input type="submit" value="Upload">
    </form>  
  </body>
</html>

Step 6 – Start App Server

Execute the following on terminal to start app server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Conclusion

Node js multiple image upload using multer, sharp and express js. In this tutorial, you have learned how to upload multiple images using multer, sharp and express js.

Recommended Node JS Tutorials

Leave a Comment