when I started my journey through the development world, I had some difficulties and reading documentation was one of them. So I had the idea of writing about things I already learned that I had difficulty in the beginning
NOTE : I understand that you already have experience building servers using express.js and node development
about multer
Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. IMPORTANT : Multer will not process any form which is not multipart (multipart/form-data).
instalation
npm install multer
about sharp
The typical use case of Sharp is to convert large images in common formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions.
instalation
npm install sharp
project structure
├── index.js |main application file
├──uploads |image upload folder
└── resized |image resized upload folder
├── upload-config.js |multer configuration
├── node_modules | modules of application
├── package-lock.json |cache of package.json
├── package.json |lists the packages your project depends on
hands on code
For testing it is recommended that you use some API Testing program such as Insomia or Postman.
IMPORTANT: Don't forget to set Multipart Form Architecture in the request body in your API test program.
├── index.js
const express = require('express')
const multer = require('multer')
const sharp = require('sharp')
const storage = require('./upload-config')
const upload = multer(storage)
const path = require('path')
const fs = require('fs')
const app = express()
const router = new express.Router
app.use(router)
router.get('/', (req, res) => {
res.send('ok')
})
router.post('/upload',upload.single('image') ,async (req, res) => {
const { filename: image } = req.file
await sharp(req.file.path)
.resize(500)
.jpeg({quality: 50})
.toFile(
path.resolve(req.file.destination,'resized',image)
)
fs.unlinkSync(req.file.path)
return res.send('SUCCESS!')
})
app.listen(3333, () => {
console.log('server on!')
})
├── upload-config.js
const multer = require('multer')
const path = require('path')
module.exports = {
storage : new multer.diskStorage({
destination : path.resolve(__dirname, ".","uploads"),
filename : function(req, file, callback) {
callback(null, file.originalname)
}
})
}
conclusion 📣
I am very grateful to be able to share some of the knowledge I have acquired, as teaching is the best way to learn something. Any tips or questions, please contact me via Facebook: Kilmer.
PS: forgive me for something this is my first post
Repository in GitHub : https://github.com/mkilmerr/multer-sharp-upload-image
Top comments (1)
Great example but I think the article could use a 2.0 version where you explain what's going on in the configs/setup so people better understand why certain things are set up how they are. Other than that it's a very useful example!