Cleaned up logic, setting up for favorites list, changed file upload design.

README.md

@@ -10,18 +10,20 @@ WebFM is a media and file viewer aspiring to become a full fledged file manager
 6. Double click the text name to change the file's or folder's name and press enter to set it.
 7. Right-click to get context menu options.
 8. Place an image such as a jpg, png, or gif labeled "000.itsExtension" in a directory then the viewer will use it as the background image for that folder/directory.
+9. Password protect folder based on resources/php/config.php file setting.
 
 Notes:
-1. Folders and files CAN NOT have & or '  in the names. Otherwise, you can't access that item with the viewer.
+1. Folders and files CAN NOT have & in the names. Otherwise, you can't access that item with the viewer.
 3. The provided folders except "resources" are optional. You can add and remove them as you please.
 4. The media and image pane can be moved by dragging from the transparentish bar that has the close button and other controls.
 5. Edit the resources/php/config.php file and put your own programs there.
+6. Edit your php.ini file "upload_max_filesize" and "post_max_size" to be higher to upload larger files.
 
 # TO-DO
 1. Allow for move and copy.
-3. Fixed the ' issue but & remains a problem.
+3. Fix & problem.
 4. Implement themes functionality.
-5. Allow users and groups to password protect based on account type.
+
 
 # Images
 ![1 Home](Images/1.png)

index.html

@@ -35,9 +35,9 @@
 
     <div id="popOutControls" style="display:none;">
         <center>
-        <form action="resources/php/filesystemActions.php" method="post" enctype="multipart/form-data" target="FormSubmitter">
+        <form>
             <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
-            <input type="submit" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
+            <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
             <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
             <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
         </form>
@@ -56,7 +56,6 @@
 
     <!-- Uploader processor -->
     <div id="serverMsgView" style="display:none;">
-        <iframe id="FormSubmitter" name="FormSubmitter" frameborder="0" ></iframe>
     </div>
 
     <script type="text/javascript" src="resources/js/passwordFieldInsert.js" charset="utf-8"></script>

resources/js/ajax.js

