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
.png?raw=true)
npm:
$ npm i multer multer-sharp-resizer
yarn:
$ yarn add multer multer-sharp-resizer
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();
....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}...`));// 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"
}
},
....
]
}/**
* 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 |
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
setwidth: nullandheight: null, The original size is saved by default