Node JS Resize Image Before Upload using Multer Sharp

About Us:

We are from free coder. We are a group of web developers who are passionate about web development. You can learn from us php, laravel, node js, vue js, react js and many other topic on web developement.
we are very happy to help you.
free coder

Today what you are going to learn:

Hello Brother,

In this quick lesson 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 lesson 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 lesson.

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

Lesson 1: Create Node App

run bellow command and create node app.

mkdir my-app

cd my-app

npm init

Lesson 2: Install express and multer

run bellow command and create node app.

npm install express multer --save

npm install sharp --save

Lesson 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);

Lesson 4: Create index.html file

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Node js Resize Image Before Upload using Multer Lesson - 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 Lesson - 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:

localhost:3000

thank you very much for following up with me.

Tags

Recent Posts

Related Posts