spiffs browser now with ws, delete&upload not working

esprfid · pvtex · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
commit 4ad64f142c100a5b8838cff90023bc72b533e587
diff --git a/src/main.cpp b/src/main.cpp
@@ -22,7 +22,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
  */
-#define VERSION "2.0.5"
+#define VERSION "2.0.6"
 
 #include "Arduino.h"
 #include <ESP8266WiFi.h>
@@ -110,16 +110,6 @@ unsigned long wiFiUptimeMillis = 0;
 
 
 
-String formatBytes(size_t bytes) {
-  if (bytes < 1024) {
-    return String(bytes) + " Byte";
-  } else if (bytes < (1024 * 1024)) {
-    return String(bytes / 1024.0) + " KB";
-  } else if (bytes < (1024 * 1024 * 1024)) {
-    return String(bytes / 1024.0 / 1024.0) + " MB";
-  }
-}
-
 void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final) {
   String logmessage = "[ INFO ] Client:" + request->client()->remoteIP().toString() + " " + request->url();
   Serial.println(logmessage);

diff --git a/src/webh/esprfid.htm.gz.h b/src/webh/esprfid.htm.gz.h
diff --git a/src/webh/esprfid.js.gz.h b/src/webh/esprfid.js.gz.h
diff --git a/src/webh/index.html.gz.h b/src/webh/index.html.gz.h
diff --git a/src/webserver.esp b/src/webserver.esp
@@ -81,92 +81,7 @@ void ICACHE_FLASH_ATTR setupWebServer() {
 
 	server.on("/upload", HTTP_POST, [](AsyncWebServerRequest *request) {
         request->send(200);
-      }, handleUpload);
-
-	server.on("/file", HTTP_GET, [](AsyncWebServerRequest *request) {
-		FSInfo fs_info;
- 		SPIFFS.info(fs_info);
-  		String temp;
-
-		String filename = request->url();
-		filename = filename.substring(5);
-
-		if(request->hasArg("download")) 
-		{
-			Serial.print(F("[ INFO ] DOWNLOAD FILENAME: "));
-			Serial.println(filename);
-
-			AsyncWebServerResponse *response = request->beginResponse(SPIFFS, filename, String(), true);
-			response->addHeader("Content-Type", "application/json");
-			request->send(response);
-		} 
-		if (request->hasArg("delete")) {
-
-			Serial.print(F("[ INFO ] DELETE FILENAME: "));
-			Serial.println(filename);
-
-      		SPIFFS.remove(filename);
-
-    		request->redirect("/#filebrowser");
-		}
-		else 
-		{
-			AsyncResponseStream *response = request->beginResponseStream("text/html");
-  			temp += "<!DOCTYPE HTML><html lang='de'><head><meta charset='UTF-8'><meta name= viewport content='width=device-width, initial-scale=1.0,' user-scalable=yes>";
-  			temp += "<link href='css/required.css' rel='stylesheet'>";
-  			temp += "</head><body class style>";
-			temp += "<br><br><div>";
-			temp += "<legend>SPIFFS File Browser</legend>";
-  			if (!SPIFFS.begin())  Serial.println("SPIFFS failed to mount !\r\n");
-  			Dir dir = SPIFFS.openDir("/");
-			temp += "<div class='panel panel-default'>";
-			temp += "<table class='table table-hover table-striped table-condensed' style='display: table;'>";
-			temp += "<thead>";
-			temp += "<tr class='footable-header'><th style='display: table-cell; width: 33%;'>Filename</th><th style='display: table-cell; width: 33%;'>Size</th><th style='display: table-cell; width: 33%;' colspan=2>Action</th></tr></thead>";
-			response->print(temp);
-			while (dir.next())
-  			{
-    			temp = "<tr>";
-				temp += "<td style='display: table-cell;'>";
-    			temp += dir.fileName();
-    			temp += "</td>";
-				temp += "<td style='display: table-cell;'>";
-				temp += formatBytes(dir.fileSize()).c_str();
-				temp += "</td>";
-				temp += "<td style='display: table-cell;'><a href ='/file";
-    			temp += dir.fileName();
-    			temp += "?download='>";
-    			temp += "download";
-    			temp += "</a></td>";
-				temp += "<td style='display: table-cell;'><a href ='/file";
-				temp += dir.fileName();
-				temp += "?delete='>";
-				temp += "delete</a></td></tr>";
-				response->print(temp);
-  			}
-			temp = "</table></div><br><div>";
-  			temp += "<form method='POST' action='/upload' enctype='multipart/form-data'>";
-			temp += "<select id='dir' name='dir' required style='display: inline-block; margin-right: 20px;'>";
-			temp += "<option value='/'>/</option>";
-			temp += "<option value='/P/'>/P/</option>";
-			temp += "</select>";
-			temp += "<input type='file' name='upload' required style='display: inline-block; margin-right: 20px;'>";
-			temp += "<input type='submit' name='upload' value='Upload' class='btn btn-primary btn-sm' style='display: inline-block; margin-right: 20px;'></form>";
-  			temp += "<br>";
-			temp += "<div class='panel panel-default' style='padding:10px;'>";
-			temp += "<table><tr><td>Filesystem Size: </td><td style='text-align:right;'>";
-  			temp += formatBytes(fs_info.totalBytes).c_str();
-  			temp += "</td></tr><tr><td>used: </td><td style='text-align:right;'>";
-  			temp += formatBytes(fs_info.usedBytes).c_str();
-  			temp += "</td></tr></table>";
-			temp += "</div></div></div>";
-  			temp += "</body></html>";
-
-			response->print(temp);
-  			//AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", temp.c_str());
-			request->send(response);
-		}
-	});
+    }, handleUpload);
 
 	if (config.httpPass == NULL) {
 		config.httpPass = strdup("admin");

diff --git a/src/websocket.esp b/src/websocket.esp
@@ -87,6 +87,11 @@ void ICACHE_FLASH_ATTR processWsMessage(WsMessage *incomingMessage)
 		int page = root["page"];
 		sendUserList(page, incomingMessage->client);
 	}
