Menu
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.
Now, I want to display that directory name into the text box of template.html page. Can anyone please help me out regarding this issue?
In index.js, at this part I'm able to see the path name in the console:
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);
My index.js:
#!/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 && val.indexOf('.') != 0) val = "." + val;
memo.push(val);
return memo;
}
program
.option('-p, --port <port>', 'Port to run the file-browser. Default value is 8088')
.option('-e, --exclude <exclude>', '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://<YOUR-IP>:" + 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 && _.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');
});
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
My app.js :
(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 && 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 "<a href='#' target='_blank'><i class='fa fa-folder'></i> " + data.Name +"</a>";
} else {
return "<a href='/" + data.Path + "' target='_blank'><i class='fa " + getFileIcon(data.Ext) + "'></i> " + data.Name +"</a>";
}
}
}
]
};
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);
Current Browse Format :
Required Browse Format :
416
Assuming that your template.html is just a static html page but not a template, there is only one way to get data from the server - via an xhr request. You can add one more route to your index.js:
//...
app.get('/', function(req, res) {
res.redirect('lib/template.html');
});
app.get('/directory', function(req, res) {
var currentDir = dir;
var query = req.query.path || '';
if (query) currentDir = path.join(dir, query);
var data = { directory: currentDir }
res.json(data);
});
And then trigger one more xhr request (to this route) from your app.js:
$.get('/directory').then(function(data){
$("input[name='location']").val(data.directory);
});
Also, add it to .up event handler:
$(".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;
});
$.get('/directory?path='+ path').then(function(data){
$("input[name='location']").val(data.directory);
});
});
And modify fnCreatedRow:
"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;
});
$.get('/directory?path='+ path').then(function(data){
$("input[name='location']").val(data.directory);
});
e.preventDefault();
});
},
You could also have added this data to /files route response.
One more way is to use templates. Here you can read about template engines in express.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
