Improve file server (#1785)

* . * . * . * . * . * . * . Co-authored-by: CaCO3 <caco@ruinelli.ch>
2025-12-11 05:56:57 +03:00 · 2023-01-08 12:36:13 +01:00
parent 758238a82e
commit ee4832323d
5 changed files with 88 additions and 20 deletions
--- a/code/components/jomjol_fileserver_ota/server_file.cpp
+++ b/code/components/jomjol_fileserver_ota/server_file.cpp
@@ -219,7 +219,7 @@ static esp_err_t http_resp_dir_html(httpd_req_t *req, const char *dirpath, const

 /////////////////////////////////////////////////
    if (!readonly) {
-        FILE *fd = fopen("/sdcard/html/upload_script.html", "r");
+        FILE *fd = fopen("/sdcard/html/file_server.html", "r");
        char *chunk = ((struct file_server_data *)req->user_ctx)->scratch;
        size_t chunksize;
        do {
@@ -245,11 +245,11 @@ static esp_err_t http_resp_dir_html(httpd_req_t *req, const char *dirpath, const

    /* Send file-list table definition and column labels */
    httpd_resp_sendstr_chunk(req,
-        "<table class=\"fixed\" border=\"1\">"
+        "<table id=\"files_table\">"
        "<col width=\"800px\" /><col width=\"300px\" /><col width=\"300px\" /><col width=\"100px\" />"
-        "<thead><tr><th>Name</th><th>Type</th><th>Size (Bytes)</th>");
+        "<thead><tr><th>Name</th><th>Type</th><th>Size</th>");
    if (!readonly) {
-        httpd_resp_sendstr_chunk(req, "<th>Delete<br>"
+        httpd_resp_sendstr_chunk(req, "<th>"
            "<form method=\"post\" action=\"");
        httpd_resp_sendstr_chunk(req, _zw.c_str());
        httpd_resp_sendstr_chunk(req,
@@ -270,7 +270,19 @@ static esp_err_t http_resp_dir_html(httpd_req_t *req, const char *dirpath, const
                ESP_LOGE(TAG, "Failed to stat %s: %s", entrytype, entry->d_name);
                continue;
            }
-            sprintf(entrysize, "%ld", entry_stat.st_size);
+
+            if (entry->d_type == DT_DIR) {
+                strcpy(entrysize, "-\0");
+            }
+            else {
+                if (entry_stat.st_size >= 1024) {
+                    sprintf(entrysize, "%ld KiB", entry_stat.st_size / 1024); // kBytes
+                }
+                else {
+                    sprintf(entrysize, "%ld B", entry_stat.st_size); // Bytes
+                }
+            }
+
            ESP_LOGI(TAG, "Found %s: %s (%s bytes)", entrytype, entry->d_name, entrysize);

            /* Send chunk of HTML file containing table entries with file name and size */
--- a/sd-card/html/upload_script.html
+++ b/sd-card/html/upload_script.html
@@ -1,18 +1,43 @@
 <html>
    <head>
-        <link href="firework.css" rel="stylesheet">
-        <script type="text/javascript" src="jquery-3.6.0.min.js"></script>  
-        <script type="text/javascript" src="firework.js"></script>
+        <link href="/fileserver/html/firework.css" rel="stylesheet">
+        <script type="text/javascript" src="/fileserver/html/jquery-3.6.0.min.js"></script>  
+        <script type="text/javascript" src="/fileserver/html/firework.js"></script>
+        <style>
+            #files_table {
+                font-family: Arial, Helvetica, sans-serif;
+                border-collapse: collapse;
+                width: 100%;
+            }
+
+            #files_table td, #files_table th {
+                border: 1px solid #ddd;
+                padding: 8px;
+            }
+
+            #files_table tr:nth-child(even){
+                background-color: #f2f2f2;
+            }
+
+            #files_table tr:hover {
+                background-color: #ddd;
+            }
+
+            #files_table th {
+                padding-top: 12px;
+                padding-bottom: 12px;
+                text-align: left;
+                background-color: #0011ff;
+                color: white;
+            }
+        </style>
    </head>
 </body>
-<table class="fixed" border="0" style="font-family: arial">
-    <col width="300px" /><col width="200px" />
+<table class="fixed" border="0" width=100% style="font-family: arial">
    <tr><td>
-        <h2>ESP32 File Server</h2>
-    </td><td>
-        <button id="dirup" type="button" onclick="dirup()">Directory up</button>
+        <h2>Content on SD-Card</h2>
    </td>
-    <td>
+    <td rowspan="2" width="500px">
        <table border="0">
            <tr>
                <td>
@@ -35,6 +60,11 @@
            </tr>
        </table>
    </td></tr>
+    <tr>
+        <td>
+            <span id="currentpath"></span> &nbsp;&nbsp;&nbsp;&nbsp;<button id="dirup" type="button" onclick="dirup()" disabled>&#129041; Directory up</button>
+        </td>
+    </tr>
 </table>

 <script type="text/javascript" src="/fileserver/html/common.js"> 
@@ -59,6 +89,7 @@ function dirup() {
 			found = zw;
 	}
 	var res = str.substring(0, found+1);
+
 	window.location.href = res;	
 }

@@ -111,6 +142,31 @@ function upload() {
        xhttp.send(file);
    }
 }
