express + pug app, update multiple routes when txt file changes? - javascript

I have a simple express + app that consists of two views. localhost:xxxx/ and localhost:xxxx/view view simply displays a number read from a text file, the index route allows the user to increment that number, and also displays it. These two views will be displayed in different browser tabs, and I am using Pug templates. I have the index view updating fine, but cannot figure out how to update both views when the value in the text file changes.
Main router file
router.get('/', function(req, res) {
let data = fs.readFileSync('./data.txt', 'utf8');
let number = parseInt(data);
res.render('index', { number });
})
router.post('/', countController.increment);
router.get('/view', countController.readFile);
Controller
exports.increment = (req, res) => {
let data = fs.readFileSync('./data.txt', 'utf8');
let number = parseInt(data);
number++;
fs.writeFile('./data.txt', number, function() {
res.render('index', { number });
});
}
exports.readFile = (req, res) => {
let number = fs.readFileSync('./data.txt', 'utf8');
res.render('view', { number })
}
Is there a way to update both views that are running in separate browsers, or do i need to use something like socket.io? Thanks!

Thanks for the tip on websockets! This post led me in the direction to solve it, passing in socketio to my router. Use socket.io inside a express routes file

Related

how to display data to ejs from API (express js)

Using express js, i want to render json that has been produced by my to ejs file.
here is my controller that produce json
const getAllQuotes = asyncWrapper(async (req, res) => {
const quotes = await qSchema.find({});
res.status(200).json({ quotes });
});
I want to pass the JSON from controller to my router below, then what my router does is bring the data and show the data to admin page
adminRoute.get('/', async (req, res) => {
//what should i type here?
res.render("admin")
})
or maybe my question is about how the data can be thrown/passed in between js file
Don't make HTTP requests from your server back to your server.
You have a function that gets your data. Use that function.
adminRoute.get('/', async (req, res) => {
const quotes = await qSchema.find({});
res.render("admin", { quotes });
})

Access express response data client side

In my express router I check if the data inserted on a form are valid then if they are I render another page passing form data. I would like to access the data I pass client-side. On the chat.ejs view I have a chatroom.js client file, I want to access the data there without having to access them in a script tag.
I thought about using Ajax but the only answer I found here on StackOverflow was marked as wrong, so how do I go about that?
router.js
module.exports=function(app) {
const express = require('express');
const router = express.Router();
const {check, validationResult} = require('express-validator');
const {matchedData} = require('express-validator/filter');
router.get('/', (req, res) => {
res.render('index', {
data: {},
errors: {}
})
});
router.post('/enter', [
check('username')
.isLength({min: 1})
.withMessage('Username is required').trim(),
check('room')//implement personalized check
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.render('index', {
data: req.body,
errors: errors.mapped()
})
}
else {
const data = matchedData(req);
return res.render('chat',{
user: data.username,
room:data.room
})
}
});
return router;
//MOVE TO SUPPORT
function find(name) {
return 1;
}
}
there is really nothing client-side so far so It seems useless just posting my views. Alternatively, I could use Ajax on client.ejs to handle the form submission but I would like to keep this clean and handle the routing with the router file.
I ended up creating two global variables in a script tag for my index.ejs page like this
<script>
var user = <%- JSON.stringify( user ) %>
var room = <%- JSON.stringify(room)%>;
</script>
and then I could access them in the chatroom.js file linked below

In Node.js and Pug, get the information from a form where items are created dynamically

