'I am getting pdf file stored in uploads folder but the other data is not getting stored in mongo server
index.html this is main html file for project. html , css and submit.html file is in public folder. pdf files are getting saved in uploads folder but other details are not getting stored in mongo atlas server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h2>Personal Details</h2>
<div class="col-md-6 main">
<form action="/sign_up" method="POST">
<div class="form-group">
<label><b style="color: #fff;"><span style="color: red;">*</span> Name:- </b></label>
<input type="text" class="box" id="name" name="name" placeholder="Name" required />
</div>
<div class="form-group">
<label><b style="color: #fff;"><span style="color: red;">*</span> Contact No:- </b></label>
<input type="text" class="box" id="phone" name="phone" placeholder="Mobile" required />
</div>
<div class="form-group">
<label><b style="color: #fff;"><span style="color: red;">*</span> Email:- </b></label>
<input type="text" class="box" id="email" name="email" placeholder="Email" required />
</div>
<div class="form-group">
<label><b style="color: #fff;"><span style="color: red;">*</span> Address:- </b></label>
<input type="text" class="box" id="address" name="address" placeholder="address" required />
</div>
<div class="form-group">
<label><b style="color: #fff;"><span style="color: red;">*</span> Experience:- </b></label>
<select name="" style="width:100%; height: 30px; border-radius: 5px;" id="experience">
<option type="fresher" id="fresher" name="fresher" value="fresher">fresher</option>
<option type="experienced" id="experienced" name="experienced" value="experienced">experienced</option>
</select>
</div>
<div class="form-group">
<select name="" style="width:100%; height: 30px; border-radius: 5px;" id="experience">
<option type="experienced" id="experienced" name="experienced" value="experienced">0 year</option>
<option type="experienced" id="experienced" name="experienced" value="experienced">0-1 year</option>
<option type="experienced" id="experienced" name="experienced" value="experienced">1-2 year</option>
<option type="experienced" id="experienced" name="experienced" value="experienced">2-3 year</option>
<option type="experienced" id="experienced" name="experienced" value="experienced">3-4 year</option>
<option type="experienced" id="experienced" name="experienced" value="experienced">4-5 year</option>
</select>
</div>
<div id="tags">
<label><b style="color: #fff;"><span style="color: red;">*</span> Skills:- </b></label><br>
<input style="width:100%" type="text" value="" placeholder="Add a skill" />
</div>
<form action="/uploadResume" method="post" enctype="multipart/form-data">
</form>
<br>
<div class="form-group">
<label><b style="color: #fff;"><span style="color: red;">*</span> Resume/CV:- </b></label><br>
<form action="/uploadResume" enctype="multipart/form-data" method="POST">
<input style="padding-top: 0px; align-content: center; background-color: white;"
type="file"
id="file"
name="Resume"
multiple/> <br>
<button type="submit" class="btn btn-light btn-m" >Submit</button>
</form>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script>
jQuery(function($) {
$('#tags input').on('focusout', function() {
var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
if (txt) $(this).before('<span class="tag">' + txt + '</span>');
this.value = "";
this.focus();
}).on('keyup', function(e) {
// comma|enter (add more keyCodes delimited with | pipe)
if (/(188|13)/.test(e.which)) $(this).trigger('focusout');
});
$('#tags').on('click', '.tag', function() {
if (confirm) $(this).remove();
});
});
</script>
</body>
<script type="text/javascript">
document.getElementById("file").value = "";
</script>
</html>
index.js this is main js file. I have created upload folder to save pdf files in it. also installed all the dependencies. I have remove api link in below code but added the mongo atlas api, so dont worry about api.
var express = require("express")
var bodyParser = require("body-parser")
var mongoose = require("mongoose")
const multer = require("multer")
const path = require("path")
const app = express()
app.set("views",path.join(__dirname,"views"))
app.set("view engine","ejs")
app.use(bodyParser.json())
app.use(express.static('public'))
app.use(bodyParser.urlencoded({
extended:true
}))
mongoose.connect('mongodb api',{
useNewUrlParser: true,
useUnifiedTopology: true
});
var db = mongoose.connection;
db.on('error',()=>console.log("Error in Connecting to Database"));
db.once('open',()=>console.log("Connected to Database"))
app.post("/sign_up",(req,res)=>{
var name = req.body.name;
var phone = req.body.phone;
var email = req.body.email;
var address = req.body.address;
var fresher = req.body.fresher;
var experienced = req.body.experienced;
var data = {
"name": name,
"email" : email,
"phone": phone,
"address" :address,
"experience" :fresher,experienced,
}
db.collection('users').insertOne(data,(err,collection)=>{
if(err){
throw err;
}
console.log("Record Inserted Successfully");
});
return res.redirect('submit.html')
})
app.get("/",(req,res)=>{
res.set({
"Allow-access-Allow-Origin": '*'
})
return res.redirect('index.html');
}).listen(3000);
var storage = multer.diskStorage({
destination: function (req, file, cb) {
// Uploads is the Upload_folder_name
cb(null, "uploads" ,"/sign_up")
},
filename: function (req, file, cb) {
cb(null, file.fieldname + "-" + Date.now()+".pdf")
}
})
const maxSize = 1 * 1000 * 1000;
var upload = multer({
storage: storage,
limits: { fileSize: maxSize },
fileFilter: function (req, file, cb){
var filetypes = /|pdf|/;
var mimetype = filetypes.test(file.mimetype);
var extname = filetypes.test(path.extname(
file.originalname).toLowerCase());
if (mimetype && extname) {
return cb(null, true);
}
cb("Error: File upload only supports the "
+ "following filetypes - " + filetypes);
}
}).single("Resume");
app.get("/",function(req,res){
res.render("index.html");
})
app.post("/uploadResume",function (req, res, next) {
upload(req,res,function(err) {
if(err) {
res.send(err)
}
else {
return res.redirect('submit.html')
}
})
})
console.log("Listening on PORT 3000");
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|