How to send file info from back end to front end using NodeJS.

There may be times as a developer where you’re creating a website/application where you need to access certain files, for example, images to reference to in your JavaScript files. However, JavaScript only functions on the front end. Because of this, there’s no regular way of contacting the back end. That’s where NodeJS running an Express server comes in handy.

Let’s start with a simple index.js file holding our routes:

var express = require('express');
var router  = express.Router();
router.get('/', function(req, res, next) {
    res.send('Hello, world!');
});

This requires only one package, but guess what. You don’t even need to install it! It’s built in. That package is the fs package, a.k.a. File System. We’ll be using the readdirSync() function, a sync function, to grab the files we want. At the top of the file, require the package, like so:

var fs = require('fs');

And now in the router function, we’ll add our readdirSync() function:

var folders = fs.readdirSync('/path/to/folders');

This will save the folder names of all folders from the path parameter into an array variable named folders. Simple as that! Now what do we do with this array variable? Well let’s create an array of objects. Each object will have two properties. The folder property which will be the name of the folder received, and the files property which will be an array of every file from the folder property. Let’s make a forEach() loop to create our array in the router function:

var objArray = [];
folders.forEach((folder) => {
    var obj    = {};
    var files  = fs.readdirSync('/path/to/folders/' + folder);
    obj.folder = folder;
    obj.files  = files;
    objArray.push(obj);
});

We now have an array of objects that look like this (made pretty):

[
  {
    "folder": "FOLDER_01",
    "files": [
      "FILE_01.jpg",
      "FILE_02.jpg",
      "FILE_03.jpg",
      "FILE_04.jpg"
    ]
  },
  {
    "folder": "FOLDER_02",
    "files": [
      "FILE_05.jpg",
      "FILE_06.jpg",
      "FILE_07.jpg",
      "FILE_08.jpg"
    ]
  },
  {
    "folder": "FOLDER_03",
    "files": [
      "FILE_09.jpg",
      "FILE_10.jpg",
      "FILE_11.jpg",
      "FILE_12.jpg"
    ]
  },
  {
    "folder": "FOLDER_04",
    "files": [
      "FILE_13.jpg",
      "FILE_14.jpg",
      "FILE_15.jpg",
      "FILE_16.jpg"
    ]
  },
  {
    "folder": "FOLDER_05",
    "files": [
      "FILE_17.jpg",
      "FILE_18.jpg",
      "FILE_19.jpg",
      "FILE_20.jpg"
    ]
  }
]

Awesome! Now the next thing to do is send this data from our Express server to the front end. In your router function, send the objArray in a JSON.stringify() function to our index view. For this example, we’ll be using Pug (my favorite):

res.render('index', { data: JSON.stringify(objArray) });

It’s that easy. Now we can manipulate this data however we want on the front end right? Not quite yet (sorta). Now if you’ll only be manipulating this data through Pug or whatever front end framework/templating engine you use, technically yes, that’s really all you need to do. However, if you want to use this data in your JavaScript files, they have no access to this data. So we need to store it in the DOM for us to access. There are multiple ways, but let’s just do the easiest method and save it in an element’s data attribute. In our index.pug view, simply create an element and save it:

div(data-objData=data)

Since we sent the objArray variable from our Express server as the name data we simply set the element’s data attribute to “data”. Just like that, we’ve finished everything! Your data is now accessible to your JavaScript files. Let’s take a look at what all we just did with our data.

Express server -> Pug template -> DOM

Now you may manipulate the data however you wish in your JavaScript. In case you missed something, here’s the full code:

var fs      = require('fs');
var express = require('express');
var router  = express.Router();
router.get('/', function(req, res, next) {
    var folders  = fs.readdirSync('/path/to/folders');
    var objArray = [];
    folders.forEach((folder) => {
        var obj    = {};
        var files  = fs.readdirSync('/path/to/folders/' + folder);
        obj.folder = folder;
        obj.files  = files;
        objArray.push(obj);
    });
    res.render('index', { data: JSON.stringify(objArray) });
});

I hope this tutorial was super easy to follow through. Feel free to ask questions, or visit my website.