+
+
+function checkAtRootLevel(res) {
+    if (getPath() == "/fileserver/") { // Already at root level
+        document.getElementById("dirup").disabled = true;
+        console.log("Already on sd-card root level!");
+        return true;
+    }
+
+    document.getElementById("dirup").disabled = false;
+    return false;
+}
+
+
+function getPath() {
+    return window.location.pathname.replace(/\/+$/, '') + "/"
+}
+
+checkAtRootLevel();
+
+console.log("Current path: " + getPath().replace("/fileserver", ""));
+document.getElementById("currentpath").innerHTML = "Current path: <b>" + getPath().replace("/fileserver", "") + "</b>";
+
+document.cookie = "page=" + getPath() + "; path=/";
+
 </script>

 </body>
--- a/sd-card/html/index.html
+++ b/sd-card/html/index.html
@@ -18,7 +18,7 @@
 <script>
    async function loadPage(page) {
        console.log("loadPage(" + page + ")");
-        document.cookie = "page="+page;
+        document.cookie = "page="+page + "; path=/";
        document.getElementById('maincontent').src = page;

        [].forEach.call(document.querySelectorAll('.submenu'), function (el) {
@@ -108,7 +108,7 @@
  LoadWebUiVersion();

  if (getCookie("page") == "" || getCookie("page") == "reboot_page.html") {
-    document.cookie = "page=overview.html";
+    document.cookie = "page=overview.html" + "; path=/";
  }
  console.log("Loading page: " + getCookie("page"));
  document.getElementById('maincontent').src = getCookie("page");
--- a/sd-card/html/ota_page.html
+++ b/sd-card/html/ota_page.html
@@ -38,8 +38,8 @@
    Then pick the <i><span style="font-family:monospace">AI-on-the-edge-device__update__*.zip</span></i> file!</p>
    <p>Alternatively you can use a file in the following format:</p>
    <ul>
-        <li><span style="font-family:monospace">AI-on-the-edge-device__update__*.zip</span></li>
-        <li><span style="font-family:monospace">AI-on-the-edge-device__firmware__*.bin</span></li>
+        <li><span style="font-family:monospace">*.zip</span></li>
+        <li><span style="font-family:monospace">*.bin</span></li>
        <li><span style="font-family:monospace">*.tfl/tflite</span></li>
    </ul>
    <p>Make sure the file extention is lower case.</p>
@@ -183,7 +183,7 @@
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4) {
                    if (xhttp.status == 200) {
-                        document.cookie = "page=overview.html"; // Make sure after the reboot we go to the overview page
+                        document.cookie = "page=overview.html" + "; path=/"; // Make sure after the reboot we go to the overview page

                        if (xhttp.responseText.startsWith("reboot")) { // Reboot required
                            console.log("Upload completed, the device will now restart and install the update!");
--- a/sd-card/html/wlan_config.html
+++ b/sd-card/html/wlan_config.html
@@ -59,7 +59,7 @@ if (!file.name.includes("remote-setup")){
                    document.getElementById("status").innerText = "Status: Update completed!";
                    document.getElementById("doUpdate").disabled = true;
                    document.getElementById("newfile").disabled = false;
-                    document.cookie = "page=overview.html"; // Make sure after the reboot we go to the overview page
+                    document.cookie = "page=overview.html" + "; path=/"; // Make sure after the reboot we go to the overview page
    
                    if (xhttp.responseText.startsWith("reboot"))
                    {