Node.js Image Upload, Processing and Resizing using Sharp package

08 Oct, 2021
Often in our web applications, we need to store multiple forms and formats of images, in the form of a profile picture or an image for a product in an e-commerce prototype. In most of our cases, we need to store images compressed to multiple sizes, retaining the quality. For example, for a product at an e-commerce site, we would require storing 3 versions of a product image:
Thumbnail
Low resolution for previews, etc.
The original high resolution for the actual product.
Prerequisites:
Node.js basics
Routes handling in express.js
Modules used: sharp, Multer
According to the official npm documentation, The typical use case for sharp is to convert large images in common formats to smaller, web-friendly JPEG, PNG, and WebP images of varying dimensions.
Initialize npm in an empty directory to begin with the following command:
npm init -y
Install the required modules with the following command:
npm install express --save
npm install body-parser --save
npm install sharp --save
npm install multer --save

Multer setup:To upload files, we need to configure multer as a middleware to be passed. To set up multer, we need to add the following code to our application.
Note: For additional usage and to know more about uploads and multer, you can refer the official documentation at Multer
// Importing the moduleconst multer = require('multer');    // Setting up a middleware specifying the// destination for storing the imagesconst upload = multer({dest : './images'})   
Since multer works with form-data, you need to ensure the upload is via a form with configuration as multipart/form-data.
Filename: app.js
// Importing the required modulesvar express = require('express');var bodyparser = require('body-parser');var fs = require('fs');var multer = require('multer');var sharp = require('sharp');  var upload = multer({dest : './images'})   // Initialize the express objectvar app = express();       // Use body-parser to parse incoming dataapp.use(bodyparser.urlencoded({extended : true}))       // Use the upload middleware containing // our file configuration, with the name// of input file attribute as "avatar"// to the desired configuration.  app.post('/upload', upload.single("avatar"), (req, res)=>{    fs.rename(req.file.path, './images/avatar.jpg', (err)=>{        console.log(err);    })      return res.json("File Uploaded Successfully!");});  app.listen(3000, ()=>{    console.log("Server Running!")})
Steps to run above code:
Run app.js file using the following command:node app.jsAfter executing above command, you will see the following output:Server Running!Send a POST request to https://localhost:3000/upload using Postman. You need to pass “avatar” as KEY and picture as VALUE.After hitting the request, an image directory will be created with our desired image.
Run app.js file using the following command:node app.jsAfter executing above command, you will see the following output:Server Running!
node app.js
After executing above command, you will see the following output:
Server Running!
Send a POST request to https://localhost:3000/upload using Postman. You need to pass “avatar” as KEY and picture as VALUE.
After hitting the request, an image directory will be created with our desired image.
Processing Image using Sharp: We will be processing images via a sharp package. To create multiple instances with different properties, we use the following code:
// Configuring thumbnail imagesharp(__dirname + '/images/avatar.jpg').resize(200,200).jpeg({quality : 50}).toFile(__dirname         + '/images/avatar_thumb.jpg');  // Configuring Preview Imagesharp(__dirname + '/images/avatar.jpg').resize(640,480).jpeg({quality : 80}).toFile(__dirname         + '/images/avatar_preview.jpg');
So all things are set, final app.js will be as following:Filename: app.js
var express = require('express');var bodyparser = require('body-parser');var fs = require('fs');var multer = require('multer');var sharp = require('sharp');  var upload = multer({dest : './images'})   var app = express();     app.use(bodyparser.urlencoded({extended : true}))    app.post('/upload', upload.single("avatar"), (req, res)=>{    fs.rename(req.file.path, './images/avatar.jpg', (err)=>{        console.log(err);    })      sharp(__dirname + '/images/avatar.jpg').resize(200,200)    .jpeg({quality : 50}).toFile(__dirname         + '/images/avatar_thumb.jpg');        sharp(__dirname + '/images/avatar.jpg').resize(640,480)    .jpeg({quality : 80}).toFile(__dirname         + '/images/avatar_preview.jpg');      return res.json("File Uploaded Successfully!");});  app.listen(3000, ()=>{    console.log("Server Running!")})
Upon running the server and sending the same request as before, you will get your all uploaded images in the image directory with the desired configuration as shown below:
Additional Sharp Options: https://sharp.pixelplumbing.com/
Image-Processing
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between promise and async await in Node.js
Mongoose | findByIdAndUpdate() Function
JWT Authentication with Node.js
Installation of Node.js on Windows
Difference between dependencies, devDependencies and peerDependencies
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React