Image upload via NodeJS Server

One of the basic things that every website should be able to do is take an image as an input from user and store it in their server. We will see the step by step implementation of this on Node/Express frameworks.

For this project, we’ll be making use of Multer Library. Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

First we’ll set up a basic express application. Here’s the package.json file

{
"name": "node-image-upload",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"multer": "^1.3.0"
}
}

We have installed multer and express libraries and we have named our main server file as server.js

Now let us start with the front end. We’ll create a basic html file called index.html which contains a form that takes an image as an input from user. I have styled it using bootstrap to make it look beautiful.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload Images to Server</title>
<meta charset="utf-8">

</head>
<body>

<h1>Upload Image</h1>

<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" name="photo" >
<input type="submit" value="upload">
</form>


</body>
</html>

I have used a simple input tag with attribute of type=”file”. It has another attribute called accept which allows us to define what type of file to accept. I have decided to accept all types of image files so I set its value as “image/*”. If you want to accept a specific extension such as jpeg, you can set it as “image/jpeg” and so on.

As you can see, the input tag and a submit button are wrapped inside a form which sends the data to /upload route via post method. I have also included another attribute called enctype=”multipart/form-data”. Setting this attribute is important because the default value of enctype is application/x-www-form-urlencoded which does not support image upload. I have saved this html file in a directory called public.

Now that we have completed the front end, let’s see how the main logic, ie, server.js file looks like. Here’s the code —

const express = require('express');
const multer = require('multer');
const upload = multer({dest: __dirname + '/uploads/images'});

const app = express();
const PORT = 3000;

app.use(express.static('public'));

app.post('/upload', upload.single('photo'), (req, res) => {
if(req.file) {
res.json(req.file);
}
else throw 'error';
});

app.listen(PORT, () => {
console.log('Listening at ' + PORT );
});

Here’s I’ve created a simple server via express which displays the contents of index.html file that is inside public directory.

I have also imported the multer library and defined a constant upload which is assigned the value of multer({dest: __dirname + ‘/uploads/images’});. This constant allows us to take in files and store it in our server in the defined path. Here I’ve chosen /uploads/images as my destination.

The most important thing here to do is to define the post route of the /upload path. Here’s I’m simply using the middleware as per the multer documentation to get the image passed and store it. The basic syntax for that is —

app.post('/path', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
})

You can also upload an array of photos instead of a single photo with this library. You will just need to use upload.array() in place of upload.single().

That’s it, you have built a simple node/express website that saves the upload image onto the server.

Here’s the GitHub Code Link for reference.

Software Developer and Internet Marketer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store