Extending the application

Our file browser looks good so far. We can see the folders and files on our machine and can copy, move, or delete them. Also, we did all this with only HTML, CSS, and JavaScript. Let's continue and add a new feature. The application we wrote is run by Chromium. In other words, our HTML and CSS are rendered by the browser, so we can easily show images in it. In the next few pages, we will create a program picture viewer.

Tweaking the updateFileArea function

The first thing to do is find out whether the currently selected file is an image. We will display the JPEG and PNG files, so we should check whether the file matches one of these extensions. Before populating the html variable with the markup, we will extract the file's extension as it is done in the code below:

var updateFileArea = function(itemPath) {
  var html = '';
  api.csf = itemPath;
  if(itemPath) {
    fs.stat(itemPath, function(err, stat) {
      var ext = path.extname(itemPath).toLowerCase();
      var...