add cloudcmd for web based file management

Author: thelamer

index.js

@@ -5,15 +5,21 @@ var fs = require('fs');
 var fsw = require('fs').promises;
 var util = require('util');
 var path = require('path');
+var cloudcmd = require('cloudcmd');
+var express = require('express');
+var app = require('express')();
+var http = require('http').Server(app);
+var baserouter = express.Router();
 var { spawn } = require('child_process');
 var { create } = require('ipfs-http-client');
 var ipfs = create();
 
 // Default vars
+var baseUrl = process.env.SUBFOLDER || '/';
 if (fs.existsSync('/data')) { 
   var dataRoot = '/data/';
 } else {
-  var dataRoot = 'frontend/user/'
+  var dataRoot = __dirname + '/frontend/user/'
 };
 var configPath = dataRoot + 'config/';
 var hashPath = dataRoot + 'hashes/';
@@ -32,42 +38,17 @@ var emus = [
   'segaGG', 'segaMD', 'segaMS',
   'segaSaturn', 'snes', 'vb', 'ws'
 ];
-mimeTypes = {
-  "html": "text/html",
-  "jpeg": "image/jpeg",
-  "jpg": "image/jpeg",
-  "png": "image/png",
-  "svg": "image/svg+xml",
-  "json": "application/json",
-  "js": "text/javascript",
-  "css": "text/css"
-};
 
 //// Http server ////
-var main = async function (req, res) {
-  if (req.url == '/') {
-    var url = '/public/index.html';
-  } else {
-    var url = req.url;
-  }
-  try {
-    var mimeType = mimeTypes[url.split('?')[0].split('.').pop()];
-    if (!mimeType) {
-      mimeType = 'text/plain';
-    }
-    var data = await fsw.readFile(__dirname + decodeURI(url.split('?')[0]));
-    res.writeHead(200, { "Content-Type": mimeType });
-    res.end(data);
-  } catch (err) {
-    res.writeHead(404);
-    res.end(JSON.stringify(err));
-  };
-};
-var server = http.createServer(main);
-server.listen(3000);
+baserouter.use('/public', express.static(__dirname + '/public'));
+baserouter.get("/", function (req, res) {
+  res.sendFile(__dirname + '/public/index.html');
+});
+app.use(baseUrl, baserouter);
+http.listen(3000);
 
 //// socketIO comms ////
-io = socketIO(server);
+io = socketIO(http, {path: baseUrl + 'socket.io'});
 io.on('connection', async function (socket) {
   //// Functions ////
   // Send config list to client
@@ -344,6 +325,18 @@ io.on('connection', async function (socket) {
     getRoms(dir);
   };
 
+  // Render files page
+  async function renderFiles() {
+    var dirItems = await fsw.readdir(dataRoot);
+    var dirs = [];
+    for await (var item of dirItems) {
+      if ((fs.lstatSync(dataRoot + item).isDirectory()) && (! /^\..*/.test(item))){
+        dirs.push(item);
+      };
+    };
+    socket.emit('renderfiledirs', dirs);
+  };
+
   // Incoming socket requests
   socket.on('renderconfigs', renderConfigs);
   socket.on('renderroms', renderRoms);
@@ -356,10 +349,29 @@ io.on('connection', async function (socket) {
   socket.on('addtoconfig', addToConfig);
   socket.on('downloadart', downloadArt);
   socket.on('usermeta', userMeta);
+  socket.on('renderfiles', renderFiles);
   // Render landing page
   if (fs.existsSync(dataRoot + 'config/main.json')) {
     renderRoms();
   } else {
     renderLanding();
   };
 });
+
+// Cloudcmd File browser
+baserouter.use('/files', cloudcmd({
+  config: {
+    root: dataRoot,
+    prefix: baseUrl + 'files',
+    terminal: false,
+    console: false,
+    configDialog: false,
+    contact: false,
+    auth: false,
+    name: 'Files',
+    log: false,
+    keysPanel: false,
+    oneFilePanel: true,
+  }
+}));
+

package.json

@@ -1,10 +1,12 @@
 {
   "name": "emulatorjs",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Rom and art management utility for generating configuration files for use with the EmulatorJS frontend",
   "main": "index.js",
   "author": "thelamer",
   "dependencies": {
+    "cloudcmd": "^15.9.8",
+    "express": "^4.17.1",
     "ipfs-http-client": "^53.0.1",
     "socket.io": "^4.3.1"
   }

public/css/index.css

@@ -163,6 +163,15 @@
   text-align: center;
 }
 
+/* File browsers */
+.browser {
+  position:fixed;
+  width: 85vw;
+  top: 40px;
+  right: 0;
+  height:calc(100vh - 40px);
+}
+
 /* CSS loading indicator */
 .loader,
 .loader:before,

public/index.html

@@ -11,6 +11,7 @@
       <div id="nav" class="nav">
         <div onclick="renderRoms()" class="top-item">Rom Management</div>
         <div onclick="renderConfigss()" class="top-item">Config Management</div>
+        <div onclick="renderFiles()" class="top-item">File Management</div>
       </div>
       <div id="nav-buttons" class="nav-buttons"></div>
     </div>
@@ -77,6 +78,11 @@ <h1>Please Download the default fileset to begin:</h1>
 	<button class="scanbutton hover" onclick="dlDefaultFiles()">Download</button>
       </div>
     </div>
+    <div id="filelanding" class="hidden">
+      <div class="centered">
+        <h1>Choose a folder. Drag and drop files or right click to upload.</h1>
+      </div>
+    </div>
     <script src="socket.io/socket.io.js"></script>
     <script src="public/js/vendor/jquery.min.js"></script>
     <script src="public/js/vendor/jquery.modal.min.js"></script>

public/js/index.js

@@ -19,7 +19,9 @@ socket.on('renderlanding', renderLanding);
 // Render modal data
 socket.on('modaldata', modalData);
 // Empty modal
-socket.on('emptymodal', emptyModal)
+socket.on('emptymodal', emptyModal);
+// Render file directories
+socket.on('renderfiledirs', renderFileDirs);
 
 //// Functions ////
 // Grab a json file from the server
@@ -260,3 +262,30 @@ function renderLanding() {
   $('#main').append($('#landing').html());
 };
 
+// Render file management
+function renderFiles() {
+  $('#main').empty();
+  $('#side').empty();
+  $('#main').append('<div class="loader"></div>');
+  socket.emit('renderfiles');
+};
+
+// Render file directories
+function renderFileDirs(dirs) {
+  $('#side').empty();
+  $('#main').empty();
+  $('#main').append($('#filelanding').html());
+  $('#nav-buttons').empty();
+  $.each(dirs, function(index, dir) {
+    var sideLink = $('<div>').addClass('sideitem hover').attr('onclick', "renderFileBrowser('" + dir + "')").text(dir);
+    $('#side').append(sideLink);
+  });
+};
+
+// Tell server to configure a file browser
+function renderFileBrowser(dir) {
+  $('#main').empty();
+  var url = window.location.href;
+  var browser = $('<iframe>').attr('src', url + 'files/fs/' + dir).addClass('browser');
+  $('#main').append(browser);
+};