Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files.

I once published an article on how to upload images to cloudinary with a React App but what if we wanted to upload images on our own Nodejs server? This is what I’ll be covering in this tutorial. I’ll be showing You how to upload images using Multer and also how to process images using Sharp. By the end of this tutorial, you’ll be able to implement this into your existing or new projects.

Prerequisites

• Basic understanding of javascript
• Basic knowledge of NodeJs/Express
• The latest version of nodeJs installed on your machine
• Postman

1. Setting up our Project

1.1 Installing Node

Open cmd and run the following command to check if you have Nodejs installed, If you don’t check out this article on how to install NodeJs on your windows Machine.

node -v

1.2 Create a folder directory

You can either run this command in your terminal or create a folder in your file-explorer then navigate to this folder in the terminal

mkdir image-upload-with-multer
cd image-upload-with-multer

2. Project initialization

2.1 Create a package.json file

Run npm init to create a package.json file.

npm init -y

The ‘y’ flag creates the file with default settings.

2.2 Install dependencies and dev-dependencies

npm i express multer sharp

We’ll use express to setup our server, multer to handle file upload and sharp to crop images to our desired size.

npm i -D nodemon

We’ll need nodemon to restart our server whenever files change. The -D flag is to install as dev-dependency as this wouldn’t be needed in a production environment.

After, installing nodemon, open the package.json file and add a new script as folllows

"dev":"nodemon app.js"

Your package.json file should then look like this

3. Setting up our Server

3.1 Basic server setup

Create an ‘app.js’ file in the root directory and paste the following code

const express = require('express')
const multer = require('multer')
const sharp = require('sharp')
const port = process.env.PORT || 5000
const app = express()
app.use(express.json())
app.listen(port, () => {
console.log('Server is running on port '+ port)
})

You can then run the following command in the terminal

npm run dev

If everything goes well, you should see this on the console

4. Multer

4.1 Configuring Multer

Just below ‘app.use’ paste the following code

const upload = multer({
limits: {
fileSize: 1000000
},
fileFilter(req, file, cb) {
if(!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
return cb( new Error('Please upload a valid image file'))
}
cb(undefined, true)
}
})

The limits property specifies limits for the uploaded data. Here we are setting a limit of 1mb for the image to be uploaded.

Since we are working on image upload, we need to restrict the file type to only accept images. Multer can be setup differently for every endpoint to accept different type of files.

The fileFilter property accepts three arguments, the request, the file to be uploaded and the callback.

The callback accepts two arguments, the error if any error occured and the second argument, a boolean(true if the upload should be accepted and false otherwise)

The ‘file.pathname’ contains the name of the file on the user’s computer with it’s extension, so we are checking if the file extension matches the the three image types accepted. if it doesn’t, we throw an error using the callback. If it matches, we pass ‘undefined’ as the first argument to the callback, and ‘true’ as the second argument, specifying the upload should be allowed.

This validation can also be modified for other file types.

Please refer to multer documentation for more information.

5. Image upload route

After configuring multer, copy and paste the following code to create the image upload route

app.post('/image', upload.single('upload'), async (req, res) => {
try {
await sharp(req.file.buffer).resize({ width: 250, height: 250 }).png().toFile(__dirname + `/images/${req.file.originalname}`)
res.status(201).send('Image uploaded succesfully')
} catch (error) {
console.log(error)
res.status(400).send(error)
}
})

To pass in the multer middleware, we use ‘upload’, the configuration we did earlier, then we call a function on it which returns the middleware we need. This function is ‘single’. Single requires one argument, a string which can be literally anything. Here, we’ll call it ‘upload’.

You can also upload multiple files using ‘upload.array()’. Visit multer documentation for steps on how to set that up

After multer is done processing and validating the image, the data is accessible on ‘req.file’, you can log this to the console to see what it looks like.

The next thing we did was pass the image buffer to sharp, resize it and save the image using the ‘toFile’ property. The toFile propery writes the output image data to a file. It takes the filepath as an argument and here, I specified it to save the image with its original filename.

This is just a tip of what you can do with sharp. Sharp is much more powerful than this and you should definitely check out the documentation here

Save the file and the server should be restarted.

Here’s what your app.js file should look like

6. Testing with Postman

Create a new folder in the root directory of the project with the name ‘images’

Head over to postman and create a new post request to the url as shown below

localhost:5000/image

In body tab and choose ‘form-data’. The key is the string we passed to ‘upload.single’ earlier and the value is the image to be uploaded.

Change the key type to file and select the image to be upload.

Note: Image must be less than 1mb

Hit the send button and you should get a response that the image has been uploaded successfully as shown below.

Head over to the project folder and you should be able to see the uploaded image.

7. Conclusion

We’ve successfully built a nodejs server that accepts image upload using multer and sharp.

Github repo can be found here https://github.com/breellz/image-upload-with-multer

Leave a clap if you find this useful.

Thanks for reading