Upload CSV file to MongoDB mongoose + node js + Express; Through this tutorial, you will learn how to upload/import CSV file data into MongoDB in Node js + Express.
Import csv file to mongodb using node js + express tutorial, you will also learn how to upload csv file into Node js + express app. Then read csv file data using npm CSVTOJSON package and import it in mongodb database with node js + express app.
How to Upload/Import csv File in Mongodb using Node js + Express
Follow the below steps and import/upload CSV file to mongodb using node js + Express:
- Step 1 – Create Node Express js App
- Step 2 – Install express ejs body-parser mongoose CSVTOJSON Multer Modules
- Step 3 – Create Model
- Step 4 – Create CSV File Upload HTML Markup Form
- Step 5 – Import Modules in App.js
- Step 6 – Start App Server
Step 1 – Create Node Express js App
Execute the following command on terminal to create node js app:
mkdir my-app cd my-app npm init -y
Step 2 – Install express ejs body-parser mongoose CSVTOJSON Multer Modules
Execute the following command on the terminal to express ejs body-parser mongoose dependencies :
npm install -g express-generator npx express --view=ejs npm install csvtojson mongoose multer body-parser
body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and make it available under req.body property. In other words, it simplifies the incoming request.
Express-EJS– EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages
Mongoose – Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.
Multer – Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.
CSVTOJSON – A tool concentrating on converting csv data to JSON with customised parser supporting.
Step 3 – Create Model
Create Models directory and inside this directory create studentModel.js file; Then add following code into it:
var mongoose = require('mongoose');
var csvSchema = new mongoose.Schema({
FirstName:{
type:String
},
LastName:{
type:String
},
SSN:{
type:String
},
Test1:{
type:Number
},
Test2:{
type:Number
},
Test3:{
type:Number
},
Test4:{
type:Number
},
Final:{
type:Number
},
Grade:{
type:String
}
});
module.exports = mongoose.model('studenModel',csvSchema);
Step 4 – Create CSV File Upload HTML Markup Form
Create file/image upload Html form for upload image or file in mongoDB database; So visit views directory and create index.ejs file inside it. Then add the following code into it:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>node js upload csv file to mongodb - tutsmake.com</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<a class="navbar-brand" href="#">CsvToMongo</a>
</nav>
<div class="container">
<div class=" nav justify-content-center" style="margin-top:100px;">
<div class="card border-warning mb-3 " style="max-width: 20rem;">
<div class="card-header"><h5>Upload csv file</h5></div>
<div class="card-body">
<form action="/" method="post" enctype="multipart/form-data">
<input type="file" name="csv"><br><br>
<div class="text-center"><button type="submit" class="btn btn-lg btn-primary">submit</button></div>
</form>
</div>
</div>
</div><br>
<%if(data){%>
<div>
<table class="table table-hover table-responsive table-stripped nav justify-content-center" style="width: auto" >
<thead>
<tr class="bg-primary">
<th>S.no</th>
<th style="padding-right: 1em">LastName</th>
<th style="padding-right: 1em">FirstName</th>
<th style="padding-right:2em;padding-left:2em;">SSN</th>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
<th>Test4</th>
<th>Final</th>
<th>Grade</th>
</tr>
</thead>
<tbody style="overflow-x: scroll; height:350px;" class="table-bordered">
<%for(var i=0;i< data.length;i++){%>
<tr class="text-center">
<td ><%= i+1%></td>
<td style="padding-right: 1em"><%= data[i].LastName%></td>
<td style="padding-left: 1em;"><%= data[i].FirstName%></td>
<td style="padding-right:1em;padding-left:1em;"><%= data[i].SSN%></td>
<td style="padding-left: 1em"><%= data[i].Test1%></td>
<td style="padding-left: 1em"><%= data[i].Test2%></td>
<td style="padding-left: 1em"><%= data[i].Test3%></td>
<td style="padding-left: 1.2em"><%= data[i].Test4%></td>
<td style="padding-left: 1.2em"><%= data[i].Final%></td>
<td style="padding-left: 1.2em"><%= data[i].Grade%></td>
</tr>
<%}%>
</tbody>
</table>
</div>
<%}%>
<br>
</body>
</html>
Step 5 – Import Modules in App.js
Import express, body-parser, mongoose, multer dependencies in app.js; as shown below:
var express = require('express');
var mongoose = require('mongoose');
var multer = require('multer');
var path = require('path');
var csvModel = require('./models/csv');
var csv = require('csvtojson');
var bodyParser = require('body-parser');
var storage = multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,'./public/uploads');
},
filename:(req,file,cb)=>{
cb(null,file.originalname);
}
});
var uploads = multer({storage:storage});
//connect to db
mongoose.connect('mongodb://localhost:27017/csvdemos',{useNewUrlParser:true})
.then(()=>console.log('connected to db'))
.catch((err)=>console.log(err))
//init app
var app = express();
//set the template engine
app.set('view engine','ejs');
//fetch data from the request
app.use(bodyParser.urlencoded({extended:false}));
//static folder
app.use(express.static(path.resolve(__dirname,'public')));
//default pageload
app.get('/',(req,res)=>{
csvModel.find((err,data)=>{
if(err){
console.log(err);
}else{
if(data!=''){
res.render('demo',{data:data});
}else{
res.render('demo',{data:''});
}
}
});
});
var temp ;
app.post('/',uploads.single('csv'),(req,res)=>{
//convert csvfile to jsonArray
csv()
.fromFile(req.file.path)
.then((jsonObj)=>{
console.log(jsonObj);
//the jsonObj will contain all the data in JSONFormat.
//but we want columns Test1,Test2,Test3,Test4,Final data as number .
//becuase we set the dataType of these fields as Number in our mongoose.Schema().
//here we put a for loop and change these column value in number from string using parseFloat().
//here we use parseFloat() beause because these fields contain the float values.
for(var x=0;x<jsonObj;x++){
temp = parseFloat(jsonObj[x].Test1)
jsonObj[x].Test1 = temp;
temp = parseFloat(jsonObj[x].Test2)
jsonObj[x].Test2 = temp;
temp = parseFloat(jsonObj[x].Test3)
jsonObj[x].Test3 = temp;
temp = parseFloat(jsonObj[x].Test4)
jsonObj[x].Test4 = temp;
temp = parseFloat(jsonObj[x].Final)
jsonObj[x].Final = temp;
}
//insertmany is used to save bulk data in database.
//saving the data in collection(table)
csvModel.insertMany(jsonObj,(err,data)=>{
if(err){
console.log(err);
}else{
res.redirect('/');
}
});
});
});
//assign port
var port = process.env.PORT || 3000;
app.listen(port,()=>console.log('server run at port '+port));
Step 6 – Start App Server
You can use the following command to start node js app server:
//run the below command npm start after run this command open your browser and hit http://127.0.0.1:3000/
Conclusion
Upload/Import CSV file to MongoDB mongoose + node js + Express; Through this tutorial, you have learned how to upload/import CSV file data into MongoDB in Node js + Express.
That’s really nice post. I appreciate your skills, Thanks for sharing.