How to display all images from gridfs - node.js

I was thinking there should be an fs.files.findAll() so I could get all the file names and display it on the page. right now I could only find one at I time and I could display them. I want to have an index page with all the images in the DB.
const mongoose = require("mongoose");
const Grid = require("gridfs-stream");
const fs = require("fs");
const express = require("express");
const app = express("/")
mongoose.connect("mongodb://localhost/newDb");
const conn = mongoose.connection;
app.set("view engine", "ejs"); // set the view engine
app.use(express.static("public"));
const uploadImages = require("./uploadImages");
const getAllImages = require("./getAllImages");
console.log(mongoose.connection.readyState);
app.get("/:img", (req, res) => {
getAllImages(conn, req.params.img, res)
})
app.get("/", (req, res) => {
//render all images on page
//how do I find how many images are in the DB
//and to get the file names to pass to ejs
//so I could do forloop to get // img src "/image1.jpg"
})
app.listen(3000, (err) => {
console.log("listening on port 3000")
})
In getAllImages
const mongoose = require("mongoose");
const Grid = require("gridfs-stream");
const fs = require("fs")
function getAllImages(conn, img, response){
const gfs = Grid(mongoose.connection.db, mongoose.mongo);
const readStream = gfs.createReadStream({
filename :img
})
readStream.on("error" , function(err){
console.log("An error: ", err);
})
readStream.pipe(response);
// mongoose.connection.db.listCollections( (err, names) => {
// console.log(names);
// })
}
module.exports = getAllImages;

This is how I did it:
const Schema = mongoose.Schema;
const Image = mongoose.model("Image",
new Schema({filename : String, contentType : String, uploadDate : Date}),
"fs.files"
);
then
app.get("/", (req, res) => {
Image.find()
.then((docs) =>{
var imageNames = docs.map((e) => {
return e.filename
})
res.render("index", {
imageNames
})
console.log(docs)
})
})
in index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<h1>Hello</h1>
<% imageNames.forEach((e) =>{ %>
<a href = <%=e %>><%=e.split(".")[0]%></a>
<img src = "/<%=e%>"> <br>
<%})%>
</body>
</html>
I didn't want to set up the mongoose mode. I heard mongoose needs that. Is there another way using gridf-stream?

Related

Export the data from a Mongo DB database in a CSV

I have a project in Node JS in which I want to export the data contained in the database in Mongo DB in a CSV file through a button in the view (index.ejs).
I am using mongoose for the connection to the database and to export the data to the CSV I am trying to use json-2-csv.
In the button I have added a url to be able to call that url through the button and that the json-2-csv function responds to that url but I don't know how to do it or if it is the best way.
This is my app.js:
const fs = require('fs');
const json2csv = require("json2csv").Parser;
const userModel = require('./models/users');
const express = require("express");
const app = express();
app.get('/export/csv', async (req, res) => {
await userModel.find((err, data) => {
if (err) throw err;
const json2csvParser = new json2csv({ header: true });
const csvData = json2csvParser.parse(data);
fs.writeFile("users.csv", csvData, function(error) {
if (error) throw error;
console.log("Write to bezkoder_mongodb_fs.csv successfully!");
});
});
});
This is the button:
<form action="/export/csv" mehotd="GET">
<button id="export-csv">Export CSV</button>
</form>
You can achieve all these things in your single file app.js file. We need to have json2csv module because this module has the parser class so that we can use parse() method to get the CSV format data as String. Here lean options tell mongoose to skip instantiating a full Mongoose document and just give you the Plain Old JavaScript Object POJO. And also I have used username and password as documents so change it accordingly.
const path = require('path');
const ejs = require('ejs');
const fs = require('fs');
const express = require('express');
//You need to have some documents into your DB first
const Collection = require('your/Modal Path');
const Json2csvParser = require("json2csv").Parser;
const app = express();
const port = process.env.PORT || 3000;
//Templating Engine Ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
//Middleware
app.use(express.urlencoded({
extended: true
}));
app.use(express.json());
//MONGO DB CONNECTION
const url = 'mongodb://localhost:27017/users';
mongoose.connect(url, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => {
console.log('Successfully Established Connection with MongoDB')
}).catch(err => {
console.log('Failed to Establish Connection with MongoDB with Error: ' + err);
process.exit();
});
app.get('/export/csv', async (req, res) => {
await Collection.find({}).lean().exec((err, data) => {
if (err) throw err;
const csvFields = ['_id', 'username', 'password']
console.log(csvFields);
const json2csvParser = new Json2csvParser({
csvFields
});
const csvData = json2csvParser.parse(data);
fs.writeFile("bezkoder_mongodb_fs.csv", csvData, function(error) {
if (error) throw error;
console.log("Write to bezkoder_mongodb_fs.csv successfully!");
});
res.send('File downloaded Successfully')
});
});
//HOME route
app.get('/', (req, res) => {
res.render('home.ejs');
});
//listening to the PORT Number
app.listen(port, console.log(`Server is running at ${port}`));
So, this is how your app.js file will look like. And also create a home.ejs file inside views directory like views/home.ejs. and add the below code:
<form action="/export/csv" mehotd="GET">
<button id="export-csv">Export CSV</button>
</form>

