Resize image before upload using multer, sharp in node js express. In this tutorial, you will learn how to resize image before upload using multer, sharp in node js express.
Image upload is the basic requirement of any application. So this example will guide you step by step on how to resize image before upload using multer in node js. And you can understand a concept of node js compress image before upload.
Node JS Express Resize Image Before Upload Tutorial Example
Let’s follow the following steps to resize image file before upload in node js express app:
- Step 1 – Create Node JS App
- Step 2 – Install Express and Multer Modules
- Step 3 – Create Server.js File and Import Modules
- Step 4 – Create Image Upload Form
- Step 5 – Start Server
In this step, open your terminal and execute the following command to create node js app:
mkdir my-app cd my-app npm init -y
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 – Create Server.js File
In this step, you need to create server.js file and import the above install modules in it; as shown below:
const express = require('express');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');
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.single('image'),async (req, res) => {
const { filename: image } = req.file;
await sharp(req.file.path)
.resize(200, 200)
.jpeg({ quality: 90 })
.toFile(
path.resolve(req.file.destination,'resized',image)
)
fs.unlinkSync(req.file.path)
res.redirect('/');
});
app.listen(3000);
Step 4 – Create Image Upload 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 Resize Image Before 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 Resize Image Before Upload using Multer Example - tutsmake.com</h1>
<form action="/" enctype="multipart/form-data" method="post">
<input type="file" name="image" accept='image/*'>
<input type="submit" value="Upload">
</form>
</body>
</html>
Click to know more about the express.
Step 5 – Start Server
Execute the following command on terminal to start node js express crop and resize image before upload 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 resize or compress image before upload in node js express framework.
