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 ?

Check [this](https://stackoverflow.com/questions/46716730/how-to-check-an-image-dimensions-using-js-or-node/46716800#46716800) out. — kgangadhar, Feb 17 '18 at 15:04
This example shows how to get the dimensions of a picture which is already saved server-side. I'm trying to get those information before to save the picture in my server. Is there a possible way to do that or am I obliged to save the file in the server before to get the dimensions ? — palmtreesnative, Feb 17 '18 at 15:08
https://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload — Molda, Feb 17 '18 at 15:26

score 3 · Accepted Answer · answered Feb 18 '18 at 10:49

3

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

answered Feb 18 '18 at 10:49

palmtreesnative

2,835
3
14
22

Aman Kumar Gupta · Answer 2 · 2019-09-17T19:59:00.823

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!

In the provided code their is no connection of multer, Multer will upload the picture in your provided directory, after which you can check the dimension of uploaded image by providing the file path(which you can extract from req.file.path say) and then if your dimension gets violated thereafter you can remove that image but if everything goes well as required you can proceed on. This is basically a approach for the case of violating the dimension rule. You can use other different approaches as well But this can might help you Thanks! — Aman Kumar Gupta, Apr 25 '20 at 15:09

Get picture dimensions with Multer

2 Answers2

Linked