@@ -1,5 +1,3 @@
-var pathNodes = [];
-
 // SSE events if supported
 if(typeof(EventSource) !== "undefined") {
     var source = new EventSource("resources/php/sse.php");
@@ -12,70 +10,14 @@ if(typeof(EventSource) !== "undefined") {
     console.log("SSE Not Supported In Browser...");
 }
 
-function getDir(query) {
+function doAjax(actionPath, data) {
-    var formUlPth  = document.getElementById("DIRPATHUL");
+    var xhttp = new XMLHttpRequest();
-    var mergeType  = document.getElementById("MergeType");
-    var passwd = undefined;
-    var path       = "";
-    var cookies    = "";
-    var dirCookie  = "";
 
-    // push or pop to path list
-    if (query === "/") {
-        // Process path from cookie and set to array/list
-        dirCookie = getCookie("dirQuery");
-        if (dirCookie != "" && dirCookie != "./") {
-            dirCookie = dirCookie.split("/");
-            dirCookie.pop(); // account for ending empty slot
-
-            var size = dirCookie.length;
-            for (var i = 0; i < size; i++) {
-                pathNodes.push(dirCookie[i] + "/");
-            }
-        } else {
-            pathNodes = [];
-            pathNodes.push("." + query);
-        }
-    } else if (query === "../") {
-        // Only remove while not in root
-        if (pathNodes.length > 1) {
-            pathNodes.pop();
-        }
-    } else if (query === "./") {
-        // Do nothing since re-scanning dir
-    } else    {
-        pathNodes.push(query); // Add path
-    }
-
-    // Create path from array of items
-    for (pathNode of pathNodes) { path += pathNode; }
-
-    try {
-        passwd = document.getElementById("PASSWD").value;
-    } catch (e) {
-        passwd = "";
-    }
-
-    // Setup upload path for form and make a cookie for persistence during browser session....
-    formUlPth.value = path;
-    path            = "dirQuery=" + encodeURIComponent(path);
-    document.cookie = path + "; expires=Sun, 31 Dec 2034 12:00:00 UTC";
-    path            +="&mergeType=" + mergeType.checked
-                    + "Here&passwd=" + passwd;
-
-    process(path);
-}
-
-// Get dir info...
-function process(path) {
-    var xhttp = new XMLHttpRequest();   // Create the xhttp object
-
-    // This is actually run after open and send are done
     xhttp.onreadystatechange = function() {
         if (this.readyState === 4 && this.status === 200) {
             // Send the returned data to further process
             if (this.responseXML != null) {
-                updateHTMLDirList(this.responseXML);
+                handleXMLReturnData(this.responseXML);
             } else {
                 document.getElementById('dynDiv').innerHTML =
                 "<p class=\"error\" style=\"width:100%;text-align:center;\"> "
@@ -83,8 +25,26 @@ function process(path) {
             }
         }
     };
-    xhttp.open("POST", "resources/php/getDirList.php", true);        // Open the connection
+
+    xhttp.open("POST", actionPath, true);
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    xhttp.overrideMimeType('application/xml');                       // Force return to be XML
+    xhttp.overrideMimeType('application/xml'); // Force return to be XML
-    xhttp.send(path);                                                // Start the process
+    xhttp.send(data);
+}
+
+function fileUploader(data) {
+    var xhttp = new XMLHttpRequest();
+
+    xhttp.onreadystatechange = function() {
+        if (this.readyState === 4 && this.status === 200) {
+            // Send the returned data to further process
+            if (this.responseXML != null) {
+                handleXMLReturnData(this.responseXML);
+            }
+        }
+    };
+
+    xhttp.open("POST", "resources/php/filesystemActions.php", true);
+    xhttp.overrideMimeType('application/xml'); // Force return to be XML
+    xhttp.send(data);
 }

resources/js/filesystemActions.js

@@ -1,16 +1,80 @@
-var itemObj = undefined;
+var itemObj   = undefined;
+var binary    = null;
+var pathNodes = [];
 
-function renameItem(obj) {
-    var path      = encodeURIComponent(document.getElementById("path").innerHTML);
-    var oldName   = encodeURIComponent(formerFileName);
-    var newName   = encodeURIComponent(obj.value);
-    var formData  = "renameItem=true&oldName=" + oldName + "&newName=" + newName + "&path=" + path;
 
-    console.log("Old name:  " + oldName);
+function getDir(query) {
-    console.log("New name:  " + newName);
+    var formUlPth  = document.getElementById("DIRPATHUL");
+    var mergeType  = document.getElementById("MergeType");
+    var passwd     = undefined;
+    var data       = "";
+    var cookies    = "";
+    var dirCookie  = "";
 
-    doFSAction("resources/php/filesystemActions.php",
+    // push or pop to path list
-               formData);
+    if (query === "/") {
+        // Process path from cookie and set to array/list
+        dirCookie = getCookie("dirQuery");
+        if (dirCookie != "" && dirCookie != "./") {
+            dirCookie = dirCookie.split("/");
+            dirCookie.pop(); // account for ending empty slot
+
+            var size = dirCookie.length;
+            for (var i = 0; i < size; i++) {
+                pathNodes.push(dirCookie[i] + "/");
+            }
+        } else {
+            pathNodes = [];
+            pathNodes.push("." + query);
+        }
+    } else if (query === "../") {
+        // Only remove while not in root
+        if (pathNodes.length > 1) {
+            pathNodes.pop();
+        }
+    } else if (query === "./") {
+        // Do nothing since re-scanning dir
+    } else    {
+        pathNodes.push(query); // Add path
+    }
+
+    // Create path from array of items
+    for (pathNode of pathNodes) { data += pathNode; }
+
+    try {
+        passwd = document.getElementById("PASSWD").value;
+    } catch (e) {
+        passwd = "";
+    }
+
+    // Setup upload path for form and make a cookie for persistence during browser session....
+    formUlPth.value = data;
+    data            = "dirQuery=" + encodeURIComponent(data);
+    document.cookie = data + "; expires=Sun, 31 Dec 2034 12:00:00 UTC";
+    data            +="&mergeType=" + mergeType.checked
+                    + "Here&passwd=" + passwd;
+
+    doAjax("resources/php/getDirList.php", data);
+}
+
+async function uploadFiles() {
+    var toUpload = document.getElementsByName("filesToUpload[]")[0];
+    var path     = document.getElementById("path").innerHTML;
+    var reader   = new FileReader();
+    var data     = new FormData();
+    var size     = toUpload.files.length;
+
+    data.append("UploadFiles", "trut");
+    data.append("DIRPATHUL", path);
+
+    // Add files
+    if (size > 0) {
+        for (var i = 0; i < size; i++) {
+            data.append("filesToUpload[]", toUpload.files[i]);
+        }
+    }
+
+    fileUploader(data);
 }
 
 function createItem(type) {
@@ -20,8 +84,8 @@ function createItem(type) {
     newItem.value = "";
     fullPth       = encodeURIComponent(fullPth);
 
-    doFSAction("resources/php/filesystemActions.php",
+    doAjax("resources/php/filesystemActions.php",
-               "createItem=true&item=" + fullPth + "&type=" + type);
+           "createItem=true&item=" + fullPth + "&type=" + type);
 }
 
 function startDeleteItem(item) {
@@ -37,8 +101,8 @@ function deleteItem() {
         fullPth     = encodeURIComponent(fullPth);
         var answer  = confirm("Are you sure you want to delete: " + fullPth);
         if (answer == true) {
-            doFSAction("resources/php/filesystemActions.php",
+            doAjax("resources/php/filesystemActions.php",
-                       "deleteItem=true&item=" + fullPth);
+                   "deleteItem=true&item=" + fullPth);
 
             console.log("Deleted:  " + fullPth);
             itemObj = null;
@@ -46,14 +110,20 @@ function deleteItem() {
     }
 }
 
-function openInLocalProg(media) {
+function renameItem(obj) {
-    doFSAction("resources/php/filesystemActions.php",
+    var path      = encodeURIComponent(document.getElementById("path").innerHTML);
-               "media=" + media);
+    var oldName   = encodeURIComponent(formerFileName);
+    var newName   = encodeURIComponent(obj.value);
+    var formData  = "renameItem=true&oldName=" + oldName + "&newName=" + newName + "&path=" + path;
+
+    console.log("Old name:  " + oldName);
+    console.log("New name:  " + newName);
+
+    doAjax("resources/php/filesystemActions.php",
+            formData);
 }
 
-function doFSAction(actionPath, data) {
+function openInLocalProg(media) {
-    var xhttp = new XMLHttpRequest();
+    doAjax("resources/php/filesystemActions.php",
-    xhttp.open("POST", actionPath, true);
+           "media=" + media);
-    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-    xhttp.send(data);
 }

resources/js/passwordFieldInsert.js

@@ -1,5 +1,5 @@
-function createPassField(returnData) {
+function createPassField(data) {
-    var msg = returnData.getElementsByTagName('MESSAGE')[0].innerHTML;
+    var msg = data.getElementsByTagName('SERV_MSG')[0].innerHTML;
     console.log("No PATH_HEAD tag in XML. Checking for error MESSAGE tag.");
     console.log("Message:  " + msg);
 

resources/js/xmlParser.js

@@ -1,20 +1,27 @@
 const insertArea = document.getElementById('dynDiv');
 
-async function updateHTMLDirList(returnData) {
-    try {
-        var dirPath = returnData.getElementsByTagName('PATH_HEAD')[0].innerHTML;
-    } catch (e) {
-        createPassField(returnData);
-        return;
-    }
 
-    var dirs       = returnData.getElementsByTagName('DIR');
+function handleXMLReturnData(data) {
-    var videos     = returnData.getElementsByTagName('VID_FILE');
+    if (data.activeElement.tagName == "DIR_LIST") {
-    var images     = returnData.getElementsByTagName('IMG_FILE');
+        updateHTMLDirList(data);
-    var files      = returnData.getElementsByTagName('FILE');
+    } else if (data.activeElement.tagName == "LOCK_MESSAGE") {
-    var dirImg     = "resources/images/icons/folder.png";
+        createPassField(data);
-    var i          = 0;
+    } else if (data.activeElement.tagName == "SERV_MSG") {
-    var size       = 0;
+        console.log(document.getElementById("serverMsgView"));
+        document.getElementById("serverMsgView").appendChild(data.activeElement);
+    }
+}
+
+
+async function updateHTMLDirList(data) {
+    var dirPath = data.getElementsByTagName('PATH_HEAD')[0].innerHTML;
+    var dirs    = data.getElementsByTagName('DIR');
+    var videos  = data.getElementsByTagName('VID_FILE');
+    var images  = data.getElementsByTagName('IMG_FILE');
+    var files   = data.getElementsByTagName('FILE');
+    var dirImg  = "resources/images/icons/folder.png";
+    var i       = 0;
+    var size    = 0;
 
     // Insert dirs
     document.getElementById("path").innerHTML = dirPath;

resources/php/config.php

@@ -7,6 +7,7 @@
     $PDFVIEWER       = "evince";
     $TEXTVIEWER      = "leafpad";
     $FILEMANAGER     = "spacefm";
+    // NOTE:  Split folders with ::::
     $LOCKEDFOLDERS   = "./dirLockCheck/";
     $LOCKPASSWORD    = "1234";
 ?>

resources/php/dbController.php

@@ -0,0 +1,64 @@
+<?php
+session_start();
+
+function getTabLinks() {
+    $db = new SQLite3('resources/db/webfm.db');
+
+    if($db === false){
+        die("ERROR: Could not connect to db.");
+    }
+
+    $res = $db->query('Select * FROM faves');
+    $GeneratedXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><TABS_LIST>";
+    while ($row = $res->fetchArray(SQLITE3_ASSOC)) {
+        $GeneratedXML .= "<TAB_ID>" . $row['id'] . "</TAB_ID>" .
+                         "<TAB_LINK>" . $row['link'] . "</TAB_LINK>";
+    }
+    $GeneratedXML .= "</TABS_LIST>";
+    echo $GeneratedXML;
+}
+
+function addLink($PATHID, $PATH) {
+    $db = new SQLite3('resources/db/webfm.db');
+
+    if($db === false){
+        die("ERROR: Could not connect to db.");
+    }
+
+    $stmt = $db->prepare('INSERT INTO faves VALUES(:id,:link)');
+    $stmt->bindValue(":id", $PATHID, SQLITE3_TEXT);
+    $stmt->bindValue(":link", $PATH, SQLITE3_TEXT);
+
+    $stmt->execute();
+}
+
+function deleteLink($PATHID) {
+    $db = new SQLite3('resources/db/webfm.db');
+
+    if($db === false){
+        die("ERROR: Could not connect to db.");
+    }
+
+    $stmt = $db->prepare('DELETE FROM faves WHERE id = :id');
+    $stmt->bindValue(":id", $PATHID, SQLITE3_TEXT);
+    $stmt->execute();
+}
+
+
+// Determin action
+chdir("../../");
+if (isset($_POST['getTabs'])) {
+    getTabLinks();
+} elseif (isset($_POST['addLink'],
+          $_POST['pathID'],
+          $_POST['linkPath'])) {
+    addLink($_POST['pathID'], $_POST['linkPath']);
+} elseif (isset($_POST['deleteLink'],
+                $_POST['pathID'])) {
+    deleteLink($_POST['pathID']);
+} else {
+    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?><SERV_MSG class='error'>" .
+         "Server: [Error] --> Illegal Access Method!</SERV_MSG>";
+}
+
+?>

resources/php/filesystemActions.php

@@ -38,13 +38,9 @@ function renameItem($OLDFILE, $NEWNAME, $PATH) {
 
 // Uploader
 function uploadFiles($targetDir) {
-    echo "<!DOCTYPE html>"
+    $GeneratedXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
-        . "<head>"
-        . "<link type='text/css' rel='stylesheet' href='../css/base.css'/>"
-        . "<link type='text/css' rel='stylesheet' href='../css/main.css'/>"
-        . "</head><body>";
-
     $numberOfFiles = count($_FILES['filesToUpload']['name']);
+
     for ($i=0; $i < $numberOfFiles; $i++) {
         $uploadOk = 1;
         $fileName = $_FILES['filesToUpload']['name'][$i];
@@ -55,9 +51,11 @@ function uploadFiles($targetDir) {
         if (file_exists($targetFile)) {
             if (is_file($targetFile)) {
                 unlink($targetFile);
-                echo "<span class='warnning'>Server: [Warnning] --> This file already exists. Overwriting it.</span>";
+                $GeneratedXML .= "<SERV_MSG class='warnning'>" .
+                     "Server: [Warnning] --> This file already exists. Overwriting it.</SERV_MSG>";
             } else {
-                echo "<span class='warnning'>Server: [Warnning] --> This file might be a directory. Or, no files were submitted for uploading.</span>";
+                $GeneratedXML .= "<SERV_MSG class='warnning'>" .
+                     "Server: [Warnning] --> This file might be a directory. Or, no files were submitted for uploading.</SERV_MSG>";
                 $uploadOk = 0;
             }
         }
@@ -65,35 +63,31 @@ function uploadFiles($targetDir) {
         // Check file size
         $fileSize = $_FILES['filesToUpload']['size'][$i];
         if ($fileSize > 500000000000) {
-            echo "<span class='warnning'>Server: [Warnning] --> This file is too large.</span>";
+            $GeneratedXML .= "<SERV_MSG class='warnning'>" .
+                 "Server: [Warnning] --> This file is too large.</SERV_MSG>";
             $uploadOk = 0;
         }
 
         // Allow certain file formats
         // $ext = pathinfo($targetFile,PATHINFO_EXTENSION);
-        // if($ext != "rar" && $ext != "iso" && $ext != "img" && $ext != "tar"
+        // if(!preg_match('/^.*\.(rar|iso|img|tar|zip|7z|7zip|jpg|jpeg|png|gif|mpeg|mov|flv|avi|mp4|webm|mpg|mkv|m4a|mp3|ogg|docx|doc|odt|txt|pdf|)$/i', strtolower($ext))) {
-        // && $ext != "zip" && $ext != "7z" && $ext != "7zip" && $ext != "jpg"
+        //     $GeneratedXML .= "<SERV_MSG class='warnning'>This file type is not allowed. File Not uploade.</SERV_MSG>";
-        // && $ext != "png" && $ext != "jpeg" && $ext != "gif" && $ext != "mpeg"
-        // && $ext != "MOV" && $ext != "flv" && $ext != "avi" && $ext != "mp4"
-        // && $ext != "mov" && $ext != "mp3" && $ext != "m4a" && $ext != "ogg"
-        // && $ext != "mkv" && $ext != "docx" && $ext != "doc" && $ext != "odt"
-        // && $ext != "txt" && $ext != "pdf" && $ext != "webm" && $ext != "M4A"
-        //                                                 && $ext != "mpg" ) {
-        //     echo "<span class='warnning'>This file type is not allowed. File Not uploade.</span>";
         //     $uploadOk = 0;
         // }
 
         // if everything is ok, try to upload file
         if ($uploadOk !== 0) {
             if (move_uploaded_file($fileTmpName, $targetFile)) {
-                echo "<span class='success'>Server: [Success] --> The file " . $fileName . " has been uploaded.</span>";
+                $GeneratedXML .= "<SERV_MSG class='success'>" .
+                     "Server: [Success] --> The file " . $fileName . " has been uploaded.</SERV_MSG>";
                 $_SESSION["refreshState"] = "updateListing";
             }
         } else {
-            echo "<span class='error'>Server: [Error] --> Your file " . $fileName . " was not uploaded.</span>";
+            $GeneratedXML .= "<SERV_MSG class='error'>" .
+                 "Server: [Error] --> Your file " . $fileName . " was not uploaded.</SERV_MSG>";
         }
     }
-    echo "</body></html>";
+    echo $GeneratedXML;
 }
 
 // Local program file access
@@ -118,20 +112,24 @@ function openFile($FILE) {
 
 
 chdir("../../");
-if (isset($_POST["createItem"]) && isset($_POST["item"]) && isset($_POST["type"])) {
+if (isset($_POST["createItem"],
+          $_POST["item"],
+          $_POST["type"])) {
     createItem($_POST["item"], $_POST["type"]);
-} else if (isset($_POST["deleteItem"]) && isset($_POST["item"])) {
+} else if (isset($_POST["deleteItem"], $_POST["item"])) {
     deleteItem($_POST["item"]);
-} else if (isset($_POST["renameItem"]) && isset($_POST["oldName"]) && isset($_POST["newName"]) && isset($_POST["path"])) {
+} else if (isset($_POST["renameItem"],
+                 $_POST["oldName"],
+                 $_POST["newName"],
+                 $_POST["path"])) {
     renameItem($_POST["oldName"], $_POST["newName"], $_POST["path"]);
-} else if(isset($_POST["UploadFiles"]) && isset($_POST["DIRPATHUL"])) {
+} else if(isset($_POST["UploadFiles"], $_POST["DIRPATHUL"])) {
     uploadFiles($_POST["DIRPATHUL"]);
 } else if (isset($_POST["media"])) {
     openFile($_POST["media"]);
 } else {
-    echo "<span style='color:rgb(255, 0, 0);'>Server: [Error] --> Incorrect access attempt!</span>";
+    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?><SERV_MSG class='error'>" .
+         "Server: [Error] --> Incorrect access attempt!</SERV_MSG>";
 }
 
-
-
 ?>

resources/php/getDirList.php

@@ -16,8 +16,8 @@ function startListing($NEWPATH, $MERGESEASSONS, $PASSWD) {
             echo $GeneratedXML;
         } else {
             $GeneratedXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
-                          . "<MESSAGE>Folder is locked."
+                          . "<LOCK_MESSAGE>Folder is locked."
-                          . "</MESSAGE>";
+                          . "</LOCK_MESSAGE>";
             echo $GeneratedXML;
         }
     }
@@ -76,7 +76,8 @@ chdir("../../");
 if (isset($_POST['dirQuery'])) {
     startListing(trim($_POST['dirQuery']), $_POST['mergeType'], $_POST['passwd']);
 } else {
-    echo "<h2 class='error'>Error! Illegal Access Method!</h2>";
+    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?><SERV_MSG class='error'>" .
+         "Server: [Error] --> Incorrect access attempt!</SERV_MSG>";
 }
 
 ?>

resources/php/lockedFolders.php

@@ -6,7 +6,7 @@
         $LOCKS = explode("::::", $LOCKEDFOLDERS);
         $size  = sizeof($LOCKS);
 
-        if ($_SESSION["unlockTime"] > 0) {
+        if (isset($_SESSION["unlockTime"]) && $_SESSION["unlockTime"] > 0) {
             return false;
         }