added webstick share system

firmware/v3/web-server/api.ino

@@ -170,8 +170,8 @@ void HandleListDir(AsyncWebServerRequest *r) {
   //Get the folder path to be listed
   //As ESP8266 dont have enough memory for proper struct to json conv, we are hacking a json string out of a single for-loop
   String jsonString = "[";
-  String folderPath = GetPara(r, "dir");
-  folderPath = "/www" + folderPath;
+  String folderSubPath = GetPara(r, "dir");
+  String folderPath = "/www" + folderSubPath;
   if (SD.exists(folderPath)) {
     File root = SD.open(folderPath);
     bool firstObject = true;
@@ -189,12 +189,17 @@ void HandleListDir(AsyncWebServerRequest *r) {
             firstObject = false;
           }
         }
-
+        
         String isDirString = "true";
         if (!entry.isDirectory()) {
           isDirString = "false";
         }
-        jsonString = jsonString + "{\"Filename\":\"" + entry.name() + "\",\"Filesize\":" + String(entry.size()) + ",\"IsDir\":" + isDirString + "}";
+
+        //Get share UUID, return empty string if not shared
+        //prefix "/www" have to be removed for share entry lookup
+        String shareUUID = GetFileShareIDByFilename(folderSubPath + entry.name());
+        
+        jsonString = jsonString + "{\"Filename\":\"" + entry.name() + "\",\"Filesize\":" + String(entry.size()) + ",\"IsDir\":" + isDirString + ",\"Share\":\"" + shareUUID + "\"}";
         entry.close();
       }
       root.close();
@@ -365,7 +370,8 @@ void HandleFileProp(AsyncWebServerRequest *r) {
       return;
     }
 
-    resp = "{\"filename\":\"" + basename(filepath) + "\",\"filepath\":\"" + filepath + "\",\"isDir\":false,\"filesize\":" + String(targetFile.size()) + "}";
+    String shareID = GetFileShareIDByFilename(filepath);
+    resp = "{\"filename\":\"" + basename(filepath) + "\",\"filepath\":\"" + filepath + "\",\"isDir\":false,\"filesize\":" + String(targetFile.size()) + ",\"shareid\":\"" + shareID + "\"}";
     targetFile.close();
   }
 

firmware/v3/web-server/kvdb.ino

