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
1 2 3 4 5 6 7 8 |
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
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
1 2 3 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
1 2 3 4 5 6 7 8 9 10 |
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.
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
1 2 3 4 5 6 7 8 9 |
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
1 2 3 4 |
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
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
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") }) |