We will learn how to Resize Image Before Upload using Multer Sharp


Step 1: 

Create Node App 

mkdir my-app

cd my-app

npm init


Step 2: 

Install express and multer

npm install express multer --save

npm install sharp --save


Step 3: 

Create app.js file app.js

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 index.html file index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node js Resize Image Before Upload using Multer Example - rathorji.in</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 - rathorji.in</h1>
    <form action="/" enctype="multipart/form-data" method="post">
      <input type="file" name="image" accept='image/*'>
      <input type="submit" value="Upload">
    </form>  
  </body>
</html>


make sure you have to create "uploads/resized" directory

 run the following command

npm start


open following url: 

localhost:3000

May this help you