@@ -1,113 +1,118 @@
-/*
-
-   Key Value database
-
-   This is a file system based database
-   that uses foldername as table name,
-   filename as key and content as value
-
-   Folder name and filename are limited to
-   5 characters as SDFS requirements.
-*/
-
-//Root of the db on SD card, **must have tailing slash**
-const String DB_root = "/db/";
-
-//Clean the input for any input string
-String DBCleanInput(const String& inputString) {
-  String trimmedString = inputString;
-  //Replae all the slash that might breaks the file system
-  trimmedString.replace("/", "");
-  //Trim off the space before and after the string
-  trimmedString.trim();
-  return trimmedString;
-}
-
-//Database init create all the required table for basic system operations
-void DBInit() {
-  DBNewTable("auth");
-  DBNewTable("pref");
-  DBNewTable("user"); //User Store
-  DBNewTable("sess"); //Session Store
-}
-
-//Create a new Database table
-void DBNewTable(String tableName) {
-  tableName = DBCleanInput(tableName);
-  if (!SD.exists(DB_root + tableName)) {
-    SD.mkdir(DB_root + tableName);
-  }
-}
-
-
-//Check if a database table exists
-bool DBTableExists(String tableName) {
-  tableName = DBCleanInput(tableName);
-  return SD.exists(DB_root + tableName);
-}
-
-//Write a key to a table, return true if succ
-bool DBWrite(String tableName, String key, String value) {
-  if (!DBTableExists(tableName)) {
-    return false;
-  }
-  tableName = DBCleanInput(tableName);
-  key = DBCleanInput(key);
-  String fsDataPath = DB_root + tableName + "/" + key;
-  if (SD.exists(fsDataPath)) {
-    //Entry already exists. Delete it
-    SD.remove(fsDataPath);
-  }
-
-  //Write new data to it
-  File targetEntry = SD.open(fsDataPath, FILE_WRITE);
-  targetEntry.print(value);
-  targetEntry.close();
-  return true;
-}
-
-//Read from database, require table name and key
-String DBRead(String tableName, String key) {
-  if (!DBTableExists(tableName)) {
-    return "";
-  }
-  tableName = DBCleanInput(tableName);
-  key = DBCleanInput(key);
-  String fsDataPath = DB_root + tableName + "/" + key;
-  if (!SD.exists(fsDataPath)) {
-    //Target not exists. Return empty string
-    return "";
-  }
-
-  String value = "";
-  File targetEntry = SD.open(fsDataPath, FILE_READ);
-  while (targetEntry.available()) {
-    value = value + targetEntry.readString();
-  }
-
-  targetEntry.close();
-  return value;
-}
-
-//Check if a given key exists in the database
-bool DBKeyExists(String tableName, String key) {
-  if (!DBTableExists(tableName)) {
-    return false;
-  }
-  tableName = DBCleanInput(tableName);
-  key = DBCleanInput(key);
-  String fsDataPath = DB_root + tableName + "/" + key;
-  return SD.exists(fsDataPath);
-}
-
-//Remove the key-value item from db, return true if succ
-bool DBRemove(String tableName, String key) {
-  if (!DBKeyExists(tableName, key)){
-    return false;
-  }
-  tableName = DBCleanInput(tableName);
-  key = DBCleanInput(key);
-  String fsDataPath = DB_root + tableName + "/" + key;
-  SD.remove(fsDataPath);
-  return true;
-}
+/*
+
+   Key Value database
+
+   This is a file system based database
+   that uses foldername as table name,
+   filename as key and content as value
+
+   Folder name and filename are limited to
+   5 characters as SDFS requirements.
+*/
+
+//Root of the db on SD card, **must have tailing slash**
+const String DB_root = "/db/";
+
+//Clean the input for any input string
+String DBCleanInput(const String& inputString) {
+  String trimmedString = inputString;
+  //Replae all the slash that might breaks the file system
+  trimmedString.replace("/", "");
+  //Trim off the space before and after the string
+  trimmedString.trim();
+  return trimmedString;
+}
+
+//Database init create all the required table for basic system operations
+void DBInit() {
+  /* Preference persistent store */
+  DBNewTable("pref"); //Preference settings
+  /* User Authentications Tables */
+  DBNewTable("auth"); //Auth session store
+  DBNewTable("user"); //User accounts store
+  DBNewTable("sess"); //Session store
+  /* Share System Tables */
+  DBNewTable("shln");//Shared links to filename map
+  DBNewTable("shfn");//Shared filename to links map
+}
+
+//Create a new Database table
+void DBNewTable(String tableName) {
+  tableName = DBCleanInput(tableName);
+  if (!SD.exists(DB_root + tableName)) {
+    SD.mkdir(DB_root + tableName);
+  }
+}
+
+
+//Check if a database table exists
+bool DBTableExists(String tableName) {
+  tableName = DBCleanInput(tableName);
+  return SD.exists(DB_root + tableName);
+}
+
+//Write a key to a table, return true if succ
+bool DBWrite(String tableName, String key, String value) {
+  if (!DBTableExists(tableName)) {
+    return false;
+  }
+  tableName = DBCleanInput(tableName);
+  key = DBCleanInput(key);
+  String fsDataPath = DB_root + tableName + "/" + key;
+  if (SD.exists(fsDataPath)) {
+    //Entry already exists. Delete it
+    SD.remove(fsDataPath);
+  }
+
+  //Write new data to it
+  File targetEntry = SD.open(fsDataPath, FILE_WRITE);
+  targetEntry.print(value);
+  targetEntry.close();
+  return true;
+}
+
+//Read from database, require table name and key
+String DBRead(String tableName, String key) {
+  if (!DBTableExists(tableName)) {
+    return "";
+  }
+  tableName = DBCleanInput(tableName);
+  key = DBCleanInput(key);
+  String fsDataPath = DB_root + tableName + "/" + key;
+  if (!SD.exists(fsDataPath)) {
+    //Target not exists. Return empty string
+    return "";
+  }
+
+  String value = "";
+  File targetEntry = SD.open(fsDataPath, FILE_READ);
+  while (targetEntry.available()) {
+    value = value + targetEntry.readString();
+  }
+
+  targetEntry.close();
+  return value;
+}
+
+//Check if a given key exists in the database
+bool DBKeyExists(String tableName, String key) {
+  if (!DBTableExists(tableName)) {
+    return false;
+  }
+  tableName = DBCleanInput(tableName);
+  key = DBCleanInput(key);
+  String fsDataPath = DB_root + tableName + "/" + key;
+  return SD.exists(fsDataPath);
+}
+
+//Remove the key-value item from db, return true if succ
+bool DBRemove(String tableName, String key) {
+  if (!DBKeyExists(tableName, key)){
+    return false;
+  }
+  tableName = DBCleanInput(tableName);
+  key = DBCleanInput(key);
+  String fsDataPath = DB_root + tableName + "/" + key;
+  SD.remove(fsDataPath);
+  return true;
+}

