Media File Browser

A modern, beautiful PHP application to browse and preview images, PDFs, and videos from any folder on your system.

✨ Features

🎨 Beautiful Modern UI

• Dark theme with glassmorphism effects
• Smooth animations and transitions
• Responsive design for all devices
• Premium gradient accents
• Touch-friendly mobile interface

🎯 Media Support

• Images: JPG, JPEG, PNG, GIF, WebP, SVG
• PDFs: Full PDF support with embedded viewer
• Videos: MP4, WebM, OGG, MOV, AVI with streaming support

🚀 Core Functionality

• Browse Any Folder: Enter any folder path to view media files
• Smart Pagination: Display 500 items per page with easy navigation controls
• Filter by Type: Quick tabs to filter All, Images, PDFs, or Videos
• Preview Media: View images and videos directly in the browser
• PDF Viewer: Embedded PDF viewer for document preview
• Download Files: One-click download for any file
• Lazy Loading: Optimized performance with lazy image loading

🗑️ File Management

• Single Delete: Delete individual files with confirmation dialog
• Bulk Delete: Select multiple files with checkboxes and delete at once
  • Checkbox appears on hover over each media card
  • "Select All" checkbox for quick selection
  • Shows count of selected files
  • Confirmation dialog before deletion
  • Success/error messages with deletion count
• Base64 Encoding: Secure file path handling for special characters and cleaner URLs

⌨️ Keyboard Shortcuts

• Press / to focus on the folder input
• Click on file names to copy them to clipboard

📦 Installation

Requirements

• PHP 7.0 or higher
• A web server (Apache, Nginx, or PHP built-in server)
• Read/write permissions for folders you want to browse

Quick Start

1. Clone or download the project files to your web server directory

2. Run with PHP Built-in Server

   php -S localhost:8000

3. Access the Application

   • Open your browser and navigate to http://localhost:8000

🎯 Usage

1. Enter Folder Path

   • Windows example: C:\Users\YourName\Pictures
   • Linux/Mac example: /home/username/Pictures

2. Browse Files

   • Click "Browse" button or press Enter
   • View your media files in a beautiful grid layout

3. Filter Files

   • Use the filter tabs (All, Images, PDFs, Videos) to show specific file types

4. Manage Files

   • Download: Click the download button on any file
   • Delete Single: Click the delete button (confirmation required)
   • Delete Multiple:
     • Hover over cards to see checkboxes
     • Select files you want to delete
     • Click "Delete Selected" button
     • Confirm deletion

5. Navigate Pages

   • Use pagination controls at the bottom to browse through pages
   • Shows "Page X of Y" for easy navigation

📁 File Structure

media-browser/
├── index.php       # Main application file with pagination & bulk delete
├── view.php        # File viewer and downloader with base64 support
├── styles.css      # Modern styling with animations
├── script.js       # Interactive functionality and lazy loading
└── README.md       # This documentation

🔒 Security Features

Path Security

• Base64 encoding for all file paths in URLs
• Prevents path manipulation and injection attacks
• Handles special characters safely (spaces, &, #, %, etc.)

File Operations

• File existence validation before any operation
• File type validation (only allowed extensions)
• Readable file checks
• POST request required for deletions (prevents accidental GET deletions)
• Confirmation dialogs for all destructive operations

Access Control

• Only specified media file types can be viewed
• Directory traversal protection
• Permission checks before file operations

🎨 Customization

Styling

Edit styles.css to customize:

• Color schemes: Modify :root CSS variables
• Animations: Adjust transition timings and effects
• Layout: Change grid layout and card sizes
• Pagination: Customize items per page (default: 500)

Configuration

Edit index.php to modify:

• $itemsPerPage (line 11): Change pagination size
• $supportedExtensions (line 85): Add/remove file types

🌐 Browser Compatibility

• ✅ Chrome/Edge (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Opera
• ⚠️ Older browsers may not support :has() selector (graceful degradation)

🔧 Troubleshooting

Common Issues

"The specified folder does not exist"

• Verify the folder path is correct
• Use absolute paths (full path from drive root)
• Check for typos in the path

"The folder is not readable"

• Check folder permissions
• Ensure PHP has read access to the folder
• On Windows, check folder security settings

Images/Videos not loading

• Check file permissions
• Verify the file extensions are supported
• Check browser console for errors
• Ensure PHP has read access to individual files

Delete not working

• Verify PHP has write permissions for the folder
• Check file is not locked by another process
• Review error messages for specific issues

Pagination issues

• Clear browser cache
• Check if folder path is preserved in URL
• Verify total file count is correct

📊 Performance

• Pagination: Only loads 500 items at a time for better performance
• Lazy Loading: Images load as they come into view
• Efficient Encoding: Base64 encoding adds ~30% to URL length but is very fast
• Batch Operations: Multiple deletions processed in a single request

📝 License

Free to use and modify for personal and commercial projects.

🙏 Credits

Built with modern web technologies and best practices for an exceptional user experience.

---

Version: 2.0
Last Updated: February 2026
Features: Browse, Filter, Paginate, Download, Delete, Bulk Delete, Base64 Encoding