Get picture dimensions with Multer

Question

Is there any way to get dimensions of a picture before to upload it with Multer on Node.Js ?

I have an application which get pictures from a form and upload them in a repertory. What I'd like to do is to stop the picture upload if this one's width and height are under 300px.

Here's the Node.Js server app

app.post("/upload", function (req, res, fields) {

    const storage = multer.diskStorage({
      destination: "public/data/",
      filename: function (req, file, cb) {
        crypto.randomBytes(30, (err, buf) => {
          cb(null, buf.toString("hex") + path.extname(file.originalname))
        })
      }
    });

    const upload = multer({
      storage: storage
    }).fields([{
      name: "pp"
    }, {
      name: "banner"
    }]);

    upload(req, res, (err) => {
      if (err) throw err;
      if (req.files.pp) {
        var PPsrc = req.files.pp[0].path.slice(7);
        var hasPP = 1;
      } else {
        var PPsrc = null;
        var hasPP = 0;
      }
      if (req.files.banner) {
        var Bannersrc = req.files.banner[0].path.slice(7);
        var hasBanner = 1;
      } else {
        var Bannersrc = null;
        var hasBanner = 0;
      }

      con.query("SQL Request", [hasPP, PPsrc, hasBanner, Bannersrc, sess.email], function (err) {
        if (err) throw err;
        console.log("Profile Picture and banner updated for user: " + sess.email);
        res.redirect("/profile");
      });
    }); 
  })

And my form:

<form action="/upload" enctype="multipart/form-data" method="post">
          <label for="pp_uploader">Add a profile picture</label>
          <input type="file" id="pp_uploader" name="pp" accept="image/jpeg, image/jpg"/><br>
          <label for="banner_uploader">Add a Banner</label>
          <input type="file" id="banner_uploader" name="banner" /><br>
          <input class="sbutton" type="submit" value="Envoyer" />
        </form>

Is there any way to do it with the npm package ?

Answer 1

First of all to get the dimensions of image install this npm package

npm install image-size --save

Synchronous Code :

var sizeOf = require('image-size');
var dimensions = sizeOf('someimage.png'); // replace with your image
console.log(dimensions.width, dimensions.height);

Asynchronous Code :

var { promisify } = require('util');
var sizeOf = promisify(require('image-size'));
sizeOf('someimage.png')
  .then(dimensions => { console.log(dimensions.width, dimensions.height); })
  .catch(err => console.error(err));

you can use either approach that are mentioned above

now firstly store your incoming image in your repository that is coming from multer then if your required dimensions gets violated as you mentioned(dimensions.width < 300 && dimensions.height < 300) their after remove stored picture from repository , but if dimensions matched according to your size then let the picture be in the repo.

code to remove image from repository

const path = require("path");
const fs = require("fs");

const clearImage = filePath => {
  filePath = path.join(__dirname, "../images/", filePath);
  fs.unlink(filePath, err => {
    console.log(err);
  });
};

Note : Second parameter of path.join method will be your path where your picture stored.

Hope this will help to someone!

Answer 2

I finally place my pictures in a tmp folder before to get their dimensions.