firmware/v3/web-server/router.ino

@@ -1,92 +1,95 @@
-/*
-
-    Router.ino
-
-    This is the main router of the whole web server.
-    It is like the apache.conf where you handle routing
-    to different services.
-
-    By default, all route will go to the SD card /www/ folder
-*/
-class MainRouter : public AsyncWebHandler {
-  public:
-    MainRouter() {}
-    virtual ~MainRouter() {}
-
-    bool canHandle(AsyncWebServerRequest *request) {
-      String requestURI = request->url().c_str();
-      if (requestURI.equals("/upload")) {
-        //File Upload Endpoint
-        return false;
-      } else if (requestURI.startsWith("/api/")) {
-        //API paths
-        return false;
-      }
-      return true;
-    }
-
-    //Main Routing Logic Here
-    void handleRequest(AsyncWebServerRequest *request) {
-      String requestURI = request->url().c_str();
-
-      /* Rewrite the request path if URI contains ./ */
-      if (requestURI.indexOf("./") > 0) {
-        requestURI.replace("./", "");
-        AsyncWebServerResponse *response = request->beginResponse(307);
-        response->addHeader("Cache-Control", "no-cache");
-        response->addHeader("Location", requestURI);
-        request->send(response);
-        return;
-      }
-      
-      /* Special Routing Rules */
-      //Redirect / back to index.html
-      if (requestURI == "/") {
-        request->redirect("/index.html");
-        return;
-      }
-
-      //Special interfaces that require access controls
-      if (requestURI.startsWith("/store/")) {
-        //Private file storage. Not allow access
-        AsyncWebServerResponse *response = request->beginResponse(401, "text/html", "403 - Forbidden");
-        request->send(response);
-        return;
-      }
-
-      /* Default Routing Rules */
-
-      Serial.println("URI: " + requestURI + " | MIME: " + getMime(requestURI));
-      //Check if the file exists on the SD card
-      if (SD.exists("/www" + requestURI)) {
-        // File exists on SD card web root
-        if (IsDir("/www" + requestURI)) {
-          //Requesting a directory
-          if (!requestURI.endsWith("/")) {
-            //Missing tailing slash
-            request->redirect(requestURI + "/");
-            return;
-          }
-
-          if (SD.exists("/www" + requestURI + "index.html")) {
-            request->send(SDFS, "/www" + requestURI + "/index.html", "text/html", false);
-          } else {
-            HandleDirRender(request, requestURI , "/www" + requestURI);
-          }
-
-        } else {
-          request->send(SDFS, "/www" + requestURI, getMime(requestURI), false);
-        }
-      } else {
-        // File does not exist in web root
-        AsyncResponseStream *response = request->beginResponseStream("text/html");
-        Serial.println("NOT FOUND: " + requestURI);
-        prettyPrintRequest(request);
-        response->print("<!DOCTYPE html><html><head><title>Not Found</title></head><body>");
-        response->print("<p>404 - Not Found</p>");
-        response->printf("<p>Requesting http://%s with URI: %s</p>", request->host().c_str(), request->url().c_str());
-        response->print("</body></html>");
-        request->send(response);
-      }
-    }
-};
+/*
+
+    Router.ino
+
+    This is the main router of the whole web server.
+    It is like the apache.conf where you handle routing
+    to different services.
+
+    By default, all route will go to the SD card /www/ folder
+*/
+class MainRouter : public AsyncWebHandler {
+  public:
+    MainRouter() {}
+    virtual ~MainRouter() {}
+
+    bool canHandle(AsyncWebServerRequest *request) {
+      String requestURI = request->url().c_str();
+      if (requestURI.equals("/upload")) {
+        //File Upload Endpoint
+        return false;
+      } else if (requestURI.startsWith("/api/")) {
+        //API paths
+        return false;
+      }else if (requestURI.startsWith("/share/")) {
+        //Share paths
+        return false;
+      }
+      return true;
+    }
+
+    //Main Routing Logic Here
+    void handleRequest(AsyncWebServerRequest *request) {
+      String requestURI = request->url().c_str();
+
+      /* Rewrite the request path if URI contains ./ */
+      if (requestURI.indexOf("./") > 0) {
+        requestURI.replace("./", "");
+        AsyncWebServerResponse *response = request->beginResponse(307);
+        response->addHeader("Cache-Control", "no-cache");
+        response->addHeader("Location", requestURI);
+        request->send(response);
+        return;
+      }
+      
+      /* Special Routing Rules */
+      //Redirect / back to index.html
+      if (requestURI == "/") {
+        request->redirect("/index.html");
+        return;
+      }
+
+      //Special interfaces that require access controls
+      if (requestURI.startsWith("/store/")) {
+        //Private file storage. Not allow access
+        AsyncWebServerResponse *response = request->beginResponse(401, "text/html", "403 - Forbidden");
+        request->send(response);
+        return;
+      }
+
+      /* Default Routing Rules */
+
+      Serial.println("URI: " + requestURI + " | MIME: " + getMime(requestURI));
+      //Check if the file exists on the SD card
+      if (SD.exists("/www" + requestURI)) {
+        // File exists on SD card web root
+        if (IsDir("/www" + requestURI)) {
+          //Requesting a directory
+          if (!requestURI.endsWith("/")) {
+            //Missing tailing slash
+            request->redirect(requestURI + "/");
+            return;
+          }
+
+          if (SD.exists("/www" + requestURI + "index.html")) {
+            request->send(SDFS, "/www" + requestURI + "/index.html", "text/html", false);
+          } else {
+            HandleDirRender(request, requestURI , "/www" + requestURI);
+          }
+
+        } else {
+          request->send(SDFS, "/www" + requestURI, getMime(requestURI), false);
+        }
+      } else {
+        // File does not exist in web root
+        AsyncResponseStream *response = request->beginResponseStream("text/html");
+        Serial.println("NOT FOUND: " + requestURI);
+        prettyPrintRequest(request);
+        response->print("<!DOCTYPE html><html><head><title>Not Found</title></head><body>");
+        response->print("<p>404 - Not Found</p>");
+        response->printf("<p>Requesting http://%s with URI: %s</p>", request->host().c_str(), request->url().c_str());
+        response->print("</body></html>");
+        request->send(response);
+      }
+    }
+};

