Upload and resize Image In Node js using Multer

Node js + Express + resize image before upload. In this tutorial, i am going to show you how to resize image before upload using multer, sharp in node js + express js.

Node js + Express Resize Image Before Upload

Follow the below given step to resize image before upload to directory/folder in Node js + express js:

  • Step 1 – Create Node JS App
  • Step 2 – Install Express and Multer Dependencies
  • Step 3 – Create Server.js File
    • Import Installed Dependencies
    • Configure Multer Package
    • Create Image File Upload Routes
  • Step 4 – Create Image/File Upload Form
  • Step 5 – Start App Development Server

Step 1 – Create Node JS App

Execute the following command on terminal or command prompt to create node js app:

mkdir my-app
cd my-app
npm init

Step 2 – Install Express and Multer Dependencies

Execute the following command to install express and multer dependencies in your node js app:

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

Step 3 – Create Server.js File

Create server.js file , So go to your app root directory and create it.

Import Dependencies in Server.js File

Import above dependencies in server.js file:

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

Configure Multer Package

Configure multer package to store files into directory:

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 })

Create Image File Upload Routes

Create image file upload routes:

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('/');
});

Complete code of server.js file:

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 Image/File Upload Form

Create index.html file to resize image before upload in node js app. So, add the following html code into it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node js Resize Image Before Upload using Multer Example - Laratutorials
.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 - Laratutorials.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 5 – Start App Development Server

You can use the following command to run development server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Conclusion

Node js resize image before upload; In this tutorial, you have learned how to resize or compress image before upload in node js express framework.

Recommended Node JS Tutorials

Leave a Comment