Node js Express Multiple Image Upload using Multer Tutorial

Node js Express Multiple Image Upload using Multer Tutorial

Node js multiple image upload using multer, sharp and express js. In this node js tutorial, you will learn how to upload multiple images using multer, sharp and express js.

Image upload is the basic requirement of any application. So this example will guide you step by step on how to upload multiple images using multer. And you can understand a concept of multiple image upload.

Node js Express Multiple Image Upload using Multer Example

Step 1 – Create Node JS App

In this step, open your terminal and execute the following command to create node js app:

mkdir my-app
cd my-app
npm init

Step 2 – Install Express and Multer Dependencies

In this step, open again your terminal and 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 – Import Dependencies in Server.js File

In this step, you need to import dependencies in server.js file:

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

Step 4 – Create Server.js File

In this step, you need to create server.js file and add the following code 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 Form

In this step, create index.html file to resize image before upload in node js app. So, add the following html code into it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node js Express Multiple Image Upload using Multer Example - Tutsmake.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 - Tutsmake.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>

Click to know more about the express.

Step 6 – Run Development Server

You can use the following command to run development server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Conclusion

In this tutorial, you have learned how to upload multiple images in node js using multer.

Recommended Node JS Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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