multer-sharp-resizer

Multer-sharp-resizer is a package for Resizing single/multiple images with node.js, express.js, multer.js Multer documentation and sharp.js sharp documentation.

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

Documentation


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}...));
`

$3

`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"
}
},
....
]
}
`

$3

`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 |

$3

`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