title: How to get the current directory name and display it on the html page using node.js
body: <p>Actually I have a path name in index.js file.whenever I select the directory, I'm able to see the current directory name in the node.js console screen.</p>
  
  <p>Now, I want to display that directory name into the text box of <code>template.html</code> page. Can anyone please help me out regarding this issue?</p>
  
  <p>In index.js, at this part I'm able to see the path name in the console:</p>
  
  <pre><code>app.get('/files', function(req, res) {
   var currentDir =  dir;
   var query = req.query.path || '';
   if (query) currentDir = path.join(dir, query);
   console.log("browsing ", currentDir);
  </code></pre>
  
  <p>My index.js:</p>
  
  <pre><code>#!/usr/bin/env node
  
  var http = require('http');
  var _ = require('lodash');
  var express = require('express');
  var fs = require('fs');
  var path = require('path');
  var util = require('util');
  
  var program = require('commander');
  
  function collect(val, memo) {
    if(val &amp;&amp; val.indexOf('.') != 0) val = "." + val;
    memo.push(val);
    return memo;
  }
  
  program
    .option('-p, --port &lt;port&gt;', 'Port to run the file-browser. Default value is 8088')
    .option('-e, --exclude &lt;exclude&gt;', 'File extensions to exclude. To exclude multiple extension pass -e multiple times. e.g. ( -e .js -e .cs -e .swp) ', collect, [])
    .parse(process.argv);
  
  var app = express();
  var dir =  process.cwd();
  app.use(express.static(dir)); //app public directory
  app.use(express.static(__dirname)); //module directory
  var server = http.createServer(app);
  
  if(!program.port) program.port = 8088;
  
  server.listen(program.port);
  console.log("Please open the link in your browser http://&lt;YOUR-IP&gt;:" + program.port);
  
  app.get('/files', function(req, res) {
   var currentDir =  dir;
   var query = req.query.path || '';
   if (query) currentDir = path.join(dir, query);
   console.log("browsing ", currentDir);
   fs.readdir(currentDir, function (err, files) {
       if (err) {
          throw err;
        }
        var data = [];
        files
        .filter(function (file) {
            return true;
        }).forEach(function (file) {
          try {
                  //console.log("processing ", file);
                  var isDirectory = fs.statSync(path.join(currentDir,file)).isDirectory();
                  if (isDirectory) {
                    data.push({ Name : file, IsDirectory: true, Path : path.join(query, file)  });
                  } else {
                    var ext = path.extname(file);
                    if(program.exclude &amp;&amp; _.contains(program.exclude, ext)) {
                      console.log("excluding file ", file);
                      return;
                    }       
                    data.push({ Name : file, Ext : ext, IsDirectory: false, Path : path.join(query, file) });
                  }
  
          } catch(e) {
            console.log(e); 
          }        
  
        });
        data = _.sortBy(data, function(f) { return f.Name });
        res.json(data);
    });
  });
  
  app.get('/', function(req, res) {
   res.redirect('lib/template.html'); 
  });
  </code></pre>
  
  <p>My template.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;File Browser&lt;/title&gt;
      &lt;link rel="stylesheet" href="/lib/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="/lib/app.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
     &lt;div id="panelDiv"&gt;
  
             &lt;div class="panel-heading"&gt;
                     &lt;button type="button" id="butDiv" &gt;Browse&lt;/button&gt;
                      &lt;input type="text" name="location"/&gt;
                     &lt;span class="up"&gt;
                      &lt;i class="fa fa-level-up"&gt;&lt;/i&gt; Up
                     &lt;/span&gt; 
             &lt;/div&gt;
        &lt;div id="showDiv" class="panel-body"&gt;
                &lt;table class="linksholder"&gt;
                &lt;/table&gt;
        &lt;/div&gt;
  
    &lt;/div&gt; 
      &lt;script src="/lib/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/datatable/js/jquery.datatables.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/app.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
   $("#butDiv").click(function(){
          $("#showDiv").toggle();
  
   });
  });  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My app.js :</p>
  
  <pre><code>(function($){
  
          var extensionsMap = {
                        ".zip" : "fa-file-archive-o",         
                        ".gz" : "fa-file-archive-o",         
                        ".bz2" : "fa-file-archive-o",         
                        ".xz" : "fa-file-archive-o",         
                        ".rar" : "fa-file-archive-o",         
                        ".tar" : "fa-file-archive-o",         
                        ".tgz" : "fa-file-archive-o",         
                        ".tbz2" : "fa-file-archive-o",         
                        ".z" : "fa-file-archive-o",         
                        ".7z" : "fa-file-archive-o",         
                        ".mp3" : "fa-file-audio-o",         
                        ".cs" : "fa-file-code-o",         
                        ".c++" : "fa-file-code-o",         
                        ".cpp" : "fa-file-code-o",         
                        ".js" : "fa-file-code-o",         
                        ".xls" : "fa-file-excel-o",         
                        ".xlsx" : "fa-file-excel-o",         
                        ".png" : "fa-file-image-o",         
                        ".jpg" : "fa-file-image-o",         
                        ".jpeg" : "fa-file-image-o",         
                        ".gif" : "fa-file-image-o",         
                        ".mpeg" : "fa-file-movie-o",         
                        ".pdf" : "fa-file-pdf-o",         
                        ".ppt" : "fa-file-powerpoint-o",         
                        ".pptx" : "fa-file-powerpoint-o",         
                        ".txt" : "fa-file-text-o",         
                        ".log" : "fa-file-text-o",         
                        ".doc" : "fa-file-word-o",         
                        ".docx" : "fa-file-word-o",         
                      };
  
    function getFileIcon(ext) {
      return ( ext &amp;&amp; extensionsMap[ext.toLowerCase()]) || 'fa-file-o';
    }
  
     var currentPath = null;
     var options = {
          "bProcessing": true,
          "bServerSide": false,
          "bPaginate": false,
          "bAutoWidth": false,
           "sScrollY":"250px",
          "fnCreatedRow" :  function( nRow, aData, iDataIndex ) {
            if (!aData.IsDirectory) return;
            var path = aData.Path;
            $(nRow).bind("click", function(e){
               $.get('/files?path='+ path).then(function(data){
                table.fnClearTable();
                table.fnAddData(data);
                currentPath = path;
              });
              e.preventDefault();
            });
          }, 
          "aoColumns": [
            { "sTitle": "", "mData": null, "bSortable": false, "sClass": "head0", "sWidth": "55px",
              "render": function (data, type, row, meta) {
                if (data.IsDirectory) {
                  return "&lt;a href='#' target='_blank'&gt;&lt;i class='fa fa-folder'&gt;&lt;/i&gt;&amp;nbsp;" + data.Name +"&lt;/a&gt;";
                } else {
                  return "&lt;a href='/" + data.Path + "' target='_blank'&gt;&lt;i class='fa " + getFileIcon(data.Ext) + "'&gt;&lt;/i&gt;&amp;nbsp;" + data.Name +"&lt;/a&gt;";
                }
              }
            }
          ]
     };
  
    var table = $(".linksholder").dataTable(options);
    console.log(table);
  
    $.get('/files').then(function(data){
        table.fnClearTable();
        table.fnAddData(data);
    });
  
    $(".up").bind("click", function(e){
      if (!currentPath) return;
      var idx = currentPath.lastIndexOf("/");
      var path =currentPath.substr(0, idx);
      $.get('/files?path='+ path).then(function(data){
          table.fnClearTable();
          table.fnAddData(data);
          currentPath = path;
      });
    });
  })(jQuery);
  </code></pre>
  
  <p>Current Browse Format :</p>
  
  <p><a href="https://i.stack.imgur.com/JlYzi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JlYzi.png" alt="enter image description here"></a></p>
  
  <p>Required Browse Format :
  <a href="https://i.stack.imgur.com/9Qd4E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Qd4E.png" alt="enter image description here"></a></p>