+	else if (strcmp(command, "spiffbrowser") == 0)
+	{
+		int page = root["page"];
+		sendSpiffbrowser(page, incomingMessage->client);
+	}
 	else if (strcmp(command, "status") == 0)
 	{
 		sendStatus(client);

diff --git a/src/websrc/esprfid.htm b/src/websrc/esprfid.htm
@@ -1,5 +1,23 @@
-<div id="filebrowsercontent">
-    <iframe src="/file" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:400px;width:100%;border:none;overflow:hidden;"></iframe>
+<div id="spiffbrowsercontent">  
+    <div id="loading-img" class="text-center">
+        <h5>Please wait while fetching data... <span id="loadpages"></span></h5>
+    </div>
+    <div>
+        <legend>SPIFFS Browser</legend>
+        <div class="panel panel-default">
+            <table id="spiffbrowsertable" class="table" data-paging="true" data-filtering="true" data-sorting="true" data-editing="false" data-state="true"></table>
+        </div>
+    </div>
+    <div>
+        <label for="restoreUser" class="btn btn-link btn-sm">Upload User File</label>
+        <input id="restoreUser" type="file" accept="text/json" onchange="restoreUser();" style="display:none;">
+        <label for="restoreSet" class="btn btn-link btn-sm">Upload Settings File</label>
+        <input id="restoreSet" type="file" accept="text/json" onchange="restoreSet();" style="display:none;">
+    </div>
+    <div style="clear:both;">
+        <br>
+        <br>
+    </div>
 </div>
 <div id="backupcontent">
     <br>

diff --git a/src/websrc/index.html b/src/websrc/index.html
@@ -82,7 +82,7 @@ <h1><i class="glyphicon glyphicon-tags" aria-hidden="true"></i>esp-rfid</h1>
                         <a href="#" id="backup"><i class="glyphicon glyphicon-floppy-disk"></i>Backup & Restore</a>
                     </li>
                     <li>
-                        <a href="#" id="filebrowser"><i class="glyphicon glyphicon-floppy-disk"></i>SPIFFS Browser</a>
+                        <a href="#" id="spiffbrowser"><i class="glyphicon glyphicon-floppy-disk"></i>SPIFFS Browser</a>
                     </li>
                     <li>
                         <a href="#" id="reset"><i class="glyphicon glyphicon-repeat"></i>Factory Reset</a>

diff --git a/src/websrc/js/esprfid.js b/src/websrc/js/esprfid.js
@@ -662,6 +662,14 @@ function getUsers() {
   sendWebsocketWithRetry("{\"command\":\"userlist\", \"page\":" + page + "}");
 }
 
+function getSpiff() {
+  sendWebsocketWithRetry("{\"command\":\"spiff\", \"page\":" + page + "}");
+}
+
+function getSpiffbrowser() {
+  sendWebsocketWithRetry("{\"command\":\"spiffbrowser\", \"page\":" + page + "}");
+}
+
 function getEvents() {
   sendWebsocketWithRetry("{\"command\":\"geteventlog\", \"page\":" + page + ", \"filename\":\"" + theCurrentLogFile +"\"}");
 }
@@ -806,7 +814,10 @@ function getContent(contentname) {
           data = [];
           getEvents();
           break;
-        case "#filebrowsercontent":
+        case "#spiffbrowsercontent":
+          page = 1;
+          data = [];
+          getSpiffbrowser();
           break;
         default:
           break;
@@ -933,6 +944,101 @@ function twoDigits(value) {
   return value;
 }
 
+function initSpiffbrowserTable() {
+  jQuery(function($) {
+    ft = window.FooTable.init("#spiffbrowsertable", {
+      columns: [{
+          "name": "filename",
+          "title": "File Name",
+          "type": "text",
+          "sorted": true,
+          "direction": "ASC"
+        },
+        {
+          "name": "filetype",
+          "title": "File Type",
+          "parser": function(value) 
+          {
+            if (value === "/config.json") 
+              {
+                return("Main Config File");
+              }
+            if (value === "/latestlog.json") 
+            {
+              return("Main Access Log");
+            }
+            if (value === "/eventlog.json") 
+            {
+              return("Main Event Log");
+            }
+            if (value.substring(0,2) == "/P")
+            {
+              return("User File");
+            }
+            return("Other Filetype");
+          }
+        },
+        {
+          "name": "filesize",
+          "title": "Size",
+          "breakpoints": "xs sm",
+          "parser": function(value) {
+              value = value / 1024;
+              return (
+                value
+                  .toFixed(2) // always two decimal digits
+                  .replace('.', ',') // replace decimal point character with ,
+                  .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' KB'
+              ) // use . as a separator
+
+            }
+        },
+        {
+          "name":"filename",
+          "title":"Action",
+          "type":"text",
+          "formatter": function (value) 
+          {
+            var actions = $('<div/>')
+
+            var user_button = ($('<a/>', {'class':'btn btn-sm btn-default','filename':value})
+                .append($('<span/>', {'class': 'glyphicon glyphicon-trash'}))
+                .on("click", this, deletefile))
+                .appendTo(actions); 
+            var user_button = ($('<a/>', {'class':'btn btn-sm btn-default','filename':value})
+                .append($('<span/>', {'class': 'glyphicon glyphicon-floppy-disk'}))
+                .on("click", this, viewfile))
+                .appendTo(actions);
+
+            return actions;
+          }
+        },
+      ],
+      rows: data
+    });
+    function viewfile(e)
+    { 
+      theCurrentLogFile = this.getAttribute('filename');
+      if (theCurrentLogFile.indexOf("latestlog") >= 0)
+      {
+        getContent("#logcontent");
+      }
+      if (theCurrentLogFile.indexOf("eventlog") >= 0)
+      {
+        getContent("#eventcontent");
+      }
+
+    }
+    function deletefile(e)
+    { 
+      if (confirm("Really delete " + this.getAttribute('filename') + " ? This can not be undone!"))
+      {
+        sendWebsocket("{\"command\":\"spiffbrowser\" , \"action\":\"delete\", \"filename\":\"" + this.getAttribute('filename') + "\"}");
+      }
+    }
+  });
+}
+
 function initFileListTable() {
   jQuery(function($) {
     ft = window.FooTable.init("#spifftable", {
@@ -1505,6 +1611,15 @@ function socketMessageListener(evt) {
         }
         builddata(obj);
         break;
+      case "spiffbrowser":
+        haspages = obj.haspages;
+        if (haspages === 0) {
+          document.getElementById("loading-img").style.display = "none";
+          initSpiffbrowserTable();
+          break;
+        }
+        builddata(obj);
+        break;
       case "listfiles":
         haspages = obj.haspages;
         if (haspages === 0) {
@@ -1588,6 +1703,17 @@ function socketMessageListener(evt) {
           document.getElementById("loading-img").style.display = "none";
         }
         break;
+      case "spiffbrowser":
+        if (page < haspages && obj.result === true) {
+          getnextpage("spiffbrowser");
+        } else if (page === haspages) {
+          initSpiffbrowserTable();
+          document.getElementById("loading-img").style.display = "none";
+          $(".footable-show").click();
+          $(".fooicon-remove").click();
+          break;
+        }
+        break;
       case "latestlist":
         document.getElementById("savelatestlogbtn").disabled=true; 
         document.getElementById("clearlatestlogbtn").disabled=true; 
@@ -1844,8 +1970,8 @@ $("#logmaintenance").click(function() {
 $(".noimp").on("click", function() {
   $("#noimp").modal("show");
 });
-$("#filebrowser").click(function() {
-  getContent("#filebrowsercontent");
+$("#spiffbrowser").click(function() {
+  getContent("#spiffbrowsercontent");
   return false;
 });
 

diff --git a/src/wsResponses.esp b/src/wsResponses.esp
@@ -72,6 +72,49 @@ void ICACHE_FLASH_ATTR sendUserList(int page, AsyncWebSocketClient *client)
 	}
 }
 
+void ICACHE_FLASH_ATTR sendSpiffbrowser(int page, AsyncWebSocketClient *client)
+{
+	DynamicJsonDocument root(2048);
+	root["command"] = "spiffbrowser";
+	root["page"] = page;
+	JsonArray users = root.createNestedArray("list");
+	Dir dir = SPIFFS.openDir("/");
+	int first = (page - 1) * 10;
+	int last = page * 10;
+	int i = 0;
+	while (dir.next())
+	{
+		if (i >= first && i < last)
+		{
+			JsonObject item = users.createNestedObject();
+			item["filename"] = dir.fileName();
+			item["filetype"] = dir.fileName();
+			item["filesize"] = dir.fileSize();
+		}
+		i++;
+		yield();
+	}
+	float pages = i / 10.0;
+	root["haspages"] = ceil(pages);
+	size_t len = measureJson(root);
+	AsyncWebSocketMessageBuffer *buffer = ws.makeBuffer(len);
+	if (buffer)
+	{
+		serializeJson(root, (char *)buffer->get(), len + 1);
+		if (client)
+		{
+			wsMessageTicker.once_ms_scheduled(50, [client, buffer]() {
+				client->text(buffer);
+				client->text("{\"command\":\"result\",\"resultof\":\"spiffbrowser\",\"result\": true}");
+			});
+		}
+		else
+		{
+			ws.textAll("{\"command\":\"result\",\"resultof\":\"spiffbrowser\",\"result\": false}");
+		}
+	}
+}
+
 void ICACHE_FLASH_ATTR sendStatus(AsyncWebSocketClient *client)
 {
 	struct ip_info info;