Skip to content

Instantly share code, notes, and snippets.

@foopis23
Last active August 28, 2022 18:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save foopis23/98cbf516a68f5119e28e2c4e4d28f881 to your computer and use it in GitHub Desktop.
Save foopis23/98cbf516a68f5119e28e2c4e4d28f881 to your computer and use it in GitHub Desktop.
A simple file UI for web server written in PHP
<?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>
@foopis23
Copy link
Author

foopis23 commented Aug 28, 2022

Some Future Improvements:

  • Add Directory Support and Configuration to Toggle Directories on or off
  • More File Icons
  • Dark mode
  • Add support for download versus preview? (for images, video, pdfs, etc)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment