Node JS – Auto Generate a Photo Gallery from a Directory

In my previous articles, I wrote tutorial on this topic but it was in PHP, in this post I would like to show you, how you can generate a photo gallery based on the images within given directory using Node js as a platform, express js as framework.

I am not going to write about express js or node js here, as that topics are out of scope for this tutorial, lets focus on topic directly, if you need more information on node js and express js please feel free to visit – https://nodejs.org/, https://expressjs.com/

This project is simple. We will use express web server which does the task of routing and html generation with pug template engine.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "photo-gallery",
  "version": "1.0.0",
  "description": "Node js – Auto Generate a Photo Gallery from a Directory",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "arjun <[email protected]>",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.2",
    "pug": "^2.0.0-beta11"
  }
}

Installing dependencies

Save the above json string in the package.json file, and from that folder, open your terminal and type

1
npm install

With issuing above command, node package manager will pull all the required dependencies into node_modules folder under your project root folder.

Create a file called server.js, you can name it as you wish but make sure to update package.json file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const fs = require('fs');
const express = require('express');
const app = express();
const path = require('path');
 
app.set('view engine', 'pug');
app.use('/static', express.static(path.join(__dirname, 'uploads')))
 
app.get('/get-images', (req, res) => {
    let images = getImagesFromDir(path.join(__dirname, 'uploads'));
     res.render('index', { title: 'Node js – Auto Generate a Photo Gallery from a Directory', images: images })
});
 
// dirPath: target image directory
function getImagesFromDir(dirPath) {
 
    // All iamges holder, defalut value is empty
    let allImages = [];
 
    // Iterator over the directory
    let files = fs.readdirSync(dirPath);
 
    // Iterator over the files and push jpg and png images to allImages array.
    for (file of files) {
        let fileLocation = path.join(dirPath, file);
        var stat = fs.statSync(fileLocation);
        if (stat && stat.isDirectory()) {
            getImagesFromDir(fileLocation); // process sub directories
        } else if (stat && stat.isFile() && ['.jpg', '.png'].indexOf(path.extname(fileLocation)) != -1) {
            allImages.push('static/'+file); // push all .jpf and .png files to all images
        }
    }
 
    // return all images in array formate
    return allImages;
}
 
app.listen(8080, function () {
    console.log(`Application is running at : localhost:8080`);
});

Here is my view file, which using pug template engine.

1
2
3
4
5
6
7
8
9
html  
  head
    title= title
  body
  h1=title
    ul
    each image in images
        li
            img(src=image width=300)

Running Project

Just issue following command form the terminal, but before doing that please update folder name and path from where you want to pull images.

1
npm server.js

Now point your to http://localhost:8080/get-images, you will get output similar to below,

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.