Added file and folder creation. Added icons. Added delete functionality. Added rename functionality.
BIN
Images/1.png
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.1 MiB |
BIN
Images/2.png
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.1 MiB |
BIN
Images/3.png
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.4 MiB |
BIN
Images/4.png
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.8 MiB |
BIN
Images/5.png
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 1.6 MiB |
@ -6,6 +6,9 @@ WebFM is a media and file viewer.
|
||||
2. Use php -S 0.0.0.0:yourDesiredPort
|
||||
3. Use ufw or gufw to open the port on your computer to the network.
|
||||
4. Place files or start uploading some to the folders.
|
||||
5. Single clic icons and thumbnails to open files.
|
||||
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.
|
||||
|
||||
Notes:
|
||||
1. Folders and files CAN NOT have & or ' in the names. Otherwise, you can't access that item with the viewer.
|
||||
@ -14,7 +17,6 @@ Notes:
|
||||
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.
|
||||
|
||||
|
||||
# TO-DO
|
||||
1. Allow for move, copy, delete functionality.
|
||||
2. Allow for creating folders through the web interface.
|
||||
@ -23,9 +25,7 @@ Notes:
|
||||
5. Impliment themes functionality.
|
||||
6. Look to refactor code.
|
||||
|
||||
|
||||
# Images
|
||||
|
||||
![1 Home](Images/1.png)
|
||||
![2 Images Listed](Images/2.png)
|
||||
![3 Image Open](Images/3.png)
|
||||
|
28
index.html
@ -7,20 +7,22 @@
|
||||
<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('/')">
|
||||
<body onload="onloadSetBG(); getDir('/')" contextmenu="menu">
|
||||
<!-- 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>
|
||||
<input type="submit" 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>
|
||||
<br/>
|
||||
<input type="text" id="NewItem" style="text-align: center; background-color: #ffffff; color: #000000;" value="" />
|
||||
<input type="button" value="New Dir" onclick="createDir()">
|
||||
<input type="button" value="New File" onclick="createFile()">
|
||||
<br/>
|
||||
Path: <span id="path"></span>
|
||||
</h2>
|
||||
@ -35,8 +37,18 @@
|
||||
<iframe id="FormSubmitter" name="FormSubmitter" frameborder="0" ></iframe>
|
||||
</div>
|
||||
|
||||
<!-- Create the menu -->
|
||||
<menu type="context" id="menu">
|
||||
<menuitem label="Home Directory" onclick="clearDirCookie()"></menuitem>
|
||||
<menuitem label="Show Server Messages" onclick="tgglServerMsgView()"></menuitem>
|
||||
<menuitem label="Clear Upload List" onclick="clearDlList()"></menuitem>
|
||||
<menuitem label="Delete File/Directory" onclick="deleteItem()"></menuitem>
|
||||
</menu>
|
||||
|
||||
<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>
|
||||
<script type="text/javascript" src="resources/js/uiEvents.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="resources/js/uiControls.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="resources/js/dragContainerEvents.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="resources/js/fileSystemControls.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -101,17 +101,41 @@
|
||||
.movieStyle {
|
||||
float: left;
|
||||
width: 15em;
|
||||
height: 10em;
|
||||
height: 8.5em;
|
||||
overflow: hidden;
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.movieTitle {
|
||||
width: 15em;
|
||||
.dirTitle, .fileTitle, .movieTitle {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border-style: none;
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.dirTitle, .fileTitle {
|
||||
width: auto;
|
||||
background-color: #00000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.movieTitle {
|
||||
width: 18em;
|
||||
background-color: #ffffff00;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 12em;
|
||||
height: 6.5em;
|
||||
}
|
||||
|
||||
.systemIcon {
|
||||
width: 2em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.iconImg {
|
||||
@ -136,7 +160,10 @@
|
||||
|
||||
|
||||
/* Hover events */
|
||||
.closeBttn:hover, .popOutBttn:hover {
|
||||
.dirTitle:hover,
|
||||
.iconImg:hover,
|
||||
.closeBttn:hover,
|
||||
.popOutBttn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -151,8 +178,6 @@
|
||||
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); }
|
||||
|
BIN
resources/images/icons/arc.png
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
resources/images/icons/bin.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
resources/images/icons/doc.png
Normal file
After Width: | Height: | Size: 43 KiB |
BIN
resources/images/icons/folder.png
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
resources/images/icons/html.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
resources/images/icons/img.png
Normal file
After Width: | Height: | Size: 82 KiB |
BIN
resources/images/icons/pdf.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
resources/images/icons/scrip.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
resources/images/icons/text.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
@ -81,10 +81,12 @@ function updatePage(returnData) {
|
||||
var dir = dirs[i].innerHTML;
|
||||
|
||||
if (dir != "resources/") {
|
||||
insertArea.innerHTML += "<div class=\"dirStyle\" onclick=\"getDir('"
|
||||
+ dir + "')\" >"
|
||||
+ dir
|
||||
+ "</dir>";
|
||||
insertArea.innerHTML += "<div class=\"dirStyle\"> <img id=\"dirID\""
|
||||
+" class=\"systemIcon\" src=\"resources/images/icons/folder.png\" />"
|
||||
+ "<input type=\"text\" id=\"titleID\" class=\"dirTitle\""
|
||||
+ " readonly=\"true\" value=\"" + dir + "\" "
|
||||
+ " onfocusout=\"disableEdits(this)\"/>"
|
||||
+"</dir>";
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,28 +94,29 @@ function updatePage(returnData) {
|
||||
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;
|
||||
var vidNme = videos[i].children[1].innerHTML;
|
||||
|
||||
insertArea.innerHTML += "<span class=\"movieStyle\" title=\"" + vidNme
|
||||
+ "\" onclick='showMedia(\"" + videoPth + "\")'>"
|
||||
+ "<img src=\"" + thumbnail + "\" alt=\"" + videoPth + "\">"
|
||||
+ "<p class=\"movieTitle\">" + vidNme + "</p>"
|
||||
insertArea.innerHTML += "<span class=\"movieStyle\" title=\"" + vidNme + "\" >"
|
||||
+ "<img id=\"movieID\" class=\"thumbnail\""
|
||||
+ " src=\"" + thumbnail + "\" alt=\"" + vidNme + "\" />"
|
||||
+ "<input type=\"text\" id=\"titleID\" class=\"movieTitle\""
|
||||
+ " readonly=\"true\"" + " value=\"" + vidNme + "\" "
|
||||
+ " onfocusout=\"disableEdits(this)\"/>"
|
||||
+ "</span>";
|
||||
}
|
||||
|
||||
// Insert images
|
||||
size = images.length;
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
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 (!thumbnail.includes("favicon.png") && !thumbnail.includes("000.png") &&
|
||||
!thumbnail.includes("000.jpg") && !thumbnail.includes("000.gif")) {
|
||||
insertArea.innerHTML += "<img id=\"imageID\" class=\"iconImg\""
|
||||
+ " src=\"" + path + thumbnail
|
||||
+ "\" alt=\"" + thumbnail + "\"/>";
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,20 +124,52 @@ function updatePage(returnData) {
|
||||
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"); }
|
||||
updateBG(path + 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
|
||||
var fileName = files[i].children[0].innerHTML;
|
||||
var iconImg = "<img id=\"fileID\" class=\"systemIcon\"";
|
||||
|
||||
if (fileName.includes(".doc") || fileName.includes(".docx") ||
|
||||
fileName.includes(".xls") || fileName.includes(".xlsx") ||
|
||||
fileName.includes(".rtf")) {
|
||||
iconImg += " src=\"resources/images/icons/doc.png\" />";
|
||||
} else if (fileName.includes(".7z") || fileName.includes(".7zip") ||
|
||||
fileName.includes(".zip") || fileName.includes(".tar.gz") ||
|
||||
fileName.includes(".tar.xz") || fileName.includes(".gz") ||
|
||||
fileName.includes(".rar") || fileName.includes(".jar")) {
|
||||
iconImg += " src=\"resources/images/icons/arc.png\" />";
|
||||
} else if (fileName.includes(".pdf")) {
|
||||
iconImg += " src=\"resources/images/icons/pdf.png\" />";
|
||||
} else if (fileName.includes(".html")) {
|
||||
iconImg += " src=\"resources/images/icons/html.png\" />";
|
||||
} else if (fileName.includes(".txt") || fileName.includes(".conf")) {
|
||||
iconImg += " src=\"resources/images/icons/text.png\" />";
|
||||
} else if (fileName.includes(".iso") || fileName.includes(".img")) {
|
||||
iconImg += " src=\"resources/images/icons/img.png\" />";
|
||||
} else if (fileName.includes(".sh") || fileName.includes(".batch") ||
|
||||
fileName.includes(".exe")) {
|
||||
iconImg += " src=\"resources/images/icons/scrip.png\" />";
|
||||
} else {
|
||||
iconImg += " src=\"resources/images/icons/bin.png\" />";
|
||||
}
|
||||
|
||||
if (fileName != "sse.php" && fileName != "upload.php" &&
|
||||
fileName != "open.php" && fileName != "process.php") {
|
||||
insertArea.innerHTML += "<div class=\"fileStyle\" onclick=\"showMedia('"
|
||||
+ filePath + "')\">" + fileName + "</dir>";
|
||||
insertArea.innerHTML += "<div class=\"fileStyle\">"
|
||||
+ iconImg
|
||||
+ "<input type=\"text\" id=\"titleID\" class=\"fileTitle\""
|
||||
+ " readonly=\"true\"" + " value=\"" + fileName + "\" "
|
||||
+ " onfocusout=\"disableEdits(this)\"/>"
|
||||
+ "</dir>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,82 +0,0 @@
|
||||
function showImg(imgLoc) {
|
||||
var imgView = document.getElementById("imgView");
|
||||
var toPlayerButton = "<div title=\"Open In Local Program\" class=\"popOutBttn\" onclick=\"openInLocalProg('" + imgLoc + "')\">∽</div>";
|
||||
var popButton = "<a href=\"" + imgLoc + "\" target=\"_blank\"><div class=\"popOutBttn\">↗</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 title=\"Open In Local Program\" class=\"popOutBttn\" onclick=\"openInLocalProg('" + media + "')\">∽</div>";
|
||||
var popButton = "<a title=\"New Tab\" href=\"" + media + "\" target=\"_blank\"><div class=\"popOutBttn\">↗</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...");
|
||||
}
|
128
resources/js/fileSystemControls.js
Normal file
@ -0,0 +1,128 @@
|
||||
var formerFileName = "";
|
||||
|
||||
function showImg(imgLoc) {
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
var imgView = document.getElementById("imgView");
|
||||
var fullImage = path + imgLoc;
|
||||
var toPlayerButton = "<div title=\"Open In Local Program\" class=\"popOutBttn\" onclick=\"openInLocalProg('" + fullImage + "')\">∽</div>";
|
||||
var popButton = "<a href=\"" + fullImage + "\" target=\"_blank\"><div class=\"popOutBttn\">↗</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=\"" + fullImage + "\" /></div>";
|
||||
dragContainer(imgView); // Set for dragging events
|
||||
}
|
||||
|
||||
function showMedia(media) {
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
var tempRef = media.toLowerCase();
|
||||
var fullMedia = path + media;
|
||||
|
||||
if (tempRef.includes(".mp4") || tempRef.includes(".webm") ||
|
||||
tempRef.includes(".mp3") || tempRef.includes(".ogg") ||
|
||||
tempRef.includes(".pdf") || tempRef.includes(".flac")) {
|
||||
var mediaView = document.getElementById("fileView");
|
||||
var toPlayerButton = "<div title=\"Open In Local Program\" class=\"popOutBttn\" onclick=\"openInLocalProg('" + fullMedia + "')\">∽</div>";
|
||||
var popButton = "<a title=\"New Tab\" href=\"" + fullMedia + "\" target=\"_blank\"><div class=\"popOutBttn\">↗</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=\"" + fullMedia + "\"></iframe>";
|
||||
|
||||
dragContainer(mediaView); // Set for dragging events
|
||||
} else {
|
||||
openInLocalProg(fullMedia);
|
||||
}
|
||||
}
|
||||
|
||||
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 enableEdit(obj) {
|
||||
obj.style.backgroundColor = "#ffffffff";
|
||||
obj.style.color = '#000000ff';
|
||||
obj.readOnly = '';
|
||||
formerFileName = obj.value;
|
||||
}
|
||||
|
||||
function disableEdits(obj) {
|
||||
obj.style.backgroundColor = "#ffffff00";
|
||||
obj.style.color = '#ffffff';
|
||||
obj.value = formerFileName;
|
||||
obj.readOnly = "true";
|
||||
}
|
||||
|
||||
function renameItem(obj) {
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
var oldName = formerFileName;
|
||||
var newName = obj.value;
|
||||
var formData = "oldName=" + oldName + "&newName=" + newName + "&path=" + path;
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
console.log("Old name: " + oldName);
|
||||
console.log("New name: " + newName);
|
||||
|
||||
xhttp.open("POST", "resources/php/rename.php", false);
|
||||
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
xhttp.send(formData);
|
||||
|
||||
getDirSSE();
|
||||
}
|
||||
|
||||
function createDir() {
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
var newItem = document.getElementById("NewItem").value;
|
||||
var fullPth = path + newItem;
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
xhttp.open("POST", "resources/php/newFileOrDir.php", false);
|
||||
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
xhttp.send("item=" + fullPth + "&isDir=dir");
|
||||
getDirSSE();
|
||||
}
|
||||
|
||||
function createFile() {
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
var newItem = document.getElementById("NewItem").value;
|
||||
var fullPth = path + newItem;
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
xhttp.open("POST", "resources/php/newFileOrDir.php", false);
|
||||
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
xhttp.send("item=" + fullPth + "&isFile=file");
|
||||
getDirSSE();
|
||||
}
|
||||
|
||||
function startDeleteItem(item) {
|
||||
// Get the item name
|
||||
itemObj = item;
|
||||
}
|
||||
|
||||
function deleteItem(item) {
|
||||
var path = document.getElementById("path").innerHTML;
|
||||
|
||||
// Clicked yes to delete and there is an item
|
||||
if (itemObj != undefined && itemObj != null) {
|
||||
var fullPth = path + itemObj;
|
||||
var answer = confirm("Are you sure you want to delete: " + fullPth);
|
||||
if (answer == true) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
|
||||
xhttp.open("POST", "resources/php/delete.php", false);
|
||||
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
xhttp.send("item=" + fullPth);
|
||||
|
||||
console.log("Deleted: " + fullPth);
|
||||
itemObj = null;
|
||||
getDirSSE();
|
||||
}
|
||||
}
|
||||
}
|
46
resources/js/uiControls.js
Normal file
@ -0,0 +1,46 @@
|
||||
|
||||
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 clearDlList() {
|
||||
document.getElementById("CLEARBTTN").click();
|
||||
}
|
||||
|
||||
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...");
|
||||
}
|
49
resources/js/uiEvents.js
Normal file
@ -0,0 +1,49 @@
|
||||
// ondblclick
|
||||
document.onclick = function (event) {
|
||||
var obj = event.target;
|
||||
var callingID = obj.id;
|
||||
var classNM = obj.className;
|
||||
|
||||
// Left click detect
|
||||
if (event.which == 1) {
|
||||
if (callingID == "dirID") {
|
||||
var node = obj.parentNode;
|
||||
getDir(node.children[1].value);
|
||||
} else if (callingID == "movieID") {
|
||||
var node = obj.parentNode;
|
||||
showMedia(node.children[1].value);
|
||||
} else if (callingID == "fileID") {
|
||||
var node = obj.parentNode;
|
||||
showMedia(node.children[1].value);
|
||||
} else if (callingID == "imageID") {
|
||||
showImg(obj.alt);
|
||||
} else if (callingID == "titleID") {
|
||||
enableEdit(obj);
|
||||
}
|
||||
// Right click detect
|
||||
} else if (event.which == 3) {
|
||||
if (callingID == "imageID") {
|
||||
startDeleteItem(obj.alt);
|
||||
} else if (callingID == "dirID" || callingID == "fileID" ||
|
||||
callingID == "movieID") {
|
||||
var node = obj.parentNode;
|
||||
startDeleteItem(node.children[1].value);
|
||||
} else if (classNM == "fileStyle" || classNM == "dirStyle" ||
|
||||
classNM == "movieStyle") {
|
||||
startDeleteItem(obj.children[1].value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.onkeydown = function (event) {
|
||||
var obj = event.target;
|
||||
var callingID = event.target.id;
|
||||
var keyCodeVal = event.keyCode;
|
||||
|
||||
// If keycode == Enter
|
||||
if (keyCodeVal == 13) {
|
||||
if (callingID == "titleID") {
|
||||
renameItem(obj);
|
||||
}
|
||||
}
|
||||
}
|
22
resources/php/delete.php
Normal file
@ -0,0 +1,22 @@
|
||||
<?php
|
||||
|
||||
function deleteItem($FILE) {
|
||||
|
||||
if (is_dir($FILE)){
|
||||
//GLOB_MARK adds a slash to directories returned
|
||||
$files = glob($FILE . '*', GLOB_MARK);
|
||||
foreach ($files as $file) {
|
||||
deleteItem($file);
|
||||
}
|
||||
rmdir($FILE);
|
||||
} else if (is_file($FILE)) {
|
||||
unlink($FILE);
|
||||
}
|
||||
}
|
||||
|
||||
chdir("../../");
|
||||
if (isset($_POST["item"])) {
|
||||
deleteItem($_POST["item"]);
|
||||
}
|
||||
|
||||
?>
|
21
resources/php/newFileOrDir.php
Normal file
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
function createItem($FILE, $TYPE) {
|
||||
if ($TYPE == "dir"){
|
||||
mkdir($FILE, 0755);
|
||||
} else if ($TYPE == "file") {
|
||||
$myfile = fopen($FILE, "w");
|
||||
fclose($myfile);
|
||||
}
|
||||
}
|
||||
|
||||
chdir("../../");
|
||||
if (isset($_POST["item"])) {
|
||||
if (isset($_POST["isDir"])) {
|
||||
createItem($_POST["item"], $_POST["isDir"]);
|
||||
} else if (isset($_POST["isFile"])) {
|
||||
createItem($_POST["item"], $_POST["isFile"]);
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
@ -3,19 +3,24 @@
|
||||
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 (preg_match('(.mkv|.avi|.flv|.mov|.m4v|.mpg|.wmv|.mpeg)', strtolower($FILE)) === 1) {
|
||||
shell_exec($MEDIAPLAYER . " \"" . $FILE . "\" &");
|
||||
} else if (preg_match('(.png|.jpg|.jpeg|.gif)', strtolower($FILE)) === 1) {
|
||||
shell_exec($IMGVIEWER . ' "' . $FILE . '" &');
|
||||
} else if (preg_match('(.psf|.mp3|.ogg|.flac)', strtolower($FILE)) === 1) {
|
||||
shell_exec($MUSICPLAYER . ' "' . $FILE . '" &');
|
||||
} else if (preg_match('(.txt)', strtolower($FILE)) === 1) {
|
||||
shell_exec($TEXTVIEWER . ' "' . $FILE . '" &');
|
||||
} else if (preg_match('(.pdf)', strtolower($FILE)) === 1) {
|
||||
shell_exec($PDFVIEWER . ' "' . $FILE . '" &');
|
||||
// Has to be below b/c pdf somehow regesters and an office app.... wtf....
|
||||
} else if (preg_match('(.odt|.doc|.docx|.rtf)', strtolower($FILE)) === 1) {
|
||||
shell_exec($OFFICEPROG . ' "' . $FILE . '" &');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
chdir("../../");
|
||||
if (isset($_POST["media"])) {
|
||||
openFile($_POST["media"]);
|
||||
}
|
||||
|
@ -1,40 +1,35 @@
|
||||
<?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>";
|
||||
. "<PATH_HEAD>" . $PATH . "</PATH_HEAD>";
|
||||
|
||||
$dirContents = scandir($PATH);
|
||||
foreach ($dirContents as $fileName) {
|
||||
$fullPath = $CLEANPATH . $fileName;
|
||||
$fullPath = $PATH . $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/'
|
||||
if (!file_exists('resources/images/thumbnails/' . $NAMEHASH . '.jpg')) {
|
||||
shell_exec('resources/ffmpegthumbnailer -t 65% -s 320 -c jpg -i "'
|
||||
. $fullPath . '" -o resources/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>";
|
||||
}
|
||||
@ -44,10 +39,11 @@ function dirListing($PATH) {
|
||||
}
|
||||
|
||||
// Determin action
|
||||
chdir("../../");
|
||||
if (isset($_POST['dirQuery'])) {
|
||||
dirListing(trim($_POST['dirQuery']));
|
||||
} else {
|
||||
echo "<h2 class='errorStyling'>Error! Illegal Access Method!</h2>";
|
||||
echo "<h2 class='error'>Error! Illegal Access Method!</h2>";
|
||||
}
|
||||
|
||||
?>
|
||||
|
12
resources/php/rename.php
Normal file
@ -0,0 +1,12 @@
|
||||
<?php
|
||||
function renameItem($OLDFILE, $NEWNAME, $PATH) {
|
||||
rename($PATH . $OLDFILE, $PATH . $NEWNAME);
|
||||
}
|
||||
|
||||
|
||||
chdir("../../");
|
||||
if (isset($_POST["oldName"]) && isset($_POST["newName"]) && isset($_POST["path"])) {
|
||||
renameItem($_POST["oldName"], $_POST["newName"], $_POST["path"]);
|
||||
}
|
||||
|
||||
?>
|
@ -1,13 +1,10 @@
|
||||
<?php
|
||||
// Prompt an update clint side when sse checks that there is updateListing.
|
||||
$myfile = fopen("../vars.txt", "wa+");
|
||||
$myfile = fopen("../vars.txt", "r");
|
||||
$state = fgets($myfile);
|
||||
fclose($myfile);
|
||||
|
||||
if ($state == "updateListing") {
|
||||
$txt = "Null";
|
||||
fwrite($myfile, $txt);
|
||||
}
|
||||
|
||||
$myfile = fopen("../vars.txt", "w");
|
||||
fclose($myfile);
|
||||
|
||||
header('Content-Type: text/event-stream');
|
||||
|
@ -13,7 +13,7 @@ function uploadFiles($targetDir) {
|
||||
$fileTmpName = $_FILES['filesToUpload']['tmp_name'][$i];
|
||||
|
||||
// Check if file already exists
|
||||
$targetFile = "../../" . $targetDir . $fileName;
|
||||
$targetFile = $targetDir . $fileName;
|
||||
if (file_exists($targetFile)) {
|
||||
unlink($targetFile);
|
||||
echo "<span class='warnning'>Server: [Warnning] --> This file already exists. Overwriting it.</span>";
|
||||
@ -55,13 +55,14 @@ function uploadFiles($targetDir) {
|
||||
echo "</body></html>";
|
||||
|
||||
// Prompt an update clint side when sse checks that there is updateListing.
|
||||
$myfile = fopen("../vars.txt", "wa+");
|
||||
$myfile = fopen("../vars.txt", "w+");
|
||||
$txt = "updateListing";
|
||||
fwrite($myfile, $txt);
|
||||
fclose($myfile);
|
||||
}
|
||||
|
||||
// Check access type.
|
||||
chdir("../../");
|
||||
if(isset($_POST["UploadFiles"])) {
|
||||
uploadFiles($_POST["DIRPATHUL"]);
|
||||
} else {
|
||||
|