Reading image files asynchronously and displaying them on the page

Question

I am trying to display images from a folder in my project using the "fs" module with NodeJS. I need to read all images in a directory and run them in a loop for them to be displayed. I was able to do it but I'm not sure if this is the proper or good way to do it.

I inserted my readdir (Reading Files Asynchronously) inside my Homepage route. The images were displayed but I have no one to ask if I did it the proper way.

const express = require('express');
const router = express.Router();
const fs = require('fs');
router.get('/', function(){ 
 fs.readdir('./assets/images/', (err, files) => {
 if(err) {
 throw err;
 }
 res.render('home', {
 files: files
 });
 });
});
module.exports = router;

• konijn: Perhaps you should also provide us the res.render function
• Vhin Gabuat: Hi @konijn, res.render function is from express module required on top, you can check here for reference --> expressjs.com/en/api.html#res.render . Thank you!

Answer 1

• Don't use callbacks, it's hard to read and maintain, the fs.readdir function will return a promise if you didn't provide a callback function.
• Use arrow functions when you could.
• Respond with an error instead of throwing (unless you have a catch wrapper middleware).
• Use property shorthands.
• You forgot req and res.

Try this:

const express = require('express');
const router = express.Router();
const fs = require('fs');
router.get('/', async (req, res) => { 
 try {
 const files = await fs.readdir('./assets/images/')
 res.render({ files }) // notice the property shorthand
 } catch (error) {
 res.status(404).json({ error })
 }
});
module.exports = router;

Answer 2

That's not a lot to review, but it looks textbook good.

If anything, the value of './assets/images/' could have been an upfront declared constant, or could have been retrieved from a configuration file.

• Vhin Gabuat: @konjin Thanks for making time reviewing my code, Your advice is highly appreciated! Thanks again!