Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on November 5, 2022

 

 

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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

JavaScript
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.

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

JavaScript
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.

 

 

JavaScript
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

 

 

JavaScript
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")
})

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme