Last active
August 28, 2022 18:14
-
-
Save foopis23/98cbf516a68f5119e28e2c4e4d28f881 to your computer and use it in GitHub Desktop.
A simple file UI for web server written in PHP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// CONFIG | |
$override_title = null; //set overide title to use instead of directory name | |
// END CONFIG | |
?> | |
<?php | |
$title = $override_title ? $override_title : ucfirst(basename(getcwd())); | |
function get_fa_icon_for_extension($ext) { | |
switch($ext) { | |
case "zip": | |
case "jar": | |
case "7z": | |
case "rar": | |
case "tar": | |
return "fa-file-zipper"; | |
case "png": | |
case "jpg": | |
case "jpeg": | |
case "gif": | |
return "fa-file-image"; | |
case "txt": | |
return "fa-file-text"; | |
case "mp4": | |
case "webm": | |
case "ogv": | |
return "fa-file-video"; | |
case "mp3": | |
case "wav": | |
case "ogg": | |
return "fa-file-audio"; | |
default: | |
return "fa-file"; | |
} | |
} | |
?> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title><?= $title ?></title> | |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> | |
</head> | |
<body> | |
<style> | |
.buttons-container { | |
text-align: right; | |
} | |
.file-icon-container { | |
text-align: center; | |
} | |
body { | |
background-color: #cfcfcf; | |
} | |
main { | |
background-color: #ffffff; | |
} | |
</style> | |
<div class="container py-5"> | |
<main class="p-5"> | |
<h1 class="text-center mt-3 mb-5"><?= $title ?></h1> | |
<div class="table-responsive"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th></th> | |
<th>File</th> | |
<th>Size</th> | |
<th>Last Modified</th> | |
<th></th> | |
</tr> | |
</thead> | |
<tbody> | |
<?php | |
$files = scandir('./'); | |
$files = array_diff($files, array('.', '..', 'index.php')); | |
foreach ($files as $file) { | |
$file_path = './' . $file; | |
$file_size = number_format(filesize($file_path) / (2 ** 20), 2); | |
$file_modified = date('Y-m-d H:i:s', filemtime($file_path)); | |
$file_extension = pathinfo($file_path, PATHINFO_EXTENSION); | |
$file_icon = get_fa_icon_for_extension($file_extension); | |
// TODO: add support for directories | |
if (is_dir($file_path)) { | |
continue; | |
} | |
?> | |
<tr> | |
<td class="file-icon-container"><i class="fa-solid <?= $file_icon; ?>"></i></td> | |
<td><?= $file ?></td> | |
<td><?= $file_size ?> MB</td> | |
<td><?= $file_modified ?></td> | |
<td class="buttons-container"> | |
<button class="btn btn-outline-dark" onclick="copyLinkToClipboard('https://<?= $_SERVER['SERVER_NAME'] ?><?= $_SERVER['REQUEST_URI'] ?><?= $file ?>')"> | |
<i class="fa-solid fa-copy"></i> Copy Link | |
</button> | |
<a href="<?= $file_path ?>" class="btn btn-outline-dark" download><i class="fa-solid fa-download"></i>Download</a> | |
</td> | |
</tr> | |
<?php | |
} | |
?> | |
</tbody> | |
</table> | |
</main> | |
</div> | |
</div> | |
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> | |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script> | |
<script type="text/javascript"> | |
function copyLinkToClipboard(link) { | |
navigator.clipboard.writeText(link); | |
Toastify({ | |
text: "Link copied to clipboard", | |
duration: 3000, | |
close: false, | |
gravity: "bottom", // `top` or `bottom` | |
position: "center", // `left`, `center` or `right` | |
stopOnFocus: true, // Prevents dismissing of toast on hover | |
onClick: function(){} // Callback after click | |
}).showToast(); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Some Future Improvements: