how to upload image using multer and sharp
Tags: node, javascript, backend
Published: 2019-08-31 21:18:24

---
title: how to upload image using multer and sharp
published: true
description: Simple tutorial on how to implement image upload in a Node.js api
tags: #nodejs #javascript #backend
---

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](https://github.com/expressjs/express) and node development

# **about multer**

[Multer](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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

```javascript 

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

```javascript 
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** :mega:

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](https://www.facebook.com/bacon.sleep).
**``PS: forgive me for something this is my first post``**
**Repository in GitHub : https://github.com/mkilmerr/multer-sharp-upload-image**