Node.js Express MongoDB Project to Upload Multiple Files Using Multer in Browser Using Javascript

Welcome folks today in this blog post we will be uploading multiple files to mongdb database using multer library in node.js and express. All the full source code of the application is shown below.

Get Started

In order to get started you need to initialize a new node.js project using the below command as shown below

npm init -y

npm i express

npm i multer

npm i mongodb

As you can see we are installing the above libraries which are the express which will be the web server for the app and then multer will be required for file uploading and then we have the mongodb library for communicating with the database.

Now we need to make the index.js file which will be the starting point of the application and copy paste the below code

index.js

const express = require('express')

const app = express()
const PORT = 5000

app.listen(PORT,() => {
    console.log("App is listening on port 5000")
})

const express = require('express')

const app = express()

const PORT = 5000

app.listen(PORT,() => {

console.log("App is listening on port 5000")

})

As you can we are starting a simple express web server at the port number 5000. And then we are starting the app using the listen() method at that port number.

Adding Middlewares to Express

Now we need to add the bodyparser middleware to the express app it comes built in with the express library just copy paste the below line inside app.js file

app.use(express.urlencoded({extended:false}))

1	app.use(express.urlencoded({extended:false}))

Adding the Routes & Views

Now we will be adding the different routes to the express app. So first of all we will be showing the index.html page where we will be having the html5 form where we will allows users to upload the files

app.get('/',(req,res) => {
    res.sendFile(__dirname + "/index.html")
})

app.get('/',(req,res) => {

res.sendFile(__dirname + "/index.html")

})

So now we also need to make the public folder inside the root directory where we will be storing all the files which will be uploaded by the user and also create the index.html file inside the root directory. So just see the directory structure

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Single & Multiple Files to MongoDB</title>
</head>
<body>
    <form action="/uploadfile" method="post" enctype="multipart/form-data">
        <input type="file" name="myFile" id="">
        <input type="submit" value="Upload file">
    </form>

    <form action="/uploadmultiple" method="post" enctype="multipart/form-data">
        <input type="file" name="myFiles" multiple>
        <input type="submit" value="Upload Multiple Files">
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Upload Single & Multiple Files to MongoDB</title>

</head>

<body>

</form>

</form>

</body>

</html>

As you can see we have the two html5 form input fields where we have given user the option of either uploading single or multiple files and then we have the button. And then we have given the action attribute to the form and also the method is post.

Now we need to make the POST request inside the index.js file and copy paste the below code

const multer = require("multer")

const path = require('path')

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)) //Appending extension
  }
})

var upload = multer({ storage: storage }).single('myFile');

const multer = require("multer")

const path = require('path')

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, 'uploads/')

filename: function (req, file, cb) {

cb(null, Date.now() + path.extname(file.originalname)) //Appending extension

}

})

var upload = multer({ storage: storage }).single('myFile');

As you can see we are importing the multer library and then we are also importing the built in path module from the node.js. And then we are configuring the option for uploading files using multer. Here we are setting the destination folder here it is the upload folder and also we are setting the dynamic name for the file. And lastly we are initializing the multer constructor and passing these two options And after that we are configuring the upload middleware function where we are passing the storage variable. And then we are calling the single method to upload file file using multer.

And now we need to make the post request to actually upload the file

app.post('/uploadfile',(req,res) => {
    upload(req,res,(err) => {
        if(err){
            res.send(err)
        }
        else{
            res.send(req.file.path)
        }
    })
})

