Simple File Manager in PHP By ChatGPT
Photo by Andrew Neel on Pexels.com
I was looking for a simple file manager in PHP which would be easy to understand and customize. I searched Google but couldn’t find any that could fulfil all my requirements and was easy to integrate as a standalone module to my existing web application therefore I asked ChatGPT to code me a simple file manager and I was surprised by the output. See for yourself
My required features
- Display thumbnail of all images
- Browse link/button folders for recursive browsing
- Next/Previous button for images
- Click to view full size image
- Delete single/multiple Images
ChatGPT output for a simple file manager
$dirPath = '../imagesbackup/'.$_REQUEST['dir'].'/';
$baseDirectory = $dirPath; // Change this to the base directory you want to manage
// Handle file or directory deletion
if (isset($_POST['delete']))
$itemsToDelete = $_POST['delete'];
foreach ($itemsToDelete as $item) {
$pathToDelete = $baseDirectory . '/' . $item;
if (is_file($pathToDelete) && file_exists($pathToDelete)) {
unlink($pathToDelete);
echo "File '$item' deleted successfully.<br>";
} elseif (is_dir($pathToDelete) && file_exists($pathToDelete)) {
rmdir($pathToDelete);
echo "Directory '$item' deleted successfully.<br>";
} else {
echo "Item '$item' not found.<br>";
}
}
}
// Handle directory browsing
if (isset($_GET['dir']))
{
$currentDir = $_GET['dir'];
}
else
{
$currentDir = '';
}
// List files and directories in the current directory
$items = scandir($baseDirectory);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Manager</title>
<style>
/* Your existing CSS styles here */
.image-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.modal-content {
max-width: 80%;
max-height: 80%;
position: relative;
}
.modal-content img {
width: 100%;
height: 100%;
object-fit: contain;
}
.modal-navigation {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.modal-navigation button {
background-color: #007BFF;
color: #fff;
padding: 8px 12px;
border: none;
cursor: pointer;
font-size: 14px;
}
.modal-navigation button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
li {
margin: 10px;
text-align: center;
position: relative;
}
a {
text-decoration: none;
color: #007BFF;
margin-top: 5px;
display: block;
}
a:hover {
text-decoration: underline;
}
input[type="checkbox"] {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h2>File Manager</h2>
<!-- Display current directory -->
<p>Current Directory: <?php echo $currentDir; ?></p>
<!-- Display files and directories in the current directory -->
<form method="post">
<ul>
<?php foreach ($items as $item) : ?>
<?php if ($item != '.' && $item != '..') : ?>
<li>
<?php
$itemPath = $baseDirectory . '/' . $item;
$isDir = is_dir($itemPath);
echo $isDir ? "[DIR] " : "[FILE] ";
if ($isDir) {
echo $item;
echo '<a href="?dir=' . urlencode($currentDir . '/' . $item) . '">Browse</a>';
} else {
$imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];
$extension = pathinfo($item, PATHINFO_EXTENSION);
echo $item;
if (in_array(strtolower($extension), $imageExtensions)) {
echo '<br>';
echo '<img class="image-preview" src="' . htmlentities($itemPath) . '" alt="Image" onclick="showImageModal(this.src)">';
echo '<input type="checkbox" name="delete[]" value="' . htmlentities($currentDir . '/' . $item) . '">';
}
}
?>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<button type="submit">Delete Selected</button>
</form>
<!-- Modal for displaying full-size image -->
<div class="image-modal" id="imageModal" onclick="closeImageModal()">
<div class="modal-content" onclick="event.stopPropagation();">
<span onclick="closeImageModal()" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px;">×</span>
<div id="modalImageContainer">
<img id="fullSizeImage" src="" alt="Full Size Image">
</div>
<div class="modal-navigation">
<button onclick="showPreviousImage()">< Previous</button>
<button onclick="showNextImage()">Next ></button>
</div>
</div>
</div>
<script>
var images = [];
var currentImageIndex = 0;
function showImageModal(src) {
images = getImages();
currentImageIndex = images.indexOf(src);
document.getElementById('fullSizeImage').src = src;
document.getElementById('imageModal').style.display = 'flex';
}
function closeImageModal() {
document.getElementById('imageModal').style.display = 'none';
}
function showPreviousImage() {
if (currentImageIndex > 0) {
currentImageIndex--;
document.getElementById('fullSizeImage').src = images[currentImageIndex];
}
}
function showNextImage() {
if (currentImageIndex < images.length - 1) {
currentImageIndex++;
document.getElementById('fullSizeImage').src = images[currentImageIndex];
}
}
function getImages() {
var imageElements = document.querySelectorAll('.image-preview');
return Array.from(imageElements).map(function (element) {
return element.src;
});
}
</script>
</body>
</html>