firmware/v3/web-server/server.ino

@@ -138,6 +138,13 @@ void initWebServer() {
   server.on("/api/fs/properties", HTTP_GET, HandleFileProp);
   server.on("/api/fs/search", HTTP_GET, HandleFileSearch);
 
+  /* File Share Functions */
+  server.on("/api/share/new", HTTP_POST, HandleCreateShare);
+  server.on("/api/share/del", HTTP_POST, HandleRemoveShare);
+  server.on("/api/share/list", HTTP_GET, HandleShareList);
+  server.on("/share", HTTP_GET, HandleShareAccess);
+  
+  
   /* Preference */
   server.on("/api/pref/set", HTTP_GET, HandleSetPref);
   server.on("/api/pref/get", HTTP_GET, HandleLoadPref);

firmware/v3/web-server/share.ino

@@ -0,0 +1,196 @@
+/*
+    Share.ino
+
+    This module handle file sharing on the WebSticks
+    Recommended file size <= 5MB
+
+*/
+
+//Create a file share, must be logged in
+void HandleCreateShare(AsyncWebServerRequest *r) {
+  if (!HandleAuth(r)) {
+    return;
+  }
+
+  //Get filename from parameters
+  String filepath = GetPara(r, "filename");
+  filepath.trim();
+  //filepath is the subpath under the www folder
+  // e.g. "/www/myfile.txt" filepath will be "/myfile.txt"
+  if (filepath == "") {
+    SendErrorResp(r, "invalid filename given");
+    return;
+  }
+
+  if (IsFileShared(filepath)) {
+    SendErrorResp(r, "target file already shared");
+    return;
+  }
+
+  //Add a share entry for this file
+  String shareID = GeneratedRandomHex();
+  bool succ = DBWrite("shln", shareID, filepath);
+  if (!succ) {
+    SendErrorResp(r, "unable to save share entry");
+    return;
+  }
+  succ = DBWrite("shfn", filepath, shareID);
+  if (!succ) {
+    SendErrorResp(r, "unable to save share entry");
+    return;
+  }
+
+  Serial.println("Shared: " + filepath + " with ID: " + shareID);
+  SendOK(r);
+}
+
+//Remove a file share
+void HandleRemoveShare(AsyncWebServerRequest *r) {
+  if (!HandleAuth(r)) {
+    return;
+  }
+
+  //Get filename from parameters
+  String filepath = GetPara(r, "filename");
+  filepath.trim();
+  if (filepath == "") {
+    SendErrorResp(r, "invalid filename given");
+    return;
+  }
+
+  if (!IsFileShared(filepath)) {
+    SendErrorResp(r, "target file is not shared");
+    return;
+  }
+
+  //Get the share ID of this entry
+  String shareId = DBRead("shfn", filepath);
+  if (shareId == "") {
+    SendErrorResp(r, "unable to load share entry");
+    return;
+  }
+
+  //Remove share entry in both tables
+  bool succ = DBRemove("shln", shareId);
+  if (!succ) {
+    SendErrorResp(r, "unable to remove share entry");
+    return;
+  }
+  succ = DBRemove("shfn", filepath);
+  if (!succ) {
+    SendErrorResp(r, "unable to remove share entry");
+    return;
+  }
+
+  Serial.println("Removed shared file " + filepath + " (share ID: " + shareId + ")");
+  SendOK(r);
+}
+
+//List all shared files
+void HandleShareList(AsyncWebServerRequest *r) {
+  if (!HandleAuth(r)) {
+    return;
+  }
+
+  //Build the json with brute force
+  String jsonString = "[";
+  //As the DB do not support list, it directly access the root of the folder where the kvdb stores the entries
+  File root = SD.open(DB_root + "shln/");
+  bool firstObject = true;
+  if (root) {
+    while (true) {
+      File entry = root.openNextFile();
+      if (!entry) {
+        // No more files
+        break;
+      } else {
+        //There are more lines. Add a , to the end of the previous json object
+        if (!firstObject) {
+          jsonString = jsonString + ",";
+        } else {
+          firstObject = false;
+        }
+
+        //Filter out all the directory if any
+        if (entry.isDirectory()) {
+          continue;
+        }
+
+        //Read the filename from file
+        String filename = "";
+        while (entry.available()) {
+          filename = filename + entry.readString();
+        }
+
+        //Append to the JSON line
+        jsonString = jsonString + "{\"filename\":\"" + basename(filename) + "\", \"filepath\":\"" + filename + "\", \"shareid\":\"" + entry.name() + "\"}";
+      }
+    }
+  }
+  jsonString += "]";
+
+  r->send(200, "application/json", jsonString);
+}
+
+//Serve a shared file, do not require login
+void HandleShareAccess(AsyncWebServerRequest *r) {
+  String shareID = GetPara(r, "id");
+  if (shareID == "") {
+    r->send(404, "text/plain", "Not Found");
+    return;
+  }
+
+  //Download request
+  String sharedFilename = GetFilenameFromShareID(shareID);
+  if (sharedFilename == "") {
+    r->send(404, "text/plain", "Share not found");
+    return;
+  }
+
+  //Check if the file still exists on SD card
+  String realFilepath = "/www" + sharedFilename;
+  File targetFile = SD.open(realFilepath);
+  if (!targetFile) {
+    r->send(404, "text/plain", "Shared file no longer exists");
+    return;;
+  }
+
+
+  if (r->hasParam("download")) {
+    //Serve the file
+    r->send(SDFS, realFilepath, getMime(sharedFilename), false);
+  } else if (r->hasParam("prop")) {
+    //Serve the file properties
+    File targetFile = SD.open(realFilepath);
+    if (!targetFile) {
+      SendErrorResp(r, "File open failed");
+      return;
+    }
+
+    String resp = "{\"filename\":\"" + basename(sharedFilename) + "\",\"filepath\":\"" + sharedFilename + "\",\"isDir\":false,\"filesize\":" + String(targetFile.size()) + ",\"shareid\":\"" + shareID + "\"}";
+    targetFile.close();
+    SendJsonResp(r, resp);
+  } else {
+    //serve download UI template
+    r->send(SDFS, "/www/admin/share.html", "text/html", false);
+    return;
+  }
+}
+
+//Get the file share ID from filename, return empty string if not shared
+String GetFileShareIDByFilename(String filepath) {
+  return DBRead("shfn", filepath);
+}
+
+//Get the filename (without /www prefix) from share id
+// return empty string if not found
+String GetFilenameFromShareID(String shareid) {
+  return DBRead("shln", shareid);
+}
+
+
+//Check if a file is shared
+bool IsFileShared(String filepath) {
+  //Check if the file is shared
+  return DBKeyExists("shfn", filepath);
+}

firmware/v3/web-server/web-server.ino

@@ -71,7 +71,7 @@ String loadWiFiInfoFromSD();
 
 void setup() {
   // Setup Debug Serial Port
-  Serial.begin(9600);
+  Serial.begin(115200);
 
   //Try Initialize SD card (blocking)
   while (!SD.begin(CS_PIN, SDCardInitSpeed)) {

sd_card/www/admin/fs.html

@@ -49,7 +49,7 @@
                 <button class="fileoprSmallBtn" title="New Folder" onclick="newFolder();"><i style="color: #ffe79e !important;" class="yellow folder icon"></i> <span locale="fileopr/New Folder">New Folder</span></button><br>
                 <button class="fileoprSmallBtn" title="Delete" onclick="deleteFile();"><i class="red times icon"></i> <span locale="fileopr/Delete">Delete</span></button><br>
             </div>
-            
+            <button class="fileOprBtn" title="Download" onclick="shareFile(); "><img class="opricon" src="img/opr/share.svg"><p class="oprtxt wideScreenOnly" locale="fileopr/Share">Share</p></button>
             <br>
             <!-- Directoy navigations -->
             <div class="addressBar">
@@ -86,7 +86,7 @@
                 </div>
                 <h3 class="ui header" style="margin-top: 0.4em;">
                     <span class="filename" style="word-break: break-all;" locale="sidebar/default/nofileselected">No File Selected</span>
-                    <div class="sub header vpath"  style="word-break: break-all;" locale="sidebar/default/instruction">Select a file to view file properties</div>
+                    <div id="fileVpath" class="sub header vpath"  style="word-break: break-all;" locale="sidebar/default/instruction">Select a file to view file properties</div>
                 </h3>
                 <table class="ui very basic table">
                     <tbody class="propertiesTable">
@@ -94,6 +94,7 @@
                     </tbody>
                 </table>
                 <button id="loadPreviewButton" class="ui small fluid basic disabled button" onclick="loadPreview();">Load Preview</button>
+                <button id="removeShareButton" class="ui small fluid basic disabled button" style="margin-top: 0.4em;" onclick="removeShare();"><i class="ui red remove icon"></i> Remove Share</button>
             </div>
             <div id="uploadProgressBar">
                 <div class="ui small indicating progress" style="margin-bottom: 0px !important; border-radius: 0 !important;">
@@ -484,6 +485,8 @@
                                let isDir = filedata.IsDir;
                                let filename = filedata.Filename;
                                let filesize = filedata.Filesize;
+                               let shareID = filedata.Share;
+                               
                                 if (isDir){
                                     $("#folderList").append(`<div class="fileObject item" draggable="true" filename="${filename}" filepath="${path + filename}" ondblclick="openthis(this,event);" type="folder">
                                         <span style="display:inline-block !important;word-break: break-all; width:100%;" class="normal object">
@@ -491,11 +494,15 @@
                                         </span>
                                     </div>`);
                                 }else{
+                                    let shareIcon = "";
+                                    if (shareID != ""){
+                                        shareIcon = ` <a href="/share?id=${shareID}" target="_blank"><i class="ui green share alternate icon"></i></a>`;
+                                    }
                                     let extension = "." + filename.split(".").pop();
                                     let fileIcon = getFileIcon(extension);
-                                    $("#fileList").append(`<div class="fileObject item" draggable="true" filename="${filename}" filepath="${path + filename}" ondblclick="openthis(this,event);" type="file">
+                                    $("#fileList").append(`<div class="fileObject item" isShared="${(shareID!="")?"true":"false"}" draggable="true" filename="${filename}" filepath="${path + filename}" ondblclick="openthis(this,event);" type="file">
                                         <span style="display:inline-block !important;word-break: break-all; width:100%;" class="normal object">
-                                            <i class="${fileIcon} icon" style="margin-right:12px; color:grey;"></i>  <span class="filename">${filename} (${humanFileSize(filesize)})</span> 
+                                            <i class="${fileIcon} icon" style="margin-right:12px; color:grey;"></i>  <span class="filename">${filename} (${humanFileSize(filesize)}) ${shareIcon}</span> 
                                         </span>
                                     </div>`);
                                 }
@@ -740,7 +747,16 @@
                         <td style="word-break: break-all;">
                             /www${data.filepath}
                         </td>
-                    </tr><tr>
+                    </tr>
+                    <tr>
+                        <td style="${styleOverwrite}">
+                            Share ID
+                        </td>
+                        <td style="word-break: break-all;">
+                            ${(data.shareid=="")?`File Not Shared`:`<a href="/share?id=${data.shareid}" target="_blank">${data.shareid}</a>`}
+                        </td>
+                    </tr>
+                    <tr>
                         <td style="${styleOverwrite}">
                             Folder
                         </td>
@@ -777,7 +793,13 @@
                         }else{
                             $("#propertiesView").find(".preview").find("img").attr("xsrc", "");
                             $("#loadPreviewButton").addClass("disabled");
-                        }   
+                        }
+
+                        if (data.shareid!=""){
+                            $("#removeShareButton").removeClass('disabled');
+                        }else{
+                            $("#removeShareButton").addClass('disabled');
+                        }
                         
                     }
                 })
@@ -1145,11 +1167,49 @@
                     
                     }
                 }
-                
-                
             });
 
 
+            //Share file API
+            function shareFile(){
+                if ($(".fileObject.selected").length > 1){
+                    alert("File Share only support single file per share");
+                }else if ($(".fileObject.selected").length == 1){
+                    var fileType = $(".fileObject.selected").attr("type");
+                    if (fileType == "folder"){
+                        alert("Folder sharing is not supported");
+                        return;
+                    }
+                    //Create an share entry for this file.
+                    var filename = $(".fileObject.selected").attr("filename");
+                    var filepath = $(".fileObject.selected").attr("filepath");
+
+                    $.post("/api/share/new?filename=" + filepath, function(data){
+                        if (data.error != undefined){
+                            alert(data.error);
+                        }else{
+                            refresh();
+                            getFileProperties(filepath);
+                            msgbox("File Shared");
+                        }
+                    });
+                }
+            }
+
+            function removeShare(){
+                let fileVpath = $("#fileVpath").text();
+                $.post("/api/share/del?filename=" + fileVpath, function(data){
+                    if (data.error != undefined){
+                        alert(data.error);
+                    }else{
+                        refresh();
+                        getFileProperties(fileVpath);
+                        msgbox("Share Removed");
+                    }
+                });
+            }
+
+
 
         </script>
     </body>

sd_card/www/admin/index.html

@@ -35,6 +35,7 @@
         </a>
         <a class="active yellow selectable icon item" onclick="switchFrame(event, this);" xframe="fs"><i class="folder icon"></i></a>
         <a class="violet selectable icon item" onclick="switchFrame(event, this);" xframe="search"><i class="ui search icon"></i></a>
+        <a class="green selectable icon item" onclick="switchFrame(event, this);" xframe="shares"><i class="ui share alternate icon"></i></a>
         <a class="blue selectable icon item" onclick="switchFrame(event, this);" xframe="users"><i class="ui user icon"></i></a>
         <a class="grey selectable icon item" onclick="switchFrame(event, this);" xframe="info"><i class="ui info circle icon"></i></a>
         <div class="right menu">
@@ -48,6 +49,9 @@
         <div id="search" class="frameWrapper" style="display:none;">
             <iframe src="search.html"></iframe>
         </div>
+        <div id="shares" class="frameWrapper" style="display:none;">
+            <iframe src="shares.html"></iframe>
+        </div>
         <div id="users" class="frameWrapper" style="display:none;">
             <iframe src="users.html"></iframe>
         </div>

sd_card/www/admin/share.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Share | WebStick</title>
+	<link rel="icon" type="image/png" href="/favicon.png" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.js" integrity="sha512-gnoBksrDbaMnlE0rhhkcx3iwzvgBGz6mOEj4/Y5ZY09n55dYddx6+WYc72A55qEesV8VX2iMomteIwobeGK1BQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.css" integrity="sha512-3quBdRGJyLy79hzhDDcBzANW+mVqPctrGCfIPosHQtMKb3rKsCxfyslzwlz2wj1dT8A7UX+sEvDjaUv+WExQrA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+	 <link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200&display=swap" rel="stylesheet">
+
+    <style>
+		body {
+            
+        }
+
+		.main{
+			display: flex;
+            align-items: center;
+            justify-content: center;
+            height: calc(100vh - 60px);
+            margin: 0;
+		}
+		
+        #qr-code {
+            max-width: 300px;
+			height: 300px;
+        }
+
+        #generate-btn {
+            cursor: pointer;
+        }
+		
+		.ui.header,button,input{
+		    font-family: 'Noto Sans TC', sans-serif !important;
+		}
+		
+		@media screen and (min-width: 768px) {
+			#title{
+				padding-top: 3em;
+				border-right: 1px solid #dedede;
+				padding-right: 5em;
+			}
+			
+			#title .ui.header{
+				width: 300px;
+			}
+			
+			#qrgrid{
+				padding-left: 5em;
+			}
+		}
+    </style>
+</head>
+<body>
+	<div class="main">
+		<div class="ui stackable grid">
+			<div id="title" class="eight wide column" align="center">
+				<h2 class="ui header">
+					<span id="filename"><i class="ui loading spinner icon"></i> Loading</span>
+					<div class="sub header" id="filepath"></div>
+				</h2>
+				<table class="ui very basic collapsing celled table">
+					<tbody>
+					  <tr>
+						<td>File Size</td>
+						<td id="filesize"></td>
+					  </tr>
+					  <tr>
+						<td>Share ID</td>
+						<td id="shareid"></td>
+					  </tr>
+					</tbody>
+				</table>
+				<a class="ui basic button" id="downloadBtn" href="" target="_blank" download=""><i class="ui blue download icon"></i> Download</a>
+			</div>
+		<div id="qrgrid" class="eight wide column"  align="center">
+			<div style="width: 300px">
+				<div id="qr-code"></div>
+				<Br>
+				<p>Download on another device</p>
+			</div>
+		</div>
+	</div>
+    <script>
+
+		function initDownloadInfo(){
+			const urlParams = new URLSearchParams(window.location.search);
+			const id = urlParams.get('id');
+			$.get("/share?id=" + id + "&prop", function(data){
+				if (data.error == undefined){
+					$("#filename").text(data.filename);
+					$("#filepath").text(data.filepath);
+					$("#filesize").text(humanFileSize(data.filesize, false, 2));
+					$("#shareid").text(data.shareid);
+					$("#downloadBtn").attr("href", "/share?id=" + id + "&download");
+					$("#downloadBtn").attr("download", data.filename);
+					document.title = data.filename + " | WebStick Share"
+				}
+			})
+		}
+
+		initDownloadInfo();
+
+
+		function initQrCode(url){
+			var qrcode = new QRCode(document.getElementById('qr-code'), {
+                text: url,
+                width: 300,
+                height: 300
+            });
+		}
+		initQrCode(window.location.href);
+		
+		function humanFileSize(bytes, si=false, dp=1) {
+			const thresh = si ? 1000 : 1024;
+
+			if (Math.abs(bytes) < thresh) {
+				return bytes + ' B';
+			}
+
+			const units = si 
+				? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 
+				: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+			let u = -1;
+			const r = 10**dp;
+
+			do {
+				bytes /= thresh;
+				++u;
+			} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+			return bytes.toFixed(dp) + ' ' + units[u];
+		}
+
+    </script>
+</body>
+</html>

sd_card/www/admin/shares.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Share Manager</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" >
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
+    <style>
+        body{
+            background-color: rgb(243, 243, 243);
+        }
+    </style>
+</head>
+<body>
+    <br>
+    <div class="ui container">
+        <div class="ui segment">
+            <table class="ui celled striped table">
+                <thead>
+                  <tr><th colspan="4">
+                    List of shares on this WebStick
+                  </th>
+                </tr>
+                </thead>
+                <tbody id="sharesListTable">
+                  <tr>
+                    <td colspan="4">
+                      <i class="ui loading spinner icon"></i> Loading
+                    </td>
+                  </tr>
+                </tbody>
+            </table>
+            <button onclick="initShareList();" class="ui basic button"><i class="ui green refresh icon"></i>Refresh List</button>
+        </div>
+    </div>
+    <script>
+        function initShareList(){
+            $("#sharesListTable").html(`<tr>
+                    <td colspan="4">
+                      <i class="ui loading spinner icon"></i> Loading
+                    </td>
+                </tr>`);
+            $.get("/api/share/list", function(data){
+                if (data.error != undefined){
+                    alert(data.error);
+                }else{
+                    $("#sharesListTable").html("");
+                    data.forEach(share => {
+                        $("#sharesListTable").append(`<tr>
+                            <td class="collapsing">
+                            <i class="grey file outline icon"></i> ${share.filename}
+                            </td>
+                            <td><i class="yellow folder icon"></i> ${share.filepath}</td>
+                            <td>${share.shareid}</td>
+                            <td class="right aligned collapsing">
+                                <a class="ui basic icon button" href="/share?id=${share.shareid}&download" target="_blank" download="" title="Download"><i class="ui blue download icon"></i></a>
+                                <a class="ui basic icon button" href="/share?id=${share.shareid}" target="_blank" title="Open Share"><i class="ui linkify green icon"></i></a>
+                                <button class="ui basic icon button" onclick="removeShareFromList('${share.filename}', '${share.filepath}', '${share.shareid}');" title="Remove Share"><i class="ui red trash icon"></i></button>
+                            </td>
+                        </tr>`);
+                    });
+
+                    if (data.length == 0){
+                        $("#sharesListTable").append(`<tr>
+                            <td colspan="4">
+                            <i class="green check circle icon"></i> No shared files on this WebStick
+                            </td>
+                        </tr>`);
+                    }
+                }
+            });
+        }
+        initShareList();
+
+        //Remove a share from the share list
+        function removeShareFromList(filename, filepath, uuid){
+            if (confirm("Confirm share for " + filename + " ?")){
+                $.post("/api/share/del?filename=" + filepath, function(data){
+                    if (data.error != undefined){
+                        alert(data.error);
+                    }else{
+                        initShareList();
+                    }
+                })
+            }
+            
+        }
+    </script>
+</body>
+</html>