NodeJs Image upload with Multer

Published in

Geek Culture

5 min readMay 12, 2022

Introduction

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.

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

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 || 5000const 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