Upload and view multiple images in Node JS and Mongo DB

Upload multiple images in Node JS and Mongo DB

5
(1)

In this article, we are going to teach you, how you can upload multiple images in Node JS and Mongo DB.

Video tutorial:

Initializing the project

First, you need to create an empty folder and open a command prompt or terminal in it. Then run the following command in that CMD:

> npm init

It will ask multiple questions, just press enter to set the default values.

Then you need to install the express and HTTP modules. So run the following command:

> npm install express http

Then create a file named server.js and write the following code in it:

const express = require("express")
const app = express()
const http = require("http").createServer(app)

// [include Mongo DB]

// [set view engine]

// [Express formidable and FS module]

// [recursive function to upload images]

const port = process.env.PORT || 3000
http.listen(port, function () {
    console.log("Server started running at port: " + port)

    // [connect Mongo DB]
})

If you open your CMD, you will see the message “Server started running at port: 3000”.

You can check your project from the URL: http://localhost:3000/

Installing Mongo DB

To install the Mongo DB module, first, run the following command in your terminal:

> npm install mongodb

Then include the Mongo DB module in your server.js file in the [include Mongo DB] section:

const mongoClient = require("mongodb").MongoClient

Then connect with the database by writing the following code in the [connect Mongo DB] section:

mongoClient.connect("mongodb://localhost:27017", async function (error, client) {
    if (error) {
        console.error(error)
        return
    }

    const db = client.db("multiple_images_upload")
    console.log("Database connected")

    // [routes]
})

To learn more about Mongo DB, check our tutorials on Mongo DB here.

Display form to upload multiple images

To display an HTML file in Node JS, we need to install a module named EJS. You can install it by running the following command:

> npm install ejs

Then we need to tell our app to use the EJS as the templating engine. So write the following code in the [set view engine] section:

app.set("view engine", "ejs")

Then create a GET route in the [routes] section of server.js file:

app.get("/", async function (request, result) {
    result.render("home")
})

Then create a folder named views and inside this folder create a new file named home.ejs. In this file, we will create a form with an input type file.

<!-- home.ejs -->

<form onsubmit="uploadImages()" enctype="multipart/form-data">
    <input type="file" multiple accept="image/*" name="images" required />

    <input type="submit" value="Upload images" />
</form>

multiple: This will allow multiple file uploads.

accept=”image/*”: This allows only image files to be uploaded.

Then we will create this Javascript function to call an AJAX.

<script>
    function uploadImages() {
        // prevent the form from reloading the page
        event.preventDefault()

        // get form tag
        const form = event.target

        // create form data object from <form>
        const formData = new FormData(form)

        // create AJAX object
        const ajax = new XMLHttpRequest()

        // 1st parameter = method, GET/POST
        // 2nd parameter = path to server file
        // 3rd parameter = asynchronous
        ajax.open("POST", "/uploadImages", true)

        // when status of request changes
        ajax.onreadystatechange = function () {
            // operation is completed
            if (this.readyState == 4) {
                // response from server is okay
                if (this.status == 200) {
                    // response from server
                    console.log(this.responseText)
                }
            }
        }

        // send AJAX request
        ajax.send(formData)
    }
</script>

Comments have been added with each line for the explanation.

Upload multiple images in Node JS

To handle the form data object, we must first install the express-formidable and fs modules. FS stands for File System. To install these modules, run the following command:

> npm install express-formidable fs

Then you need to include these modules in your server.js file, in the [Express formidable and FS module] section:

const formidable = require("express-formidable")
app.use(formidable({
    multiples: true, // request.files to be arrays of files
}))

const fileSystem = require("fs")
app.use("/uploads", express.static(__dirname + "/uploads"))

Then create a folder named uploads at the root of your project.

After that, create the following POST route to handle that AJAX request:

app.post("/uploadImages", async function (request, result) {
    const images = []
    if (Array.isArray(request.files.images)) {
        for (let a = 0; a < request.files.images.length; a++) {
            images.push(request.files.images[a])
        }
    } else {
        images.push(request.files.images)
    }

    callbackFileUpload(images, 0, [], async function (savedPaths) {
        await db.collection("images").insertOne({
            images: savedPaths
        })

        result.send("Images has been uploaded.")
    })
})

To upload images, we will be using a recursive function. So create a recursive function in the [recursive function to upload images] section:

function callbackFileUpload(images, index, savedPaths = [], success = null) {
	const self = this

	if (images.length > index) {

		fileSystem.readFile(images[index].path, function (error, data) {
			if (error) {
				console.error(error)
				return
			}

			const filePath = "uploads/" + new Date().getTime() + "-" + images[index].name
			
			fileSystem.writeFile(filePath, data, async function (error) {
				if (error) {
					console.error(error)
					return
				}

				savedPaths.push(filePath)

				if (index == (images.length - 1)) {
					success(savedPaths)
				} else {
					index++
					callbackFileUpload(images, index, savedPaths, success)
				}
			})

			fileSystem.unlink(images[index].path, function (error) {
				if (error) {
					console.error(error)
					return
				}
			})
		})
	} else {
		success(savedPaths)
	}
}

Run the project now and you see a form with an input file and a submit button. Select multiple images from your computer and hit submit. Once submitted, you will see your uploaded images in the “uploads” folder and a new document will be created in the Mongo DB images collection.

Show uploaded images

Now we need to show all uploaded images. First, change your home route in server.js to the following:

app.get("/", async function (request, result) {
    const images = await db.collection("images").find({}).toArray()
    result.render("home", {
        images: images.length > 0 ? images[0].images : []
    })
})

This will pass all the images from the first document of images collection to the home file. Now go to your home.ejs and write the following for loop to display all images:

<%for (let a = 0; a < images.length; a++) { %>
    <img src="<%= images[a] %>" style="width: 100%;" />
<% } %>

Refresh the page now and you will be able to view all uploaded images.

If you face any problem in this, please do not hesitate to get in touch with me.

To run the following downloaded files, run the following command in your terminal first:

> npm update

How useful was this post

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post





Leave a Reply