I am trying to create an application that will have a user create a listing for trade and right now I am stuck on deleting listings when they are selected on a table on a main page. I have a form that I believe will be populated from data from an array passed into the page from a router. However whenever I try to console.log to see if the items are even being passed or data can be received, I get an error page that says the input(selected) that gets passed is undefined. Am I missing something or is this even possible in node.js/express?
Here is the code on the pug page with the form that makes the form and table for the listings
mixin getLists(listings)
each item in listings
tr
td.listcell
input(type="checkbox" name="selected" value=item.numID)
td.listcell #{item.name}
td.listcell #{item.data}
block.content
.holder
.listtable
h4.title Current Listings:
form(method="post" action="/deleteListings")
table.listings
tr
td.listcell
td.listcell Name
td.listcell Status
td.listcell Data
+pullinglists(lists)
input(type="submit" value="Delete Selected Listings")
Here is the code from my router for the site that deals with pushing listings to and trying to a dashboard and trying to remove them
const express = require('express');
const User = require('../core/user');
const router = express.Router();
const nodemailer = require('nodemailer');
const user = new User();
var listings = [];
router.get('/dashboard', (req, res, next)=> {
let user = req.session.user;
if(user)
{
res.render('dashboard', {opp:req.session.opp, name:user.username, listings:listings});
return;
}
res.redirect('/');
});
router.post('/generateListing', (req, res, next)=>{
if(req.body.name == null)
{
res.redirect('/dashboard');
}
var temp={name : req.body.name,
status: "Pending",
otherData: req.body.data,
numID: numberID
};
numberID++;
listings.push(temp);
res.redirect('/dashboard');
});
router.post('/deleteListing', (req, res, next)=>{
var i;
console.log(selected.value);
if(req.body.selected != null)
{
for(i=0; i<req.body.selected; i++)
{
//remove selected items from the array
}
}
res.render('/dashboard');
});
I am somewhat a beginner to node and express so I apologize if there is anything really obvious that I am missing here.
EDIT- Thank you MikZuit for pointing me to the correction I needed.
Instead of
console.log(selected.value);
It should have been
console.log(req.body.selected.value);
Which then lead me to the following to deleting the form entry
if(req.body.selected != null)
{
var i;
for(i=0; i<req.body.selected.length; i++)
{
var elementToBeDeleted = listings.indexOf(req.body.selected[i]);
listings.splice(elementToBeDeleted, 1);
}
}
res.redirect('/dashboard');
You have this in the template:
form(method="post" action="/deleteListings")
So I would expect to see some code starting with this on the server side:
router.post('/deleteListings', (req, res, next) => {
Otherwise, where would the form be POSTing to?
EDIT: You want to add this in before you call app.listen:
app.use(express.json())
That way you can access req.body and get an object with all of the field names and values that you're sending from the form.
You might also need to set application/x-www-form-urlencoded as the Content-Type in your form, I'm not sure what the default is but that's what I use.

Full control over files sent with ajax in nodejs

I use multer to parse multiple files sent as multipart/data-form with axios
...
const storage = multer.diskStorage({
destination: './gallery',
filename(req, file, cb) {
(1) ....
},
});
const upload = multer({ storage });
router.post('/products', upload.array('images'), (req, res, next) => {
Product.create(...)
.then((product) => {
(2) ...
})
.catch(..)
})
...
at this point everything is fine and my images are saved.
the problem is that i want to make a loop in (1) or (2) and name my files like this
files.forEach((file, index) => {
// rename file to => product_id + '_' + index + '.jpeg'
}
For example if i have 3 files they will be named to
5a9e881c3ebb4e1bd8911126_1.jpeg
5a9e881c3ebb4e1bd8911126_2.jpeg
5a9e881c3ebb4e1bd8911126_3.jpeg
where 5a9e881c3ebb4e1bd8911126 is the id of the product document saved by mongoose.
how to solve this naming issue ?
is multer the best solution cause i want full control over my files ?
Is there a better approach with another node package ?
is it good to send images as multipart/data-form or data URL base64 ?
This is easy, as long as you understand how express works. So before jumping to solution its important to have a clear understanding.
When you have a express code like below
router.post('/abc', function(req, res) {res.send('hello world');})
Express passes the request from chains of middlewares/functions. Now each function gets req, res, next parameters. The next is function, which a middleware is suppose to call when the processing is complete. If the middleware decides not to call next the request ends there and no more middlewares are called further.
When we used function(req, res) {res.send('hello world');}, we didn't take the next parameter at all, which means we are not interested in any other code to do anything. Now getting back to our problem
router.post('/products', upload.array('images'), (req, res, next) => {...}
You have used upload.array('images') first and then your actual product creation code. So I would show two approaches to solve this problem
One more middleware to rename the files
router.post('/products', upload.array('images'), (req, res, next) => {
Product.create(...)
.then((product) => {
req.product = product
next();
})
.catch(..)
}, (req, res, next) => {
//Get the product id using req.product
//Move the files as per the name you desire
})
Reverse the processing order
In this approach you first create the product and then let image processing happen. I have created a sample for the showing the same
let express = require('express');
let bodyParser = require('body-parser');
app = express();
let multer = require('multer');
const storage = multer.diskStorage({
destination: './gallery',
filename: (req, file, cb) => {
console.log('Product id - ' + req.product_id);
cb(null, req.product_id + '.js');
},
});
const upload = multer({ storage });
app.all('/', (req, res, next) => {
console.log('Hello you');
promise = new Promise((resolve) => {
// simulate a async product creation
setTimeout(() => resolve(1234), 100);
});
promise.then((product_id) => {
console.log('create the product and get the new product id')
// set the product id in the request object, so the multer
// filename function can access it
req.product_id = product_id;
res.send('uploaded files');
if (next)
next();
});
}, upload.array('images'));
module.exports = {
app
};
app.listen(8020);
And testing it using postman works fine
Edit: 19-Mar-2018
For multiple files you can easily update your filename function code like below
const storage = multer.diskStorage({
destination: './gallery',
filename: (req, file, cb) => {
req.file_id = req.file_id || 0;
req.file_id++;
console.log('Product id - ' + req.product_id);
cb(null, req.product_id +'_' + req.file_id +'.js');
},
});
This will make sure that you get all the files for that product. Now coming to your questions
how to solve this naming issue ?
This answer already does that
is multer the best solution cause i want full control over my files ?
I can't say, as long it works and does what you want, it should be good enough
Is there a better approach with another node package ?
I couldn't find lot of packages. But you can explore this if you want
is it good to send images as multipart/data-form or data URL base64 ?
I would use multipart/data-form, so that no base64 conversion is needed at client side. But again this is a matter of opinion as well.
You can't set the name purely in (1) since at that point you do not know the ID of the product yet.
You can't set the name purely in (2) since at that point the files have already been saved (with filename generated by your filename(req, file, cb) function).
So I think the best solution might be to move the files after they are uploaded.
This could be done in (2). When you process the files in the router, req.files will be an array of files that have already been uploaded.
In your promise callback for Product.create, you have access to the product (which you need for the ID) and the list of files (which you need for the number).
For that, you could use fs.rename(oldPath, newPath, callback).
https://nodejs.org/docs/latest/api/fs.html#fs_fs_rename_oldpath_newpath_callback
Something like this should work:
Product.create(...).then((product) => {
req.files.forEach((file, index) => {
// file.path is the full path to the file that was uploaded.
// newPath is where you want to put it.
// Let's use the same destination and just change the filename.
const newPath = file.destination + product.id + '_' + index
fs.rename(file.path, newPath)
})
})

Regarding routing in nodejs application

I had like 100 blogs on "/" page and also a link to Sortby Date:a-z When I click
these link I m transferred to different routes one is "/sort_by_date" and other is "/sort_alphabetically".I want this sorting to appear on "/".I m not able to do it on "/" page that is whay I had specified to different routes.I want this sorting to appear on "/" page by clicking to differnt links different sorting should be appear.This whole application is written in nodejs Mongoose express.
The homepage of the blog
router.get('/', function (req, res) {
var q= blog.find({}).limit(100);
q.exec(function(err,docs)
{
res.render('blog',{"no_of_blogs":docs
,"in_ca":true })
});
});
The page which is sorting by date
router.get('/sort_by_date', function (req, res) {
blog.find({},{sort:{date:-1}},function (err, docs) {
res.render('index_date_blog',{"no_of_blogs":docs
,"in_ca":true })
});
});
This is the page sorted by alphabetically
router.get('/sort_alphabetically', function (req, res) {
blog.find({},{sort:{title}},function (err, docs) {
res.render('index_date_blog',{"no_of_blogs":docs
,"in_ca":true })
});
});
Thanks in advance.
Use the query string to pass in the sort variable.
Make your links to change the sort link to ?sort=title or ?sort=date
Note, below code is not tested, but should help you along the way:
router.get('/', function (req, res) {
var sortQuery = req.query.sort;
var sort = {};
if(sortQuery=='date')
sort={date:-1}
if(sortQuery=='title')
sort={title: 1}
var q= blog.find({}).limit(100).sort(sort);
q.exec(function(err,docs)
{
res.render('blog',{"no_of_blogs":docs ,"in_ca":true })
});
});

Categories

Resources