Uploading multiple image files to a Node Express JS application is made easy by the Multer module, simply install Multer in your Node Express project and then use it’s methods, which allows you to instantly upload or save multiple image files to your project folder or directory.
To upload multiple image files using multer in node js express js. In this tutorial guide, you will learn how to upload multiple image file using multer, sharp and express js.
How to Upload Multiple Image Files Using Multer in Node Express JS
Steps to upload multiple image files using multer in node express js:
Step 1 – Create Node JS App
Open your cmd or terminal window and run the following commands into it to create node js app:
mkdir my-app cd my-app npm init -y mkdir uploads
Step 2 – Install Express and Multer Modules
To install express and multer modules by running the following command on cmd or terminal window:
npm install express multer --save npm install sharp --save
Step 3 – Create Server.js File and Import Modules
Navigate to your node express js app root directory and create server.js file, and then import express, multer path modules into it; like the following:
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.listen(3000);
Step 4 – Create Routes For Upload Multiple File
Creating a route to show multiple image file upload form and uploading it to node express js application folder with the help of multer module. Simply create it like the following and import it into the server.js file:
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/m-uploads', upload.array('multi-files'), (req, res) => {
res.send('Multiple Image Files has uploaded successfully!')
});
Step 5 – Create Multiple Image File Upload Form
To create index.html file in node express app to show multiple image file upload form, and simply 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="/m-uploads" 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 Node Express Js App Server
Run the npm start on cmd or terminal window to start development server:
//run the below command npm start after run this command open your browser and hit http://127.0.0.1:3000/
Conclusion
That’s all; you have learned how to upload multiple image file in node js using multer.
this is awesome blog for understanding in shortly