# multer-sharp-resizer

> Resize image with node.js, multer.js and sharp.js

Latest version **1.0.5** (published 2022-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install multer-sharp-resizer
pnpm add multer-sharp-resizer
yarn add multer-sharp-resizer
bun add multer-sharp-resizer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-11-15 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.1 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Mohammad Oftadeh |
| Maintainers | mohammadoftadeh |
| Keywords | resize, node.js, sharp.js, multer.js, resize image with node.js, multer.js and sharp.js  |

## Links

- npm: https://www.npmjs.com/package/multer-sharp-resizer
- Repository: https://github.com/mohammadoftadeh/multer-sharp-resizer
- Issues: https://github.com/mohammadoftadeh/multer-sharp-resizer/issues
- npm.io page: https://npm.io/package/multer-sharp-resizer

## Dependencies (2)

- [sharp](https://npm.io/package/sharp.md) ^0.31.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2022-11-15
- 1.0.4 — 2020-06-22
- 1.0.3 — 2020-06-20
- 1.0.2 — 2020-06-02
- 1.0.1 — 2020-06-01
- 1.0.0 — 2020-06-01

## README

# multer-sharp-resizer

[Multer-sharp-resizer](https://www.npmjs.com/package/multer-sharp-resizer) is a package for Resizing single/multiple images with node.js, express.js, multer.js [Multer documentation](https://www.npmjs.com/package/multer) and sharp.js [sharp documentation](https://www.npmjs.com/package/sharp).

> **Multer-sharp-resizer:** Resize one image or multiple images to multiple sizes with node.js, express.js, multer.js

# Documentation

[![Node.js uploading image with multer and multer-sharp-resizer](https://github.com/mohammadoftadeh/repo-assets/blob/main/multer-sharp-resizer(nodejs%20upload).png?raw=true)](https://youtu.be/lgm5MfOFeLM)

# Installation

npm:

```
$ npm i multer multer-sharp-resizer
```

yarn:

```
$ yarn add multer multer-sharp-resizer
```

# Usage

```javascript
const express = require("express");
const multer = require("multer");
const MulterSharpResizer = require("multer-sharp-resizer");

    ...

    const today = new Date();
    const year = today.getFullYear();
    const month = `${today.getMonth() + 1}`.padStart(2, "0");

    const filename = `gallery-${Date.now()}`;

    const sizes = [
      {
        path: "original",
        width: null,
        height: null,
      },
      {
        path: "large",
        width: 800,
        height: 800,
      },
      {
        path: "medium",
        width: 300,
        height: 300,
      },
      {
        path: "thumbnail",
        width: 100,
        height: 100,
      },
    ];

    const uploadPath = `./public/uploads/${year}/${month}`;

    const fileUrl = `${req.protocol}://${req.get(
      "host"
    )}/uploads/${year}/${month}`;

    // sharp options
    const sharpOptions = {
      fit: "contain",
      background: { r: 255, g: 255, b: 255 },
    };

    // create a new instance of MulterSharpResizer and pass params
    const resizeObj = new MulterSharpResizer(
      req,
      filename,
      sizes,
      uploadPath,
      fileUrl,
      sharpOptions
    );

    // call resize method for resizing files
    await resizeObj.resize();

    // get details of uploaded files
    const images = resizeObj.getData();

    ....
```

#### example for uploading multiple/single images:

```javascript
const express = require("express");
const app = express();
const multer = require("multer");
const MulterSharpResizer = require("multer-sharp-resizer");

app.use(express.static(`${__dirname}/public`));
app.use(express.json());

const multerStorage = multer.memoryStorage();

// Filter files with multer
const multerFilter = (req, file, cb) => {
  if (file.mimetype.startsWith("image")) {
    cb(null, true);
  } else {
    cb("Not an image! Please upload only images.", false);
  }
};

const upload = multer({
  storage: multerStorage,
  fileFilter: multerFilter,
});

// *****  Multer .fields() *****
const uploadProductImages = upload.fields([
  { name: "cover", maxCount: 2 },
  { name: "gallery", maxCount: 4 },
]);

// *****  Multer .array() *****
// const uploadProductImages = upload.array("gallery", 4);

// *****  Multer .single() *****
// const uploadProductImages = upload.single("cover");

const resizerImages = async (req, res, next) => {
  const today = new Date();
  const year = today.getFullYear();
  const month = `${today.getMonth() + 1}`.padStart(2, "0");

  // Used by multer .array() or .single
  // const filename = `gallery-${Date.now()}`;

  // Used by multer .fields and filename must be same object prop
  const filename = {
    cover: `cover-${Date.now()}`,
    gallery: `gallery-${Date.now()}`,
  };

  const sizes = [
    {
      path: "original",
      width: null,
      height: null,
    },
    {
      path: "large",
      width: 800,
      height: 950,
    },
    {
      path: "medium",
      width: 300,
      height: 450,
    },
    {
      path: "thumbnail",
      width: 100,
      height: 250,
    },
  ];

  const uploadPath = `./public/uploads/${year}/${month}`;

  const fileUrl = `${req.protocol}://${req.get(
    "host"
  )}/uploads/${year}/${month}`;

  // sharp options
  const sharpOptions = {
    fit: "contain",
    background: { r: 255, g: 255, b: 255 },
  };

  // create a new instance of MulterSharpResizer and pass params
  const resizeObj = new MulterSharpResizer(
    req,
    filename,
    sizes,
    uploadPath,
    fileUrl,
    sharpOptions
  );

  // call resize method for resizing files
  await resizeObj.resize();
  const getDataUploaded = resizeObj.getData();

  // Get details of uploaded files: Used by multer fields
  req.body.cover = getDataUploaded.cover;
  req.body.gallery = getDataUploaded.gallery;

  // Get details of uploaded files: Used by multer .array() or .single()
  // req.body.cover = getDataUploaded;
  // req.body.gallery = getDataUploaded;

  next();
};

const createProduct = async (req, res, next) => {
  res.status(201).json({
    status: "success",
    cover: req.body.cover,
    gallery: req.body.gallery,
  });
};

// route for see results of uploaded images
app.post("/products", uploadProductImages, resizerImages, createProduct);

const port = 8000;
app.listen(port, () => console.log(`app running on port ${port}...`));
```

### Outputs of above examples:

```json
// example uploading multiple files
// result: uploaded multiple images with resizing
{
    "status": "success",
    "data": {
        "gallery": [
            {
                "originalname": "kal-visuals-b1Hg7QI-zcc-unsplash.jpg",
                "original": {
                    "filename": "gallery-1590999763786-0-original.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/original/gallery-1590999763786-0-original.jpeg"
                },
                "large": {
                    "filename": "gallery-1590999763786-0-large.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/large/gallery-1590999763786-0-large.jpeg"
                },
                "medium": {
                    "filename": "gallery-1590999763786-0-medium.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/medium/gallery-1590999763786-0-medium.jpeg"
                },
                "thumbnail": {
                    "filename": "gallery-1590999763786-0-thumbnail.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/thumbnail/gallery-1590999763786-0-thumbnail.jpeg"
                }
            },
            {
                "originalname": "lesly-juarez-RukI4qZGlQs-unsplash.jpg",
                "original": {
                    "filename": "gallery-1590999763786-1-original.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/original/gallery-1590999763786-1-original.jpeg"
                },
                "large": {
                    "filename": "gallery-1590999763786-1-large.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/large/gallery-1590999763786-1-large.jpeg"
                },
                "medium": {
                    "filename": "gallery-1590999763786-1-medium.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/medium/gallery-1590999763786-1-medium.jpeg"
                },
                "thumbnail": {
                    "filename": "gallery-1590999763786-1-thumbnail.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/thumbnail/gallery-1590999763786-1-thumbnail.jpeg"
                }
            },
            ....
        ]
    }
}

------------------------------------------------------------------------------------------------------

// example uploading single file
// result: uploaded single image with resizing
{
    "status": "success",
    "data": {
        "avatar": [
            {
                "originalname": "nicolas-horn-MTZTGvDsHFY-unsplash.jpg",
                "original": {
                    "filename": "profile-1590999720386-original.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/original/profile-1590999720386-original.jpeg"
                },
                "large": {
                    "filename": "profile-1590999720386-large.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/large/profile-1590999720386-large.jpeg"
                },
                "medium": {
                    "filename": "profile-1590999720386-medium.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/medium/profile-1590999720386-medium.jpeg"
                },
                "thumbnail": {
                    "filename": "profile-1590999720386-thumbnail.jpeg",
                    "path": "http://127.0.0.1:8000/uploads/2020/06/thumbnail/profile-1590999720386-thumbnail.jpeg"
                }
            }
        ]
    }
}


// example uploading multer fields
// result: uploaded image with grouping by field and resizing
{
    "status": "success",
    "cover": [
        {
            "originalname": "screencapture-cart-2020-04-28-11_34_35.png",
            "original": {
                "filename": "cover-1592806057900-0-original.png",
                "path": "http://127.0.0.1:8000/uploads/2020/06/original/cover-1592806057900-0-original.png"
            },
            "large": {
                "filename": "cover-1592806057900-0-large.png",
                "path": "http://127.0.0.1:8000/uploads/2020/06/large/cover-1592806057900-0-large.png"
            },
            "medium": {
                "filename": "cover-1592806057900-0-medium.png",
                "path": "http://127.0.0.1:8000/uploads/2020/06/medium/cover-1592806057900-0-medium.png"
            },
            "thumbnail": {
                "filename": "cover-1592806057900-0-thumbnail.png",
                "path": "http://127.0.0.1:8000/uploads/2020/06/thumbnail/cover-1592806057900-0-thumbnail.png"
            }
        },
        ....
    ],
    "gallery": [
        {
            "originalname": "andre-hunter-p-I9wV811qk-unsplash.jpg",
            "original": {
                "filename": "gallery-1592806057900-0-original.jpeg",
                "path": "http://127.0.0.1:8000/uploads/2020/06/original/gallery-1592806057900-0-original.jpeg"
            },
            "large": {
                "filename": "gallery-1592806057900-0-large.jpeg",
                "path": "http://127.0.0.1:8000/uploads/2020/06/large/gallery-1592806057900-0-large.jpeg"
            },
            "medium": {
                "filename": "gallery-1592806057900-0-medium.jpeg",
                "path": "http://127.0.0.1:8000/uploads/2020/06/medium/gallery-1592806057900-0-medium.jpeg"
            },
            "thumbnail": {
                "filename": "gallery-1592806057900-0-thumbnail.jpeg",
                "path": "http://127.0.0.1:8000/uploads/2020/06/thumbnail/gallery-1592806057900-0-thumbnail.jpeg"
            }
        },
        ....
    ]
}
```

### Params

```javascript
/**
 * Constructor method
 * @param  {object} req
 * @param  {string || object} filename
 * @param  {array} sizes
 * @param  {string} uploadPath
 * @param  {string} fileUrl
 * @param  {Object} sharpOptions
 */
const resizeObj = new MulterSharpResizer(
  req,
  filename,
  sizes,
  uploadPath,
  fileUrl,
  sharpOptions
);
```

| param        | role                                                                                                      |
| ------------ | --------------------------------------------------------------------------------------------------------- |
| req          | Express request object                                                                                    |
| filename     | `String for array/single and Object{ } for multer fields` Set custom filename for storage                 |
| sizes        | Array of objects sizes for storage image with multiple sizes                                              |
| uploadPath   | Set custom path for storage uploaded files                                                                |
| fileUrl      | Set url for access files with url(link)                                                                   |
| sharpOptions | `Default: { }` , Also you can use any sharp options from [sharp.js doc](https://sharp.pixelplumbing.com/) |

### Sizing structure

```javascript
const sizes = [
  {
    path: "original",
    width: null,
    height: null,
  },
  {
    path: "large",
    width: 800,
    height: 800,
  },
  {
    path: "medium",
    width: 300,
    height: 300,
  },
  {
    path: "thumbnail",
    width: 100,
    height: 100,
  },
];
```

| property | value                                                                |
| -------- | -------------------------------------------------------------------- |
| path     | Set any name of directory and suffix for storage file after uploaded |
| width    | Set `width` for resizing                                             |
| height   | Set `height` for resizing                                            |

> If `set` **`width: null`** and **`height: null`** , **The original size is saved by default**

## License

[MIT](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/multer-sharp-resizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._