Getting TypeError: Cannot read property 'content-length' of undefined When Using Node.js Formidable

I'm trying to console.log a number I type in an input using formidable. I am getting an error that says TypeError: Cannot read property 'content-length' of undefined. I have tried to add a fs.readFile into the code and it won't work.
Here is my app.js
const express = require('express');
const http = require('http');
const formidable = require('formidable');
const fs = require('fs');
const ejs = require('ejs');
const path = require('path');
const multer = require('multer');
const upload = multer({ dest: 'upload/'});
const type = upload.fields([{ name: 'gradeNumber', maxCount: 10 }]);
const app = express();
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'ejs');
app.get('/fileupload', function (req, res) {
res.render("upload")
});
app.post('/fileupload', function (req, res) {
const form = new formidable.IncomingForm();
form.parse(function (err, fields, files) {
console.log(fields.gradeNumber);
const oldpath = files.filetoupload.path;
const newpath = 'C:/Users/Shubh Computer/Desktop/VSCode/Grades/1/' + files.filetoupload.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
});
app.listen(3000);
upload.ejs
<!DOCTYPE html>
<html>
<head>
<title>Upload File</title>
</head>
<body>
<form action="fileupload" method="post" enctype="multipart/form-data">
<input type="file" name="filetoupload"><br>
<label>What Grade</label><input type="text" name="gradeNumber"><br>
<input type="submit">
</form>
</body>
</html>
I'm trying to log the input with the name "gradeNumber". If somebody could help me I will be very grateful because I've gotten very frustrated with this.
"req" parameter in form.parse() method is omitted.
(method) IncomingForm.parse(req: IncomingMessage, callback?: (err: any, fields: Fields, files: Files) => any): void
Try changing the code as below.
app.post('/fileupload', function (req, res) {
const form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
console.log(fields.gradeNumber);
const oldpath = files.filetoupload.path;
const newpath = 'C:/Users/Shubh Computer/Desktop/VSCode/Grades/1/' + files.filetoupload.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
});

How can I list all the files in a directory node.js EJS

I am making a video player app, I want to list all the files in my directory to access through the server. I am also using authentication through MongoDB. I want to list all the files in the videos.ejs page so that user can see the listing of the files in the directory and access those files.
I am using node.js and EJS but I am stuck. It would be really nice if you help me with this. Here is my app.js:
//jshint esversion:6
require('dotenv').config();
const express = require ("express");
const bodyParser = require ("body-parser");
const ejs = require ("ejs");
const mongoose = require("mongoose");
const encrypt = require("mongoose-encryption");
const testFolder = 'public/vids/';
const fs = require('fs');
const app = express();
var list = "" ;
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));
mongoose.connect("mongodb://localhost:27017/userDB", {useNewUrlParser: true});
const userSchema = new mongoose.Schema({
email: String,
password: String
});
const secret = "Thisismylilkey";
userSchema.plugin(encrypt, {secret: secret, encryptedFields: ['password'] });
console.log(fs.readdirSync);
const User = new mongoose.model("User", userSchema);
app.use(express.static("public"));
app.get("/register", function(req, res){
res.render("register");
});
app.post("/register", function (req, res) {
const newUser = new User({
email: req.body.username,
password: req.body.password
});
newUser.save(function(err){
if(err){
console.log(err);
}else{
res.render("home");
}
});
});
app.get("/", function (req, res) {
res.render("login");
});
app.post("/", function (req, res) {
const username = req.body.username;
const password = req.body.password;
User.findOne({ email: username }, function (err, foundUser) {
if (err) {
console.log(err);
} else {
if (foundUser) {
if (foundUser.password === password) {
res.render("home");
app.get("/home", function (req, res) {
res.render("home");
});
app.get("/music", function (req, res) {
res.render("music");
});
app.get("/videos", function (req, res) {
fs.readdir(testFolder, (err, files) => {
files.forEach(file => {
list = file;
console.log(list);
});
});
res.render("videos", { listing: list });
});
app.get("/documents", function (req, res) {
res.render("docs");
});
app.get("/photos", function (req, res) {
res.render("photos");
});
app.get("/player", function(req, res){
res.render("player")
});
}else{
res.send("Get the hell out of here :p")
}
}
}
});
});
app.listen(3000, '0.0.0.0' ,function(){
console.log("server started at port 3000");
});
Here is my videos.ejs:
<%- include("partials/header"); -%>
<h1 class="pg-title">videos</h1>
<div>
<video width="auto" height="240" controls>
<source src="/vids/<%= listing %>" type="video/mp4">
</video>
<%= listing %>
<h1>name <%= listing %> </h1>
</div>
<%- include("partials/footer"); -%>
In your post / route you are routing all paths, which is WRONG way on doing, you will need to create a separate route for all separate paths.
Now answering your primary question,
there is an inbuilt fs module in node.js using it you can get all files and folders in a specific path, check this https://nodejs.org/api/fs.html for more details,
Sample code to read files in the given path, instead of logging you can send files variable in below example to ejs to render it, (also path name I used below is of where my app.js is present viz __dirname)
let fs = require('fs');
let files = fs.readdirSync(__dirname);
console.log(files);

