Node JS Resize Image Upload Using Multer Sharp With Example

Resize image upload using multer, node js, and express js. In this tutorial, we learn node js resize an image using multer, sharp with node js, and express js. we learn javascript resizing images.

Image upload is the basic requirement of any project. So this example will guide you step by step on how to upload multiple images using multer Express js Framework. And you can understand the concept of multiple image uploads easily to use.

Node JS Resize Image Upload Using Multer Sharp With Example

Step 1 – Create Node JS App

In this step, open your terminal and execute the following command to create node js app:

npm init -y

Step 2 – Install Express and Multer Dependencies

In this step, open your terminal and execute the following command to install express and multer dependencies in using node.js image resizing your node js app:

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

Step 3 – Import Dependencies in Server.js File

In this step, you need to import dependencies in server.js file:

const express = require('express');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');

Step 4 – Create Server.js File

In this step, you need to create a server.js file and add javascript resizing images using multer following code into it:

const express = require('express');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');
const app = express();
const port = 3000
   
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(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Step 5 – Create Form

In this step, We learn node js resize image then create an index.html file to resize an image before upload in the node js app. So, add the following HTML code into it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node JS Resize Image Upload Using Multer Sharp With Example - phpcodingstuff.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <h1>Node JS Resize Image Upload Using Multer Sharp With Example - phpcodingstuff.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>

Step 6 – Run Development Server

You can use the following command to run the development 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 Node JS Resize Image Upload Using Multer Sharp With node js express framework.

I hope it can help you...

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.