Node JS Resize Image Before Upload using Multer Sharp

By Hardik Savani March 24, 2021 Category : Node JS

Hi dev,

In this quick example, let's see node js resize image before upload multer. you can understand a concept of node js compress image before upload. we will help you to give example of node.js image uploading with multer. This article goes in detailed on node js multer sharp resize image. you will do the following things for nodejs sharp resize image example.

I will give you step by step simple example of how to resize image before upload using multer, sharp with node js and express js. this example we will simple upload image and resize with 200X200 and quality will be 90%. let's follow bellow steps:

Preview:

Step 1: Create Node App

run bellow command and create node app.

mkdir my-app
cd my-app
npm init

Step 2: Install express and multer

run bellow command and create node app.

npm install express multer --save
npm install sharp --save

Read Also: Crop, Resize, Frames etc on Selected Image in PHP using Aviary

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 - ItSolutionStuff.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 - ItSolutionStuff.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>

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

now you can simply run by following command:

npm start

open following url:

Read Also: Multiple File Upload in Node JS using Multer Example
localhost:3000

i hope it can help you...

Tags :
Previous

Multiple File Upload in Node JS using Multer Example
Next

Node JS Convert Image File to Base64 String Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares