In this tutorial guide, you will learn how to upload multiple files using Multer and sharp in node js express js.
How to Upload Multiple Files Using Multer in Node Express JS
Here are steps:
Step 1 – Set Up Node Js Application
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 – Test This Application
Run the npm start on cmd to start application server:
//run the below command
npm start
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