Why won't any of my http methods work from my new router folder? and how can I fix it?

This is my first web dev project. I am basically trying to make a simple website to sell light sabers. The goal is to be able to create an account, login, add, edit and delete light sabers. Be able to add them to cart and checkout. I am using node.js, express, and mongoDB in visual studio code. I am also learning github throughout the process. As of now I have the layout of the website mostly set up. Am able to create accounts and login. I am currently stuck on creating items(light sabers) and saving them in the mongoDB database. Specifically my http methods in the routes/items files are not working, they were working previously in the app.js file but I decided to move everything for organizational purposes. Again, this is my first time working with any of this tech and this project is a work in progress, any input is appreciated. Thanks.
Here is my code: There is a lot of code not being used and its kind of a mess. I know..
app.js file:
const express = require("express");
const session = require("express-session");
var mongoose = require("mongoose");
var passport = require("passport");
var bodyParser = require('body-parser');
var localStrategy = require('passport-local');
var passportLocalMongoose = require("passport-local-mongoose");
var router = express.Router();
const app = express();
const indexRouter = require('./routes/index')
const itemsRouter = require('./routes/items')
//npm install ejs body-parser mongoose passport passport
var uri = "mongodb://username:password#cluster0-shard-00-00-
hnxfk.mongodb.net:27017,cluster0-shard-00-01-
hnxfk.mongodb.net:27017,cluster0-shard-00-02-
hnxfk.mongodb.net:27017/test?
ssl=true&replicaSet=Cluster0-shard-
0&authSource=admin&retryWrites=true&w=majority";
var localHost = "mongodb://localhost:27017/Project2SamJoshEricRoy"
mongoose.connect(uri,{useNewUrlParser: true, useUnifiedTopology:
true });
var User = require('./models/user');
var Item = require('./models/item');
// var app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
app.use(require('express-session')({
secret: "application secret shhhh",
resave: false,
saveUninitialized: false
}));
passport.use(new localStrategy(User.authenticate()))
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
app.use(express.static(__dirname + '/public'));
app.use(passport.initialize());
app.use(passport.session());
app.use('/', indexRouter)
app.use('/items', itemsRouter)
//create account
app.get("/createAccount",(req,res)=> {
res.render("createAccount");
});
app.get('/createAccount', function(req,res) {
res.render('createAccount');
});
app.post("/createAccount",(req,res)=> {
req.body.username;
req.body.password;
User.register(new
User({username:req.body.username}),req.body.password,
(err,user) =>{
if(err) {
console.log(err);
return res.render("createAccount");
}
passport.authenticate("local")(req,res,() => {
res.redirect('/login');
console.log(req.body.username
+ " " + req.body.password);
console.log(user);
});
});
});
//login
app.get("/login",(req,res) => {
res.render("login")
User.find(function(err,users) {
if(err) {
console.log(err);
}
// console.log(users);
})
});
app.post('/login',passport.authenticate("local",{
successRedirect: "/lightsabers",
failureRedirect: "/login"
}),(req,res)=> {
});
function isLoggedIn(req,res,next) {
console.log("CALL")
if(req.isAuthenticated()) {
console.log("logged in ");
return next();
}
res.redirect("/login");
console.log("error logging in");
}
//logout
app.get("/logout",(req,res)=> {
req.logout();
res.redirect('/');
});
//lightsabers
//app.get("/lightsabers",isLoggedIn,(req,res)=> {
//res.render("lightsabers",{user: req.user});
//console.log(req.user);
//});
//shopping cart
app.get("/cart",(req,res)=> {
res.render("cart");
});
app.get('/createLightsaber',(req,res)=> {
res.render("newItem",{user:req.User});
console.log("user is with us");
console.log(req.user)
});
app.get('/updateItem',(req,res)=> {
res.render("updateLightsaber");
});
app.get('/deleteLightsaber',(req,res)=> {
res.render("updateLightsaber");
});
/routes/index.js file:
const express = require('express')
const router = express.Router()
router.get('/', (req, res) => {
res.render('index')
})
module.exports = router
routes/items.js
const express = require('express')
const router = express.Router()
const Item = require('../models/item')
//display page
router.get("/",(req,res)=> {
res.render("newItem");
});
// all items route
router.get('/', async (req, res) =>{
try{
const items = await Item.find({})
res.render('items/newItem', {item: new Item() })
} catch {
res.redirect('/')
}
})
//new item route (display form)
router.get('/newItem', (req, res) => {
res.render('items/newItem', {item: new Item() })
})
// create new item route (actual creation)
router.post('/newItem', async (req,res) => {
const item = new Item({
color:req.body.color,
price:req.body.price,
link:req.body.link
})
try{
const newItem = await item.save()
res.redirect('lightsabers')
} catch {
res.render('items/newItem', {
item: item,
errorMessage:'Error creating item'
})
}
})
/update item
app.get("/updateItem",(req,res)=> {
res.render("updateItem");
});
module.exports = router
newItem.ejs
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" href="/css/styles.css"/>
</head>
<body>
<h1> Adding New Item </h1>
<form action="/items" method="POST">
<h2>
Color: <input type="text" name="color"><br>
Price: <input type="text" name="price"><br>
Image Link:<input type="text" name="link"><br>
<br><br>
<button id="addItem">Add Item</button>
<%= typeof(message) != "undefined"?message:"" %>
</h2>
</form>
<form action="/lightsabers">
<h2><button> Back </button></h2>
</form>
<script type="text/javascript" src="../public/app.js">
</script>
</body>
</html>
If you wish to see any other parts of the code let me know. I may be forgetting something important.