app.post('/uploadfile',(req,res) => {

upload(req,res,(err) => {

if(err){

res.send(err)

}

else{

res.send(req.file.path)

}

})

And now if you upload the file and click the upload button then the path of the uploaded file will be returned as a response. And also the file will be uploaded inside the public folder

Uploading Multiple Files in Multer

Now we will be making the post request to upload multiple files using multer. For this we will be declaring a new upload middleware function in which we will be using the array() method. And in the first argument we are passing the name argument and in the second argument we are passing the number of files to be uploaded at the same time which is 100.

var multipleupload = multer({storage:storage}).array('myFiles',100)

1	var multipleupload = multer({storage:storage}).array('myFiles',100)

Now we need to make the post request to upload multiple files using the above middleware function that we declared

app.post('/uploadmultiple',(req,res) => {
    multipleupload(req,res,(err) => {
        if(err){
            res.send(err)
        }else{
            res.send(req.files)
        }
    })
})

app.post('/uploadmultiple',(req,res) => {

multipleupload(req,res,(err) => {

if(err){

res.send(err)

}else{

res.send(req.files)

}

})

As you can see after the successful upload we are returning the json response containing the array of files which are uploaded to the server. It contains various properties such as name of the file and path etc.

Connecting to MongoDB Database

Now guys we will be connecting the express app to the mongodb database using the mongodb module that we have installed. Now copy paste the below code inside the index.js file as shown below

const mongodb = require('mongodb')
const fs = require('fs')
const MongoClient = mongodb.MongoClient
const url = 'mongodb://localhost:27017'

const mongodb = require('mongodb')

const fs = require('fs')

const MongoClient = mongodb.MongoClient

const url = 'mongodb://localhost:27017'

As you can see first of all we are importing the mongodb library and then we are also importing the fs module for performing the file operations and then we are also importing the mongoClient from the mongodb library.And also we are connecting to the mongodb connection url which is running on port 27017

And now we need to connect to the url that we mentioned using this mongoclient.For this we need to use the connect() method as shown below

MongoClient.connect(url,{
    useUnifiedTopology:true,
    useNewUrlParser:true
},(err,client) => {
    if(err) return console.log(err)

    db = client.db('multer_files')

    app.listen(3000,() => {
        console.log("Mongodb server listening on port 3000")
    })
})

MongoClient.connect(url,{

useUnifiedTopology:true,

useNewUrlParser:true

},(err,client) => {

if(err) return console.log(err)

db = client.db('multer_files')

app.listen(3000,() => {

console.log("Mongodb server listening on port 3000")

})

As you can see that we are passing the connection string to the connect() method and in the config we are also some custom parameters. And then it returns the client in the callback function and after that we are creating the mongodb database using the db() method here we are naming our database as multer_files and then we are starting the mongodb server at port 3000.

Saving the Uploaded File Path in MongoDB

Now guys we will be modifying the post request where we are uploading the file to express server using multer. In this we need to save the path to mongodb database by first of all converting the file to base64 code and then inserting those details in mongodb database.

app.post('/uploadfile',(req,res) => {
    upload(req,res,(err) => {
        if(err){
            res.send(err)
        }
        else{
            res.send(req.file)

            let file = fs.readFileSync(req.file.path)

            let base_64 = file.toString('base64')

            let finalfile = {
                contentType:req.file.mimetype,
                path:req.file.path,
                file:new Buffer(base_64,'base64')
            }

            db.collection('file').insertOne(finalfile,(err,result) => {
                console.log(result)
                if(err){
                    return console.log(err)
                }
                console.log("file saved to mongodb database")

                res.contentType(finalfile.contentType)
                res.send(finalfile)
            })
        }
    })
})

app.post('/uploadfile',(req,res) => {

upload(req,res,(err) => {

if(err){

res.send(err)

}

else{

res.send(req.file)

let file = fs.readFileSync(req.file.path)

let base_64 = file.toString('base64')

let finalfile = {

contentType:req.file.mimetype,

path:req.file.path,

file:new Buffer(base_64,'base64')

}

db.collection('file').insertOne(finalfile,(err,result) => {

console.log(result)

if(err){

return console.log(err)

}

console.log("file saved to mongodb database")

res.contentType(finalfile.contentType)

res.send(finalfile)

})

}

})

As you can see we are creating the collection or table which is file and here we are using the insertOne() method to insert one record at a time and here we are inserting the object which contains the mimeType of the uploaded file and also the path property of the uploaded file and also the base64 code of the uploaded file. For this we are using the toString() method in node.js and in argument we are passing the base64 to convert to base64 code. Now if you upload the file by going to this route in browser and the file will be uploaded and also the path will be stored as well in mongodb database as shown below

Full Source Code

Wrapping the blog post this is the full source code of the index.js file as shown below

index.js

const express = require('express')
const multer = require('multer')
const mongodb = require('mongodb')
const fs = require('fs')
const app = express()
const PORT = 5000
const MongoClient = mongodb.MongoClient
const url = 'mongodb://localhost:27017'

MongoClient.connect(url,{
    useUnifiedTopology:true,
    useNewUrlParser:true
},(err,client) => {
    if(err) return console.log(err)

    db = client.db('multer_files')

    app.listen(3000,() => {
        console.log("Mongodb server listening on port 3000")
    })
})

var path = require('path')

app.use(express.urlencoded({extended:false}))

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)) //Appending extension
  }
})

var upload = multer({ storage: storage }).single('myFile');

var multipleupload = multer({storage:storage}).array('myFiles',100)

app.get('/',(req,res) => {
    res.sendFile(__dirname + "/index.html")
})

app.post('/uploadmultiple',(req,res) => {
    multipleupload(req,res,(err) => {
        if(err){
            res.send(err)
        }else{
            res.send(req.files)
        }
    })
})

app.post('/uploadfile',(req,res) => {
    upload(req,res,(err) => {
        if(err){
            res.send(err)
        }
        else{
            res.send(req.file)

            let file = fs.readFileSync(req.file.path)

            let base_64 = file.toString('base64')

            let finalfile = {
                contentType:req.file.mimetype,
                path:req.file.path,
                file:new Buffer(base_64,'base64')
            }

            db.collection('file').insertOne(finalfile,(err,result) => {
                console.log(result)
                if(err){
                    return console.log(err)
                }
                console.log("file saved to mongodb database")

                res.contentType(finalfile.contentType)
                res.send(finalfile)
            })
        }
    })
})

app.listen(PORT,() => {
    console.log("App is listening on port 5000")
})

const express = require('express')

const multer = require('multer')

const mongodb = require('mongodb')

const fs = require('fs')

const app = express()

const PORT = 5000

const MongoClient = mongodb.MongoClient

const url = 'mongodb://localhost:27017'

MongoClient.connect(url,{

useUnifiedTopology:true,

useNewUrlParser:true

},(err,client) => {

if(err) return console.log(err)

db = client.db('multer_files')

app.listen(3000,() => {

console.log("Mongodb server listening on port 3000")

})

var path = require('path')

app.use(express.urlencoded({extended:false}))

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, 'uploads/')

filename: function (req, file, cb) {

cb(null, Date.now() + path.extname(file.originalname)) //Appending extension

}

})

var upload = multer({ storage: storage }).single('myFile');

var multipleupload = multer({storage:storage}).array('myFiles',100)

app.get('/',(req,res) => {

res.sendFile(__dirname + "/index.html")

})

app.post('/uploadmultiple',(req,res) => {

multipleupload(req,res,(err) => {

if(err){

res.send(err)

}else{

res.send(req.files)

}

})

app.post('/uploadfile',(req,res) => {

upload(req,res,(err) => {

if(err){

res.send(err)

}

else{

res.send(req.file)

let file = fs.readFileSync(req.file.path)

let base_64 = file.toString('base64')

let finalfile = {

contentType:req.file.mimetype,

path:req.file.path,

file:new Buffer(base_64,'base64')

}

db.collection('file').insertOne(finalfile,(err,result) => {

console.log(result)

if(err){

return console.log(err)

}

console.log("file saved to mongodb database")

res.contentType(finalfile.contentType)

res.send(finalfile)

})

}

})

app.listen(PORT,() => {

console.log("App is listening on port 5000")

})