Pushed initial code and edited readme.

2018-04-15 20:59:09 -05:00 · 2018-04-15 20:59:09 -05:00 · b66753d5da
parent 3931edb954
commit b66753d5da
30 changed files with 1043 additions and 0 deletions
--- a/Documents/000.jpg
+++ b/Documents/000.jpg
--- a/Images/000.jpg
+++ b/Images/000.jpg
--- a/Images/1.png
+++ b/Images/1.png
--- a/Images/2.png
+++ b/Images/2.png
--- a/Images/3.png
+++ b/Images/3.png
--- a/Images/4.png
+++ b/Images/4.png
--- a/Images/5.png
+++ b/Images/5.png
--- a/Music/000.jpg
+++ b/Music/000.jpg
--- a/README.md
+++ b/README.md
@ -13,6 +13,15 @@ Notes:
 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.

+# TO-DO
+1. Allow for move, copy, delete functionality.
+2. Allow for creating folders through the web interface.
+3. Fix the ' and & naming issue.
+4. Resolve issue were uploading doesn't always prompt an interface update.
+5. Impliment themes functionality.
+6. Look to refactor code.
+
+
 # Images

 ![1 Home](Images/1.png)
--- a/Videos/000.jpg
+++ b/Videos/000.jpg
--- a/favicon.png
+++ b/favicon.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="" charset="utf-8"/>
+    <title>Web File Manager</title>
+    <link type="text/css" rel="stylesheet" href="resources/css/base.css"/>
+    <link type="text/css" rel="stylesheet" href="resources/css/main.css"/>
+    <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+</head>
+<body onload="onloadSetBG(); getDir('/')">
+    <!-- Background -->
+    <img id="bg" />
+
+    <!-- Uploader -->
+    <h2 id="fullPathHeader">
+        <form action="resources/php/upload.php" method="post" enctype="multipart/form-data" target="FormSubmitter">
+            <input type="button" onclick="tgglServerMsgView()" title="Show Server Messages" value="Show Server Messages">
+            <input type="reset" title="Clear" value="Clear">
+            <input type="submit" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
+            <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
+            <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
+            <button type="button" onclick="clearDirCookie()">Home Directory</button>
+        </form>
+        <br/>
+        &nbsp;&nbsp;&nbsp;&nbsp;Path:&nbsp;&nbsp;<span id="path"></span>
+    </h2>
+
+    <!-- Dynamic content targets -->
+    <div id="dynDiv"></div>
+    <div id="imgView" style="display:none;"></div>
+    <div id="fileView" style="display:none;"></div>
+
+    <!-- Uploader processor -->
+    <div id="toggleServerMsg" style="display:none;">
+        <iframe id="FormSubmitter" name="FormSubmitter" frameborder="0" ></iframe>
+    </div>
+
+    <script type="text/javascript" src="resources/js/ajax.js" charset="utf-8"></script>
+    <script type="text/javascript" src="resources/js/controlers.js" charset="utf-8"></script>
+    <script type="text/javascript" src="resources/js/dragContainer.js" charset="utf-8"></script>
+</body>
+</html>
--- a/resources/css/base.css
+++ b/resources/css/base.css
@ -0,0 +1,14 @@
+html {
+    margin: 0em;
+    padding: 0em;
+}
+
+iframe {
+    position: fixed;
+    overflow: auto;
+    background-color: rgba(60, 110, 135, 0.24);
+    color: rgba(255, 255, 255, 1);
+    width: 100%;
+    height: auto;
+    bottom: 0;
+}
--- a/resources/css/main.css
+++ b/resources/css/main.css
@ -0,0 +1,158 @@
+/* IDs */
+
+#DIRPATHUL {
+    display: none;
+    width: 1px;
+    height: 1px;
+}
+
+#bg {
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    z-index: -999;
+}
+#bg img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -999;
+}
+
+#fullPathHeader, #dynDiv,
+.errorStyling, .dirStyle, .movieStyle, .fileStyle {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: auto;
+    padding-bottom: 0.5em;
+    color: #ffffff;
+    text-align: center;
+    font-size: 1.2em;
+    background-color: rgba(0,0,0,0.64);
+}
+
+#fullPathHeader {
+    display: block;
+    position: fixed;
+    top: 0.5em;
+}
+
+#dynDiv {
+    margin-top: 8em;
+}
+
+#imgView, #imgArea, #fileView {
+   width: 800px;
+   height: 600px;
+}
+
+#imgView, #fileView {
+    position: fixed;
+    bottom: 0em;
+    z-index: 100;
+    border-style: solid;
+    border-color: rgb(114,184,199);
+
+   }
+
+#fileView {
+    display: block;
+    overflow: auto;
+}
+
+#fileViewInner {
+    position: sticky;
+    display: inline;
+    width: 100%;
+    height: 500px;
+}
+
+#imgArea {
+    width: 800px;
+    height: 600px;
+    overflow-y: scroll;
+}
+
+#imgView { overflow: hidden; left: 15em; }
+
+
+/* Classes */
+.imgViewImg {
+    width: inherit;
+    height: auto;
+}
+
+
+.dirStyle { background-color: rgba(0, 0, 0, 0.56); }
+.movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); }
+
+.dirStyle:hover, .movieStyle:hover, .fileStyle:hover {
+    background-color: rgba(0, 141, 166, 0.56);
+    cursor: pointer;
+}
+
+.movieStyle {
+    float: left;
+    width: 15em;
+    overflow: hidden;
+    height: auto;
+    margin: 0.5em;
+    padding: 0.5em;
+}
+
+.movieTitle {
+    width: 15em;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.iconImg {
+    width: 12em;
+    height: 8em;
+    margin: 1em;
+}
+
+.popOutBttn, .closeBttn {
+    float: right;
+    z-index: 2;
+    width: 4em;
+    height: 4em;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 4em;       /* the same as your div height */
+    background-color: rgba(0,0,0, 0.85);
+    color: rgb(255,255,255);
+    border-style:solid;
+    border-color: rgb(255,255,255);
+}
+
+
+/*    Hover events    */
+.closeBttn:hover, .popOutBttn:hover {
+    cursor: pointer;
+}
+
+.closeBttn:hover, .popOutBttn:hover {
+    background-color: rgba(255,255,255, 0.85);
+    color: #000000;
+    border-color: #000000;
+}
+
+.error, .warnning, .success {
+    float: left;
+    clear: both;
+}
+
+.errorStyling { background-color: rgb(255,0,0); }
+
+.error { color: rgb(255, 0, 0); }
+.warnning { color: rgb(255, 168, 0); }
+.success { color: rgb(136, 204, 39); }
--- a/resources/ffmpegthumbnailer
+++ b/resources/ffmpegthumbnailer
--- a/resources/images/backgrounds/000.jpg
+++ b/resources/images/backgrounds/000.jpg
--- a/resources/images/thumbnails/placeHolder.txt
+++ b/resources/images/thumbnails/placeHolder.txt
@ -0,0 +1 @@
+Place Holder File
--- a/resources/js/ajax.js
+++ b/resources/js/ajax.js
@ -0,0 +1,140 @@
+var pathNodes = [];  // Path parts  Could store a cookie to keep sessions
+
+function getDirSSE() {
+    var path = "";
+
+    // Create path from array of items
+    for (pathNode of pathNodes) { path += pathNode; }
+    path = "dirQuery=" + path;
+    process(path);
+}
+
+function getDir(query) {
+    var formULPTH    = document.getElementById("DIRPATHUL");
+    var path         = "";
+
+    // push or pop to path list
+    if (query === "/") {
+        if (document.cookie) {
+            var temp = document.cookie.replace("dirQuery=", "");
+            temp = temp.split("/");
+            // Subtract one b/c paths end with / and create empty slot
+            var size = temp.length - 1;
+
+            for (var i = 0; i < size; i++) {
+                pathNodes.push(temp[i] + "/");
+            }
+        } else {
+            pathNodes.push("." + query);                   // If in root of server
+        }
+    } else if (query === "../") {
+        if (pathNodes.length > 1) { pathNodes.pop(); }     // Only remove while not in root
+    } 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; }
+
+    formULPTH.value    = path;                             // Used when upoading a file
+    path               = "dirQuery=" + path;
+    process(path);
+}
+
+function process(path) {
+    // Get dir info...
+    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
+            updatePage(this.responseXML);
+        }
+    };
+    xhttp.open("POST", "resources/php/process.php", true); // Open the connection
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.overrideMimeType('application/xml');             // Force return to be XML
+    xhttp.send(path);                                      // Start the process
+
+    // Use a cookie for persistence during browser session....
+    document.cookie = path  +"; path=" + document.URL;
+}
+
+function updatePage(returnData) {
+    var dirPath    = returnData.getElementsByTagName('PATH_HEAD')[0];
+    var dirs       = returnData.getElementsByTagName('DIR');
+    var videos     = returnData.getElementsByTagName('VID_FILE');
+    var images     = returnData.getElementsByTagName('IMG_FILE');
+    var files      = returnData.getElementsByTagName('FILE');
+    var insertArea = document.getElementById('dynDiv');
+    var workingDir = dirPath.innerHTML;
+    var i          = 0;
+
+    // Insert dirs
+    document.getElementById("path").innerHTML = dirPath.innerHTML;
+    insertArea.innerHTML = "";
+
+    if (workingDir === "./") { var i = 2 }                 // Remove ,. and ../ if in "root"
+
+    var size = dirs.length;
+    for (; i < size; i++) {
+        var dir = dirs[i].innerHTML;
+
+        if (dir != "resources/") {
+            insertArea.innerHTML += "<div class=\"dirStyle\" onclick=\"getDir('"
+                                      + dir + "')\"  >"
+                                      + dir
+                                      + "</dir>";
+        }
+    }
+
+    // Insert videos
+    size = videos .length;
+    for (i = 0; i < size; i++) {
+        var thumbnail    = videos[i].children[0].innerHTML;
+        var videoPth     = videos[i].children[1].innerHTML;
+        var vidNme       = videos[i].children[2].innerHTML;
+
+        insertArea.innerHTML += "<span class=\"movieStyle\" title=\"" + vidNme
+                                  + "\" onclick='showMedia(\"" + videoPth + "\")'>"
+                                  + "<img src=\"" + thumbnail + "\" alt=\"" + videoPth + "\">"
+                                  + "<p class=\"movieTitle\">" + vidNme + "</p>"
+                                  + "</span>";
+    }
+
+    // Insert images
+    size = images.length;
+    for (i = 0; i < size; i++) {
+        var thumbnail    = images[i].children[0].innerHTML;
+        var imgTitle     = images[i].children[1].innerHTML;
+
+        if (!imgTitle.includes("favicon.png") && !imgTitle.includes("000.png") &&
+            !imgTitle.includes("000.jpg") && !imgTitle.includes("000.gif")) {
+                insertArea.innerHTML += "<img class=\"iconImg\" src=\""
+                                          + thumbnail
+                                          + "\" alt=\"" + imgTitle + "\""
+                                          + "onclick='showImg(\"" + thumbnail + "\")'/>";
+        }
+    }
+
+    if (images[0] != undefined) {
+        if (images[0].children[0].innerHTML.includes("000.jpg") ||
+            images[0].children[0].innerHTML.includes("000.png") ||
+            images[0].children[0].innerHTML.includes("000.gif")) {
+                updateBG(images[0].children[0].innerHTML);
+        } else { updateBG("resources/images/backgrounds/000.jpg"); }
+    } else {     updateBG("resources/images/backgrounds/000.jpg"); }
+
+    // Insert files
+    size = files.length;
+    for (i = 0; i < size; i++) {
+        var filePath    = files[i].children[0].innerHTML;
+        var fileName    = files[i].children[1].innerHTML
+
+        if (fileName != "sse.php" && fileName != "upload.php" &&
+            fileName != "open.php" && fileName != "process.php") {
+                insertArea.innerHTML += "<div class=\"fileStyle\" onclick=\"showMedia('"
+                                          + filePath + "')\">" + fileName + "</dir>";
+        }
+    }
+}
--- a/resources/js/controlers.js
+++ b/resources/js/controlers.js
@ -0,0 +1,82 @@
+function showImg(imgLoc) {
+    var imgView         = document.getElementById("imgView");
+    var toPlayerButton  = "<div class=\"popOutBttn\" onclick=\"openInLocalProg('" + imgLoc + "')\">&#8765;</div>";
+    var popButton       = "<a href=\"" + imgLoc + "\" target=\"_blank\"><div class=\"popOutBttn\">&#8599;</div></a>";
+    var CloseBttn       = "<div class=\"closeBttn\" onclick=\"closeImg()\">X</div>";
+
+    imgView.style.display   = "block";
+    imgView.innerHTML       = CloseBttn + popButton + toPlayerButton;
+    imgView.innerHTML += "<div id=\"imgArea\"><img class=\"imgViewImg\" src=\"" + imgLoc + "\" /></div>";
+
+    dragContainer(imgView);  // Set for dragging events
+}
+
+function showMedia(media) {
+    var tempRef = media.toLowerCase();
+    if (tempRef.includes(".mkv") || tempRef.includes(".avi") || tempRef.includes(".flv") ||
+        tempRef.includes(".mov") || tempRef.includes(".m4v") || tempRef.includes(".mpg") ||
+        tempRef.includes(".wmv") || tempRef.includes(".mpeg") || tempRef.includes(".psf")) {
+            openInLocalProg(media);
+    } else {
+        var mediaView       = document.getElementById("fileView");
+        var toPlayerButton  = "<div class=\"popOutBttn\" onclick=\"openInLocalProg('" + media + "')\">&#8765;</div>";
+        var popButton       = "<a title=\"New Tab\" href=\"" + media + "\" target=\"_blank\"><div class=\"popOutBttn\">&#8599;</div></a>";
+        var CloseBttn       = "<div class=\"closeBttn\" title=\"Close\" onclick=\"closeMedia()\">X</div>";
+
+        mediaView.style.display   = "block";
+        mediaView.innerHTML       = CloseBttn + popButton + toPlayerButton;
+        mediaView.innerHTML += "<iframe id=\"fileViewInner\" src=\"" + media + "\"></iframe>";
+
+        dragContainer(mediaView);  // Set for dragging events
+    }
+}
+
+function openInLocalProg(media) {
+    var xhttp = new XMLHttpRequest();
+
+    xhttp.open("POST", "resources/php/open.php", true);
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.send("media=" + media);
+}
+
+function tgglServerMsgView() {
+    var serverMsgView = document.getElementById("toggleServerMsg");
+    if (serverMsgView.style.display == "none") {
+        serverMsgView.style.display = "block";
+    } else {
+        serverMsgView.style.display = "none";
+    }
+}
+
+function closeImg() {
+    var imgView = document.getElementById("imgView");
+    imgView.style.display = "none";
+}
+
+function closeMedia() {
+    var mediaView = document.getElementById("fileView");
+    mediaView.style.display = "none";
+    mediaView.children[3].src = "";
+}
+
+function clearDirCookie() {
+    var expireDate = "Thu, 01 Jan 1970 00:00:00 UTC";
+    document.cookie = "dirQuery=; expires=" + expireDate;
+    location.reload();
+}
+
+function onloadSetBG() { updateBG("resources/images/backgrounds/000.jpg"); }
+function updateBG(bgImg) { document.getElementById("bg").src = bgImg; }
+
+
+// SSE events if supported
+if(typeof(EventSource) !== "undefined") {
+    var source = new EventSource("resources/php/sse.php");
+    source.onmessage = function(event) {
+        if (event.data === "updateListing") {
+            getDirSSE();
+        }
+    };
+} else {
+    console.log("SSE Not Supported In Browser...");
+}
--- a/resources/js/dragContainer.js
+++ b/resources/js/dragContainer.js
@ -0,0 +1,43 @@
+function dragContainer(elmnt) {
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    elmnt.onmousedown = dragMouseDown;
+
+    function dragMouseDown(e) {
+        e = e || window.event;
+        pauseEvent(e);
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e = e || window.event;
+        pauseEvent(e);
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement(e) {
+        // stop moving when mouse button is released:
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+
+    function pauseEvent(e) {
+        if(e.stopPropagation) e.stopPropagation();
+        if(e.preventDefault) e.preventDefault();
+
+        e.cancelBubble=true;
+        e.returnValue=false;
+    return false;
+    }
+}
--- a/resources/php/config.php
+++ b/resources/php/config.php
@ -0,0 +1,11 @@
+<?php
+
+$MEDIAPLAYER     = "mplayer";
+$MUSICPLAYER     = "/opt/deadbeef/bin/deadbeef";
+$IMGVIEWER       = "mirage";
+$OFFICEPROG      = "libreoffice";
+$PDFVIEWER       = "evince";
+$TEXTVIEWER      = "leafpad";
+$FILEMANAGER     = "spacefm";
+
+?>
--- a/resources/php/open.php
+++ b/resources/php/open.php
@ -0,0 +1,23 @@
+<?php
+
+function openFile($FILE) {
+    include 'config.php';
+
+    if (preg_match('(mkv|wmv|mp4|webm|avi|m4v|ogv|flv)', strtolower($FILE)) === 1) {
+        shell_exec('cd ../../ && ' . $MEDIAPLAYER . ' "' . $FILE . '" &');
+    } else if (preg_match('(png|jpg|jpeg|gif)', strtolower($FILE)) === 1) {
+        shell_exec('cd ../../ && ' . $IMGVIEWER . ' "' . $FILE . '" &');
+    } else if (preg_match('(psf|mp3|ogg|flac)', strtolower($FILE)) === 1) {
+        shell_exec('cd ../../ &&   ' . $MUSICPLAYER . '  "' . $FILE . '" &');
+    } else if (preg_match('(pdf)', strtolower($FILE)) === 1) {
+        shell_exec('cd ../../ && ' . $PDFVIEWER . ' "' . $FILE . '" &');
+    }
+
+}
+
+
+if (isset($_POST["media"])) {
+    openFile($_POST["media"]);
+}
+
+?>
--- a/resources/php/process.php
+++ b/resources/php/process.php
@ -0,0 +1,53 @@
+<?php
+ // Retrieve data
+function dirListing($PATH) {
+    $CLEANPATH = $PATH;
+    $PATH = "../../" . $PATH;
+    $GeneratedXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><DIR_LIST>"
+                    . "<PATH_HEAD>" . $CLEANPATH . "</PATH_HEAD>";
+
+    $dirContents = scandir($PATH);
+    foreach ($dirContents as $fileName) {
+        $fullPath = $CLEANPATH . $fileName;
+
+        if (is_dir($PATH . $fileName)) {
+           $GeneratedXML .= "<DIR>" . $fileName . "/</DIR>";
+       } elseif (preg_match('/^.*\.(mkv|avi|flv|mov|m4v|mpg|wmv|mpeg|mp4|webm)$/i', strtolower($fileName))) {
+           $NAMEHASH = hash('sha256', $fileName);
+           if (!file_exists('../images/thumbnails/' . $NAMEHASH . '.jpg')) {
+               shell_exec('../ffmpegthumbnailer -t 65% -s 320 -c jpg -i "'
+                          . $PATH . $fileName . '" -o ../images/thumbnails/'
+                          . $NAMEHASH . '.jpg');
+           }
+           $GeneratedXML .=
+           "<VID_FILE>"
+             . "<VID_IMG>/resources/images/thumbnails/" . $NAMEHASH . ".jpg</VID_IMG>"
+             . "<VID_PTH>" . $fullPath . "</VID_PTH>"
+             . "<VID_NAME>" . $fileName . "</VID_NAME>" .
+           "</VID_FILE>";
+       } elseif (preg_match('/^.*\.(png|jpg|gif|jpeg)$/i', strtolower($fileName))) {
+            $GeneratedXML .=
+            "<IMG_FILE>"
+              . "<IMAGE_LINK>". $fullPath . "</IMAGE_LINK>"
+              . "<IMAGE_NAME>" . $fileName . "</IMAGE_NAME>"
+              . "</IMG_FILE>";
+        } else {
+           $GeneratedXML .=
+           "<FILE>"
+             . "<FILE_PATH>" . $fullPath .  "</FILE_PATH>"
+             . "<FILE_NAME>" . $fileName . "</FILE_NAME>"
+             . "</FILE>";
+       }
+    }
+    $GeneratedXML .= "</DIR_LIST>";
+    echo $GeneratedXML;
+}
+
+// Determin action
+if (isset($_POST['dirQuery'])) {
+    dirListing(trim($_POST['dirQuery']));
+} else {
+    echo "<h2 class='errorStyling'>Error! Illegal Access Method!</h2>";
+}
+
+?>
--- a/resources/php/sse.php
+++ b/resources/php/sse.php
@ -0,0 +1,17 @@
+<?php
+    // Prompt an update clint side when sse checks that there is updateListing.
+    $myfile = fopen("../vars.txt", "wa+");
+    $state =  fgets($myfile);
+
+    if ($state == "updateListing") {
+        $txt = "Null";
+        fwrite($myfile, $txt);
+    }
+
+    fclose($myfile);
+
+    header('Content-Type: text/event-stream');
+    header('Cache-Control: no-cache');
+    echo "data:" . $state . "\n\n";
+    flush();
+?>
--- a/resources/php/upload.php
+++ b/resources/php/upload.php
@ -0,0 +1,71 @@
+<?php
+function uploadFiles($targetDir) {
+    echo "<!DOCTYPE html>"
+        . "<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];
+        $fileTmpName = $_FILES['filesToUpload']['tmp_name'][$i];
+
+        // Check if file already exists
+        $targetFile = "../../" . $targetDir . $fileName;
+        if (file_exists($targetFile)) {
+            unlink($targetFile);
+            echo "<span class='warnning'>Server: [Warnning] --> This file already exists. Overwriting it.</span>";
+        }
+
+        // Check file size
+        $fileSize = $_FILES['filesToUpload']['size'][$i];
+        if ($fileSize > 500000000000) {
+            echo "<span class='warnning'>Server: [Warnning] --> This file is too large.</span>";
+            $uploadOk = 0;
+        }
+
+        // Allow certain file formats
+        // $ext = pathinfo($targetFile,PATHINFO_EXTENSION);
+        // if($ext != "rar" && $ext != "iso" && $ext != "img" && $ext != "tar"
+        // && $ext != "zip" && $ext != "7z" && $ext != "7zip" && $ext != "jpg"
+        // && $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;
+        // }
+
+        // Check if $uploadOk is set to 0 by an error
+        if ($uploadOk == 0) {
+            echo "<span class='error'>Server: [Error] --> Your file " . $fileName . " was not uploaded.</span>";
+        // if everything is ok, try to upload file
+        } else {
+            if (move_uploaded_file($fileTmpName, $targetFile)) {
+                echo "<span class='success'>Server: [Success] --> The file " . $fileName . " has been uploaded.</span>";
+            } else {
+                echo "<span class='error'>Server: [Error] --> File not uploaded for the above reason(s).</span>";
+            }
+        }
+    }
+    echo "</body></html>";
+
+    // Prompt an update clint side when sse checks that there is updateListing.
+    $myfile = fopen("../vars.txt", "wa+");
+    $txt = "updateListing";
+    fwrite($myfile, $txt);
+    fclose($myfile);
+}
+
+// Check access type.
+if(isset($_POST["UploadFiles"])) {
+    uploadFiles($_POST["DIRPATHUL"]);
+} else {
+    echo "<span style='color:rgb(255, 0, 0);'>Server: [Error] --> Incorrect access attempt!</span>";
+}
+
+?>
--- a/resources/themes/Grid
+++ b/resources/themes/Grid
@ -0,0 +1,91 @@
+/*START OF HOMEPAGE BUTTON SETTINGS*/
+.homeSection {
+    float: left;
+    width: 40%;
+    height: 14em;
+    position: relative;
+    text-align: center;
+    font-size: 100%;
+    border-style: solid;
+    border-width: .2em;
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+    background: rgba(19, 21, 21, .6);
+}
+/*END OF HOMEPAGE BUTTON SETTINGS*/
+.header {
+    margin-left: auto;
+    margin-right: auto;
+    width: 99%;
+}
+.section, .lnksNdirs, .header {
+    display: block;
+    float: left;
+    text-align: center;
+    font-size: 100%;
+    padding-top: 1em;
+    margin: 1em;
+    background: rgba(19, 21, 21, .7);
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+/*  border-style: solid;
+    border-width: .2em;
+*/
+}
+.backbutton {
+    top: 3.55em;
+    clear: both;
+    z-index: 2;
+    position: fixed;
+    float: left;
+    width: 5%;
+    height: 50px;
+    opacity: .8;
+}
+iframe {
+    position: fixed;
+    bottom: 2em;
+    left: 25%;
+    width: 50%;
+    height: 360px;
+    background: rgba(0,0,0,.5);
+    transition: 0s;
+    transition-delay:2s;
+}
+iframe:hover {
+    left: 2%;
+    width: 99%;
+    height: 700px;
+    transition-delay:2s;
+}
+.lnkStyl {        
+    clear: right;
+    float: left;
+    border-style: solid;
+}
+
+.imgsStyl {
+    margin-left: 50%;
+    opacity: 0.699999988079071044921875;
+    width: 32.333%;
+    height: 20em;
+}
+.imgsStyl:hover {
+    opacity: 1;
+}
+#bg {
+  position: fixed;
+  top: 0%; 
+  left: 0%; 
+  width: 100%; 
+  height: 100%;
+  z-index: -1;
+}
+#bg img {
+  position: absolute; 
+  top: 0; 
+  left: 0;
+  right: 0; 
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
--- a/resources/themes/Horizontal
+++ b/resources/themes/Horizontal
@ -0,0 +1,89 @@
+body {
+width: 600%;
+}
+/*START OF HOMEPAGE BUTTON SETTINGS*/
+.homeSection {
+    float: left;
+    width: 40%;
+    height: 14em;
+    position: relative;
+    text-align: center;
+    font-size: 100%;
+    border-style: solid;
+    border-width: .2em;
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+    background: rgba(19, 21, 21, .6);
+}
+/*END OF HOMEPAGE BUTTON SETTINGS*/
+.header {
+    margin-left: auto;
+    margin-right: auto;
+    width: 99%;
+}
+.section, .lnksNdirs, .header {
+    display: block;
+    clear: right;
+    float: left;
+    text-align: center;
+    font-size: 100%;
+    padding-top: 1em;
+    margin: 1em;
+    background: rgba(19, 21, 21, .7);
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+/*  border-style: solid;
+    border-width: .2em;
+*/
+}
+.backbutton {
+    top: 3.55em;
+    clear: both;
+    z-index: 2;
+    position: fixed;
+    float: left;
+    width: 5%;
+    height: 50px;
+    opacity: .8;
+}
+iframe {
+    position: fixed;
+    bottom: 2em;
+    left: 25%;
+    width: 50%;
+    height: 360px;
+    background: rgba(0,0,0,.5)
+    transition: 0s;
+    transition-delay:2s;
+}
+.lnkStyl {        
+    clear: right;
+    float: left;
+    border-style: solid;
+}
+
+.imgsStyl {
+    margin-left: 50%;
+    opacity: 0.699999988079071044921875;
+    width: 32.333%;
+    height: 20em;
+}
+.imgsStyl:hover {
+    opacity: 1;
+}
+#bg {
+  position: fixed;
+  top: 0%; 
+  left: 0%; 
+  width: 100%; 
+  height: 100%;
+  z-index: -1;
+}
+#bg img {
+  position: absolute; 
+  top: 0; 
+  left: 0;
+  right: 0; 
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
--- a/resources/themes/List
+++ b/resources/themes/List
@ -0,0 +1,89 @@
+/*START OF HOMEPAGE BUTTON SETTINGS*/
+.homeSection {
+    float: left;
+    width: 40%;
+    height: 14em;
+    position: relative;
+    text-align: center;
+    font-size: 100%;
+    border-style: solid;
+    border-width: .2em;
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+    background: rgba(19, 21, 21, .6);
+}
+/*END OF HOMEPAGE BUTTON SETTINGS*/
+.header {
+    margin-left: auto;
+    margin-right: auto;
+    width: 99%;
+}
+.section, .lnksNdirs, .header {
+    position: relative;
+    text-align: center;
+    font-size: 100%;
+    padding-top: 1em;
+    margin-top: 1em;
+    background: rgba(19, 21, 21, .7);
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+/*  border-style: solid;
+    border-width: .2em;
+*/
+}
+.backbutton {
+    top: 3.55em;
+    clear: both;
+    z-index: 2;
+    position: fixed;
+    float: left;
+    width: 5%;
+    height: 50px;
+    opacity: .8;
+}
+iframe {
+    clear: both;
+    z-index: 1;
+    position: fixed;
+    bottom: 5%;
+    width: 40%;
+    height: 500px;
+    background: rgba(0,0,0,.5)
+    transition: 0s;
+    transition-delay:2s;
+}
+iframe:hover {
+    width: 99%;
+    transition-delay:2s;
+}
+.lnkStyl {        
+    clear: right;
+    float: left;
+    border-style: solid;
+}
+
+.imgsStyl {
+    margin-left: 50%;
+    opacity: 0.699999988079071044921875;
+    width: 32.333%;
+    height: 20em;
+}
+.imgsStyl:hover {
+    opacity: 1;
+}
+#bg {
+  position: fixed;
+  top: 0%; 
+  left: 0%; 
+  width: 100%; 
+  height: 100%;
+  z-index: -1;
+}
+#bg img {
+  position: absolute; 
+  top: 0; 
+  left: 0;
+  right: 0; 
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
--- a/resources/themes/List
+++ b/resources/themes/List
@ -0,0 +1,110 @@
+/*START OF HOMEPAGE BUTTON SETTINGS*/
+.homeSection {
+    float: left;
+    width: 40%;
+    height: 14em;
+    position: relative;
+    text-align: center;
+    font-size: 100%;
+    border-style: solid;
+    border-width: .2em;
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+    background: rgba(19, 21, 21, .6);
+}
+/*END OF HOMEPAGE BUTTON SETTINGS*/
+
+.lnkStyl {
+    clear: right;
+    float: left;
+    border-style: solid;
+}
+.imgsStyl {
+    clear: both;
+    float: left;
+    opacity: 0.699999988079071044921875;
+    width: 20%;
+    height: 15em;
+}
+.imgsStyl:hover {
+    opacity: 1;
+}
+.header {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    float: left;
+}
+.lnksNdirs {
+    width: 20%;
+    float:left;
+}
+/* used to format sections of pgs*/
+.section, .lnksNdirs, .header {
+    clear: both;
+    position: relative;
+    text-align: center;
+    padding-top: 1em;
+    margin-top: 1em;
+    font-size: 100%;
+    background: rgba(19, 21, 21, .6);
+    background: rgba(19, 21, 21, .7);
+    color: rgba(0, 232, 255, .69); /*#00E8FF*/
+/*  border-style: solid;
+    border-width: .2em;
+*/
+}
+.backbutton {
+    top: 3em;
+    clear: both;
+    z-index: 2;
+    position: fixed;
+    float: left;
+    width: 5%;
+    height: 55px;
+    opacity: .8;
+}
+.ifrmbutton2 {
+    top: 3em;
+    float: right;
+    right: .5em;
+    z-index:2;
+    position: fixed;
+    width: 5%;
+    height: 30px;
+    opacity: .6;
+}
+iframe {
+    margin-left: 2%;
+    z-index: 2;
+    position: fixed;
+    top: 8em;
+    right: 0.534em;
+    bottom: 2%;
+    width: 75%;
+    height: 525px;
+    background: rgba(0,0,0,.5)
+    transition: 0s;
+    transition-delay:2s;
+}
+iframe:hover {
+    height: 775px;
+    transition-delay:2s;
+}
+#bg {
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+#bg img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
--- a/resources/vars.txt
+++ b/resources/vars.txt