Getting all the images uploaded from MongoDB

I made a upload image to a document and saved the path to the MongoDB , While retrieving the Image, It is showing only the current image which is being uploaded. I want to show all the images which is uploaded to the database. Please help me to display all the images from the Data base.
Thank you in advance :)
var express = require('express'); //Express Web Server
var busboy = require('connect-busboy'); //middleware for form/file upload
var path = require('path'); //used for file path
var fs = require('fs-extra'); //File System - for file manipulation
var mongoose = require('mongoose');
var handlebars = require('handlebars');
var mongoClient = require('mongodb').mongoClient;
var objectId = require('mongodb').ObjectId;
var app = express();
app.use(busboy());
app.use(express.static(path.join(__dirname, 'public')));
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost:27017/postname');
/* ==========================================================
Create a Route (/upload) to handle the Form submission
(handle POST requests to /upload)
Express v4 Route definition
============================================================ */
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(__dirname + '/public'));
//You can import your schema like this
const Name = require('./name');
app.get('/', function(req, res, next) {
res.render('index',{'title': 'New post app'});
});
//I have changed your route since it seems to be clashing with the above
app.post('/save' ,function (req, res, next) {
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function(fieldname, file, filename, done){
console.log("Uploading" + filename);
//path where the file is being uploaded
fstream = fs.createWriteStream(__dirname + '/public/uploads/' + filename);
var dirname = path.join( 'uploads/' + filename);
file.pipe(fstream);
fstream.on('close', function(){
console.log("Upload Success" + filename);
let name = new Name({
path: dirname
});
name.save((err)=>{
if(err) throw err;
console.log(`saved : ${name}`);
res.redirect('/profile');
call(dirname);
});
});
});
});
function call(dirname){
Name.findOne({path: dirname}, (err, result) =>{
if(err) throw err;
var imgpath = result.path;
console.log("Saved check" + imgpath);
app.get('/profile', (req, res) =>{
res.render('profile',{
photo: req.result,
result : imgpath
});
});
});
}
var server = app.listen(3030, function() {
console.log('Listening on port %d', server.address().port);
});
My name.js file Mongoose Schema
let mongoose = require('mongoose');
let Schema = mongoose.Schema;
let compileSchema = new Schema({
path: String
});
let Compile = mongoose.model('Compiles', compileSchema);
module.exports = Compile;
Views File to display the image
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>Welcome</h1>{{result}}<br><br>
<img src="{{result}}" height="180" width="250">
</body>
</html>
You are using findOne which only retrieves one object from the database. So if you want to retrieve all the images your code should be something like this :
var express = require('express') // Express Web Server
var busboy = require('connect-busboy') // middleware for form/file upload
var path = require('path') // used for file path
var fs = require('fs-extra'); // File System - for file manipulation
var mongoose = require('mongoose')
var handlebars = require('handlebars')
var mongoClient = require('mongodb').mongoClient
var objectId = require('mongodb').ObjectId
var app = express()
app.use(busboy())
app.use(express.static(path.join(__dirname, 'public')))
mongoose.Promise = global.Promise
mongoose.connect('mongodb://localhost:27017/postname')
/* ==========================================================
Create a Route (/upload) to handle the Form submission
(handle POST requests to /upload)
Express v4 Route definition
============================================================ */
app.set('view engine', 'hbs')
app.set('views', path.join(__dirname, 'views'))
app.use(express.static(__dirname + '/public'))
// You can import your schema like this
const Name = require('./name')
app.get('/', function (req, res, next) {
res.render('index', {'title': 'New post app'})
})
// I have changed your route since it seems to be clashing with the above
app.post('/save' , function (req, res, next) {
var fstream
req.pipe(req.busboy)
req.busboy.on('file', function (fieldname, file, filename, done) {
console.log('Uploading' + filename)
// path where the file is being uploaded
fstream = fs.createWriteStream(__dirname + '/public/uploads/' + filename)
var dirname = path.join( 'uploads/' + filename)
file.pipe(fstream)
fstream.on('close', function () {
console.log('Upload Success' + filename)
let name = new Name({
path: dirname
})
name.save((err) => {
if (err) throw err
console.log(`saved : ${name}`)
res.redirect('/profile')
// removed call(), no need for it
})
})
})
})
app.get('/profile', (req, res) => {
// get all documents in the db by using find with no conditions
Name.find({}, (err, results) => {
if (err) throw err
var images = []
for (var result of results) {
images.push(result.path)
}
res.render('profile', {
images: images
})
})
})
var server = app.listen(3030, function () {
console.log('Listening on port %d', server.address().port)
})
And in the views you should loop through the images to display them, i believe you are using handlebars so the view should be something like this :
<html>
<head>
<title>User Profile</title>
</head>
<body>
<h1>Welcome</h1>
{{#each images}}
<img src="{{this}}" height="180" width="250">
{{/each}}
</body>
</html>

Resources