Simple File Manager in PHP By ChatGPT

0
monitor screen with openai logo on black background

Photo by Andrew Neel on Pexels.com

I was looking for a simple file manager in PHP that would be easy to understand and customize. I searched Google but couldn’t find any that could fulfill 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;">&times;</span>
        <div id="modalImageContainer">
            <img id="fullSizeImage" src="" alt="Full Size Image">
        </div>
        <div class="modal-navigation">
            <button onclick="showPreviousImage()">&lt; Previous</button>
            <button onclick="showNextImage()">Next &gt;</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>

Get Free Email Updates!

Signup now and receive free offers, discounts & coupon codes

I agree to have my personal information transfered to Mad Mimi ( more information )

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.