1.0.7

Readme fixes

CONTRIBUTING.md

@@ -0,0 +1,92 @@
+# Contributing to FileRise
+
+Thank you for your interest in contributing to FileRise! We appreciate your help in making this self-hosted file manager even better.
+
+## Table of Contents
+
+- [Getting Started](#getting-started)
+- [Reporting Bugs](#reporting-bugs)
+- [Suggesting Enhancements](#suggesting-enhancements)
+- [Pull Requests](#pull-requests)
+- [Coding Guidelines](#coding-guidelines)
+- [Documentation](#documentation)
+- [Questions and Support](#questions-and-support)
+
+## Getting Started
+
+1. **Fork the Repository**  
+   Click the **Fork** button on the top-right of the FileRise GitHub page to create your own copy.
+
+2. **Clone Your Fork**  
+
+   ```bash
+   git clone https://github.com/yourusername/FileRise.git
+   cd FileRise
+   ```
+
+3. **Set Up a Local Environment**
+FileRise runs on a standard LAMP stack. Ensure you have PHP, Apache, and the necessary dependencies installed. For frontend development, Node.js may be required for build tasks if applicable.
+
+4. **Configuration**
+Copy any example configuration files (if provided) and adjust them as needed for your local setup.
+
+## Reporting Bugs
+
+If you discover a bug, please open an issue on GitHub and include:
+
+- A clear and descriptive title.
+- Detailed steps to reproduce the bug.
+- The expected and actual behavior.
+- Screenshots or error logs (if applicable).
+- Environment details (PHP version, Apache version, OS, etc.).
+
+## Suggesting Enhancements
+
+Have an idea for a new feature or improvement? Before opening a new issue, please check if a similar suggestion already exists. If not, open an issue with:
+
+- A clear description of the enhancement.
+- Use cases or examples of how it would be beneficial.
+- Any potential drawbacks or alternatives.
+
+## Pull Requests
+
+We welcome pull requests! To submit one, please follow these guidelines:
+
+1. **Create a New Branch**  
+   Always create a feature branch from master.
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make Your Changes**  
+   Commit your changes with clear, descriptive messages. Make sure your code follows the project’s style guidelines.
+
+3. **Write Tests**  
+   If applicable, add tests to cover your changes to help us maintain code quality.
+
+4. **Submit the Pull Request**  
+   Push your branch to your fork and open a pull request against the master branch in the main repository. Provide a detailed description of your changes and why they’re needed.
+
+## Coding Guidelines
+
+- **Code Style:**  
+  Follow the conventions used in the project. Consistent indentation, naming conventions, and clear code organization are key.
+
+- **Documentation:**  
+  Update documentation if your changes affect the usage or configuration of FileRise.
+
+- **Commit Messages:**  
+  Write meaningful commit messages that clearly describe the purpose of your changes.
+
+## Documentation
+
+If you notice any areas in the documentation that need improvement or updating, please feel free to include those changes in your pull requests. Clear documentation is essential for helping others understand and use FileRise.
+
+## Questions and Support
+
+If you have any questions, ideas, or need support, please open an issue or join our discussion on [GitHub Discussions](https://github.com/error311/FileRise/discussions). We’re here to help and appreciate your contributions.
+
+---
+
+Thank you for helping to improve FileRise and happy coding!

README.md

@@ -1,19 +1,33 @@
-# Multi File Upload Editor
+# FileRise - Elevate your File Management
 
-https://github.com/user-attachments/assets/179e6940-5798-4482-9a69-696f806c37de
+**Demo link:** https://demo.filerise.net   
+**UserName:** demo   
+**Password:** demo   
+Read only permissions but can view the interface.   
 
-changelogs available here: <https://github.com/error311/multi-file-upload-editor-docker/>
+**4/3/2025 Video demo:**
 
-Multi File Upload Editor is a lightweight, secure, self-hosted web application for uploading, editing, and managing files. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive, dynamic file management interface. It serves as an alternative to solutions like FileGator or ProjectSend, providing an easy-to-setup experience ideal for document management, image galleries, firmware file hosting, and more.
+https://github.com/user-attachments/assets/221f6a53-85f5-48d4-9abe-89445e0af90e
+
+**Dark mode:**
+![Dark Header](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-header.png)
+
+changelogs available here: <https://github.com/error311/FileRise-docker/>
+
+FileRise is a lightweight, secure, self-hosted web application for uploading, syntax-highlight editing, drag & drop file management, and more. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive and dynamic interface designed to simplify file handling. As an alternative to solutions like FileGator, TinyFileManager, or ProjectSend, FileRise provides an easy-to-set-up experience ideal for document management, image galleries, firmware hosting, and other file-intensive applications.
 
 ---
 
 ## Features
 
-- **Multiple File/Folder Uploads with Progress:**
-  - Users can select and upload multiple files & folders at once.
-  - Each file upload displays an individual progress bar with percentage and upload speed.
-  - Image files show a small thumbnail preview (with default Material icons for other file types).
+- **Multiple File/Folder Uploads with Progress (Resumable.js Integration):**
+  - Users can effortlessly upload multiple files and folders simultaneously by either selecting them through the file picker or dragging and dropping them directly into the interface.
+  - **Chunked Uploads:** Files are uploaded in configurable chunks (default set as 3 MB) to efficiently handle large files.
+  - **Pause, Resume, and Retry:** Uploads can be paused and resumed at any time, with support for retrying failed chunks.
+  - **Real-Time Progress:** Each file shows an individual progress bar that displays percentage complete and upload speed.
+  - **File & Folder Grouping:** When many files are dropped, files are automatically grouped into a scrollable wrapper, ensuring the interface remains clean.
+  - **Secure Uploads:** All uploads integrate CSRF token validation and other security checks.
+
 - **Built-in File Editing & Renaming:**
   - Text-based files (e.g., .txt, .html, .js) can be opened and edited in a modal window using CodeMirror for:
     - Syntax highlighting
@@ -22,50 +36,95 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
   - Files can be renamed directly through the interface.
   - The renaming functionality now supports names with parentheses and checks for duplicate names, automatically generating a unique name (e.g., appending “ (1)”) when needed.
   - Folder-specific metadata is updated accordingly.
+  - **Enhanced File Editing Check:** Files with a Content-Length of 0 KB are now allowed to be edited.
+
 - **Built-in File Preview:**
-  - Users can quickly preview images, videos, and PDFs directly in modal popups without leaving the page.
+  - Users can quickly preview images, videos, audio and PDFs directly in modal popups without leaving the page.
   - The preview modal supports inline display of images (with proper scaling) and videos with playback controls.
   - Navigation (prev/next) within image previews is supported for a seamless browsing experience.
+
 - **Gallery (Grid) View:**
   - In addition to the traditional table view, users can toggle to a gallery view that arranges image thumbnails in a grid layout.
   - The gallery view offers multiple column options (e.g., 3, 4, or 5 columns) so that users can choose the layout that best fits their screen.
   - Action buttons (Download, Edit, Rename, Share) appear beneath each thumbnail for quick access.
-- **Batch Operations (Delete/Copy/Move/Download):**
+
+- **Batch Operations (Delete/Copy/Move/Download/Extract Zip):**
   - **Delete Files:** Delete multiple files at once.
   - **Copy Files:** Copy selected files to another folder with a unique-naming feature to prevent overwrites.
   - **Move Files:** Move selected files to a different folder, automatically generating a unique filename if needed to avoid data loss.
   - **Download Files as ZIP:** Download selected files as a ZIP archive. Users can specify a custom name for the ZIP file via a modal dialog.
-  - **Drag & Drop:** Easily move files by selecting them from the file list and simply dragging them onto your desired folder in the folder tree. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.
+  - **Extract Zip:** When one or more ZIP files are selected, users can extract the archive(s) directly into the current folder.
+  - **Drag & Drop (File Movement):** Easily move files by selecting them from the file list and dragging them onto your desired folder in the folder tree or breadcrumb. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.
+  - **Enhanced Context Menu & Keyboard Shortcuts:**
+    - **Right-Click Context Menu:**
+      - A custom context menu appears on right-clicking within the file list.
+      - For multiple selections, options include Delete Selected, Copy Selected, Move Selected, Download Zip, and (if applicable) Extract Zip.
+      - When exactly one file is selected, additional options (Preview, Edit [if editable], Rename, and Tag File) are available.
+    - **Keyboard Shortcut for Deletion:**
+      - A global keydown listener detects Delete/Backspace key presses (when no input is focused) to trigger the delete operation.
+
+- **File Tagging and Global Tag Management:**
+  - **Context Menu Tagging:**
+    - Single-file tagging: “Tag File” option in the right-click menu opens a modal to add a tag (with name and color) to the file.
+    - Multi-file tagging: When multiple files are selected, a “Tag Selected” option opens a multi‑file tagging modal to apply the same tag to all selected files.
+  - **Tagging Modals & Custom Dropdown:**
+    - Dedicated modals provide an interface for adding and updating tags.
+    - A custom dropdown in each modal displays available global tags with a colored preview and a remove icon.
+  - **Global Tag Store:**
+    - Tags are stored globally (persisted in a JSON file) for reuse across files and sessions.
+    - New tags added to any file are automatically added to the global store.
+    - Users can remove a global tag directly from the dropdown, which removes it from the available tag list for all files.
+  - **Unified Search Filtering:**
+    - The single search box now filters files based on both file names and tag names (case‑insensitive).
+
 - **Folder Management:**
   - Organize files into folders and subfolders with the ability to create, rename, and delete folders.
-  - A dynamic folder tree in the UI allows users to navigate directories easily, and any changes are immediately reflected in real time.
-  - **Per-Folder Metadata Storage:** Each folder has its own metadata JSON file (e.g., `root_metadata.json`, `FolderName_metadata.json`), and operations (copy/move/rename) update these metadata files accordingly.
+  - A dynamic folder tree in the UI allows users to navigate directories easily, with real-time updates.
+  - **Per-Folder Metadata Storage:** Each folder has its own metadata JSON file (e.g., `root_metadata.json`, `FolderName_metadata.json`), updated with operations like copy/move/rename.
+  - **Intuitive Breadcrumb Navigation:** Clickable breadcrumbs enable users to quickly jump to any parent folder; supports drag & drop for moving files.
+  - **Folder Manager Context Menu:**
+    - Right-clicking on a folder brings up a custom context menu with options for creating, renaming, and deleting folders.
+  - **Keyboard Shortcut for Folder Deletion:**
+    - A global key listener (Delete/Backspace) triggers folder deletion with safeguards to prevent deletion of the root folder.
+
 - **Sorting & Pagination:**
-  - The file list can be sorted by name, modified date, upload date, file size, or uploader.
-  - Pagination controls let users navigate through files with selectable page sizes (10, 20, 50, or 100 items per page) and “Prev”/“Next” navigation buttons.
+  - Files can be sorted by name, modified date, upload date, file size, or uploader.
+  - Pagination controls let users navigate through files with selectable page sizes (10, 20, 50, or 100 items per page) and “Prev”/“Next” buttons.
+
 - **Share Link Functionality:**
-  - Generate shareable links for files with configurable expiration times (e.g., 30, 60, 120, 180, 240 minutes, and a 1-day option) and optional password protection.
-  - Share links are stored in a JSON file with details including the folder, file, expiration timestamp, and hashed password.
-  - The share endpoint (`share.php`) validates tokens, expiration, and password before serving files (or forcing downloads).
+  - Generate shareable links for files with configurable expiration times (e.g., 30, 60, 120, 180, 240 minutes, and 1 day) and optional password protection.
+  - Share links are stored in a JSON file with details including folder, file, expiration timestamp, and hashed password.
+  - The share endpoint validates tokens, expiration, and password before serving files (or forcing downloads).
   - The share URL is configurable via environment variables or auto-detected from the server.
+
 - **User Authentication & Management:**
   - Secure, session-based authentication protects the file manager.
   - Admin users can add or remove users through the interface.
   - Passwords are hashed using PHP’s `password_hash()` for security.
   - All state-changing endpoints include CSRF token validation.
+  - Password change functionality is supported for all users.
+  - Basic Auth is available for login.
+  - **Persistent Login (Remember Me) with Encrypted Tokens:**
+    - Users can remain logged in across sessions securely.
+    - Persistent tokens are encrypted using AES‑256‑CBC before being stored in a JSON file.
+    - On auto-login, tokens are decrypted on the server to re-establish user sessions without re-authentication.
+
 - **Responsive, Dynamic & Persistent UI:**
   - The interface is mobile-friendly and adapts to various screen sizes by hiding non-critical columns on small devices.
   - Asynchronous updates (via Fetch API and XMLHttpRequest) keep the UI responsive without full page reloads.
-  - Persistent settings (such as items per page, dark/light mode preference, folder tree state, and the last open folder) ensure a smooth and customized user experience.
+  - Persistent settings (such as items per page, dark/light mode preference, folder tree state, and the last open folder) ensure a smooth, customized user experience.
+
 - **Dark Mode/Light Mode:**
-  - The application automatically adapts to the operating system’s theme preference by default and offers a manual toggle.
-  - The dark mode provides a darker background with lighter text and adjusts UI elements (including the CodeMirror editor) for optimal readability in low-light conditions.
-  - The light mode maintains a bright interface for well-lit environments.
+  - The application automatically adapts to the operating system’s theme preference by default, with a manual toggle available.
+  - Dark mode provides a darker background with lighter text, and UI elements (including the CodeMirror editor) are adjusted for optimal readability in low-light conditions.
+  - Light mode maintains a bright interface suitable for well-lit environments.
+
 - **Server & Security Enhancements:**
-  - The Apache configuration (or .htaccess files) is set to disable directory indexing (e.g., using `Options -Indexes` in the uploads directory), preventing unauthorized users from viewing directory contents.
-  - Direct access to sensitive files (e.g., `users.txt`) is restricted through .htaccess rules.
-  - A proxy download mechanism has been implemented (via endpoints like `download.php` and `downloadZip.php`) so that every file download request goes through a PHP script. This script validates the session and CSRF token before streaming the file, ensuring that even if a file URL is guessed, only authenticated users can access it.
-  - Administrators are advised to deploy the app on a secure internal network or use the proxy download mechanism for public deployments to further protect file content.
+  - Apache (or .htaccess) configurations disable directory indexing (e.g., using `Options -Indexes` in the uploads directory), preventing unauthorized file browsing.
+  - Direct access to sensitive files (e.g., `users.txt`) is restricted via .htaccess rules.
+  - A proxy download mechanism (via endpoints like `download.php` and `downloadZip.php`) routes all file downloads through PHP, ensuring session and CSRF token validation before file access.
+  - Administrators are advised to deploy the app on a secure internal network or use the proxy download mechanism for public deployments.
+
 - **Trash Management with Restore & Delete:**
   - **Trash Storage & Metadata:**
     - Deleted files are moved to a designated “Trash” folder rather than being immediately removed.
@@ -75,44 +134,88 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
       - Uploader information (and optionally who deleted it)
       - Additional metadata (e.g., file type)
   - **Restore Functionality:**
-    - Admins can view trashed files in a modal.
-    - They can restore individual files (with conflict checks) or restore all files back to their original location.
+    - Admins can view trashed files in a modal and restore individual or all files back to their original location (with conflict checks).
   - **Delete Functionality:**
     - Users can permanently delete trashed files via:
       - **Delete Selected:** Remove specific files from the Trash and update `trash.json`.
       - **Delete All:** Permanently remove every file from the Trash after confirmation.
   - **Auto-Purge Mechanism:**
-    - The system automatically purges (permanently deletes) any files in the Trash older than three days, helping manage storage and prevent the accumulation of outdated files.
-  - **User Interface:**
-    - The trash modal displays details such as file name, uploader/deleter, and the trashed date/time.
-    - Material icons with tooltips visually represent the restore and delete actions.
+    - The system automatically purges files in the Trash older than three days, managing storage and preventing accumulation of outdated files.
+  - **Trash UI:**
+    - The trash modal displays file name, uploader/deleter, and trashed date/time.
+    - Material icons with tooltips represent restore and delete actions.
+
+- **Drag & Drop Cards with Dedicated Drop Zones:**
+  - **Sidebar Drop Zone:**  
+    - Cards (e.g., upload or folder management) can be dragged into a dedicated sidebar drop zone for quick access to frequently used operations.
+    - The sidebar drop zone expands dynamically to accept drops anywhere within its visual area.
+  - **Top Bar Drop Zone:**  
+    - A top drop zone is available for reordering or managing cards quickly.
+    - Dragging a card to the top drop zone provides immediate visual feedback, ensuring a fluid and customizable workflow.
+  - **Header Drop Zone with State Preservation:**
+    - Cards can be dragged into the header drop zone, where they are represented by a compact material icon.
+    - **State Preservation:** Instead of removing the card from the DOM, the original card is moved into a hidden container. This ensures that dynamic features (such as the folder tree in the Folder Management card or file selection in the Upload card) remain fully initialized and retain their state on page refresh.
+    - **Modal Display:** When the user interacts (via hover or click) with the header icon, the card is temporarily moved into a modal overlay for full interaction. When the modal is closed, the card is returned to the hidden container, keeping its state persistent.
+  - **Seamless Interaction:**  
+    - Both drop zones support smooth drag-and-drop interactions with animations and pointer event adjustments, ensuring reliable card placement regardless of screen position.
+
+## 🔒 Admin Panel, TOTP & OpenID Connect (OIDC) Integration
+
+- **Flexible Authentication:**
+  - Supports multiple authentication methods including Form-based Login, Basic Auth, OpenID Connect (OIDC), and TOTP-based Two-Factor Authentication.
+  - Ensures continuous secure access by allowing administrators to disable only two of the available login options at any time.
+
+- **Secure OIDC Authentication:**
+  - Seamlessly integrates with OIDC providers (e.g., Keycloak, Okta).
+  - Provides admin-configurable OIDC settings—including Provider URL, Client ID, Client Secret, and Redirect URI.
+  - Stores all sensitive configurations in an encrypted JSON file.
+
+- **TOTP Two-Factor Authentication:**
+  - Enhances security by integrating Time-based One-Time Password (TOTP) functionality.
+  - The new User Panel automatically displays the TOTP setup modal when users enable TOTP, presenting a QR code for easy configuration in authenticator apps.
+  - Administrators can customize a global OTPAuth URL template for consistent TOTP provisioning across accounts.
+
+- **Dynamic Admin Panel:**
+  - Features an intuitive interface with Material Icons for quick recognition and access.
+  - Allows administrators to manage authentication settings, user management, and login methods in real time.
+  - Includes real-time validation that prevents the accidental disabling of all authentication methods simultaneously.
+  - **User Permissions Options:**
+    - *Folder Only* gives user their own root folder.
+    - *Read Only* makes it so the user can only read the files.
+    - *Disable Upload* prevents file uploads.
 
 ---
 
 ## Screenshots
 
-**Light mode**
-![Light Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-mode.png)
+**Admin Panel:**
+![Light Admin Panel](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-admin-panel.png)
 
-**Dark mode**
-![Dark Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-mode.png)
+**Light mode:**
+![Dark SideBar](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-sidebar.png)
 
-**Dark editor**
-![dark-editor](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-editor.png)
+**Light mode default:**
+![Default Layout](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-topbar.png)
 
-**Dark preview**
-![dark-preview](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-preview.png)
+**Dark editor:**
+![dark-editor](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-editor.png)
 
-**Restore or Delete Trash**
-![restore-delete](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/restore-delete.png)
+**Light preview**
+![dark-preview](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-preview.png)
 
-**Login page**
-![Login](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/login-page.png)
+**Restore or Delete Trash:**
+![restore-delete](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-trash.png)
+
+**Dark TOTP Setup:**
+![Login](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-totp-setup.png)
+
+**Gallery view:**
+![Login](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-gallery.png)
 
   **iphone screenshots:**  
 <p align="center">
-  <img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-iphone.png" width="45%">
-  <img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-preview-iphone.png" width="45%">
+  <img src="https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-iphone.png" width="45%">
+  <img src="https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-preview-iphone.png" width="45%">
 </p>
 
 ---
@@ -125,7 +228,7 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
    - **Clone:**  
 
      ```bash
-     git clone https://github.com/error311/multi-file-upload-editor.git
+     git clone https://github.com/error311/FileRise.git
      ```
 
    - **Download:**  
@@ -133,9 +236,19 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
 
 2. **Deploy to Your Web Server:**
    - Place the project files in your Apache web directory (e.g., `/var/www/html`).
-   - Ensure PHP 8.1+ is installed along with the required extensions (php-json, php-curl, php-zip, etc.).
+   - Ensure PHP 8.1+ is installed along with the required extensions (`php-json`, `php-curl`, `php-zip`, etc.).
 
-3. **Directory Setup & Permissions:**
+3. **Install Composer Dependencies (Required for OIDC Support):**
+   - Install Composer if you haven't already ([Installation Guide](https://getcomposer.org/download/)).
+   - Navigate to the project directory and run:
+
+     ```bash
+     composer install
+     ```
+
+   - This step will install necessary dependencies like `jumbojett/openid-connect-php` and `phpseclib/phpseclib`.
+
+4. **Directory Setup & Permissions:**
    - Create the following directories if they do not exist, and set appropriate permissions:
      - `uploads/` – for file storage.
      - `users/` – to store `users.txt` (user authentication data).
@@ -147,11 +260,11 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
      chmod -R 775 /var/www/uploads /var/www/users /var/www/metadata
      ```
 
-4. **Configure Apache:**
+5. **Configure Apache:**
    - Ensure that directory indexing is disabled (using `Options -Indexes` in your `.htaccess` or Apache configuration).
    - Make sure the Apache configuration allows URL rewriting if needed.
 
-5. **Configuration File:**
+6. **Configuration File:**
    - Open `config.php` and adjust the following constants as necessary:
      - `BASE_URL`: Set this to your web app’s base URL.
      - `UPLOAD_DIR`: Adjust the directory path for uploads.
@@ -168,14 +281,22 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
 
 ## Docker Usage
 
-For users who prefer containerization, a Docker image is available
+For users who prefer containerization, a Docker image is available.
+
+**Note:** The Docker image already includes Composer dependencies pre-installed (including OIDC support).
 
 ### Quickstart
 
 1. **Pull the Docker Image:**
 
    ```bash
-   docker pull error311/multi-file-upload-editor-docker:latest
+   docker pull error311/filerise-docker:latest
+   ```
+
+   macos M series:
+
+   ```bash
+   docker pull --platform linux/x86_64 error311/filerise-docker:latest
    ```
 
 2. **Run the Container:**
@@ -189,8 +310,8 @@ For users who prefer containerization, a Docker image is available
    -v /path/to/your/uploads:/var/www/uploads \
    -v /path/to/your/users:/var/www/users \
    -v /path/to/your/metadata:/var/www/metadata \
-   --name multi-file-upload-editor \
-   error311/multi-file-upload-editor-docker:latest
+   --name FileRise \
+   error311/filerise-docker:latest
    ```
 
 3. **Using Docker Compose:**
@@ -200,18 +321,19 @@ For users who prefer containerization, a Docker image is available
    ```yaml
    version: "3.8"
    services:
-   web:
-     image: error311/multi-file-upload-editor-docker:latest
-     ports:
-       - "80:80"
-     environment:
-       TIMEZONE: "America/New_York"
-       TOTAL_UPLOAD_SIZE: "5G"
-       SECURE: "false"
-     volumes:
-       - /path/to/your/uploads:/var/www/uploads
-       - /path/to/your/users:/var/www/users
-       - /path/to/your/metadata:/var/www/metadata
+     web:
+       image: error311/filerise-docker:latest
+       ports:
+         - "80:80"
+       environment:
+         TIMEZONE: "America/New_York"
+         TOTAL_UPLOAD_SIZE: "5G"
+         SECURE: "false"
+         PERSISTENT_TOKENS_KEY: "default_please_change_this_key"
+       volumes:
+         - /path/to/your/uploads:/var/www/uploads
+         - /path/to/your/users:/var/www/users
+         - /path/to/your/metadata:/var/www/metadata
    ```
 
 **Then start the container with:**
@@ -239,7 +361,7 @@ The `config.php` file contains several key constants that may need adjustment fo
   Defines the maximum upload size (default is `5G`). Ensure that PHP’s `upload_max_filesize` and `post_max_size` in your `php.ini` are consistent with this setting. The startup script (`start.sh`) updates PHP limits at runtime based on this value.
 
 - **Environment Variables (Docker):**  
-  The Docker image supports overriding configuration via environment variables. For example, you can set `SECURE`, `SHARE_URL`, and port settings via the container’s environment.
+  The Docker image supports overriding configuration via environment variables. For example, you can set `SECURE`, `SHARE_URL`, `PERSISTENT_TOKENS_KEY` and port settings via the container’s environment.
 
 ---
 
@@ -254,4 +376,8 @@ The `config.php` file contains several key constants that may need adjustment fo
 - **Logging & Troubleshooting:**  
   Check Apache logs (located in `/var/log/apache2/`) for troubleshooting any issues during deployment or operation.
 
-Enjoy using the Multi File Upload Editor! For any issues or contributions, please refer to the [GitHub repository](https://github.com/error311/multi-file-upload-editor).
+---
+
+## Contributing
+
+We welcome contributions! Please check out our [Contributing Guidelines](CONTRIBUTING.md) before getting started.

addUser.php

@@ -1,14 +1,14 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 $usersFile = USERS_DIR . USERS_FILE;
 
 // Determine if we are in setup mode:
 // - Query parameter setup=1 is passed
-// - And users.txt is either missing or empty
-$isSetup = (isset($_GET['setup']) && $_GET['setup'] == '1');
-if ($isSetup && (!file_exists($usersFile) || trim(file_get_contents($usersFile)) === '')) {
+// - And users.txt is either missing or empty (zero bytes or trimmed content is empty)
+$isSetup = (isset($_GET['setup']) && $_GET['setup'] === '1');
+if ($isSetup && (!file_exists($usersFile) || filesize($usersFile) == 0 || trim(file_get_contents($usersFile)) === '')) {
     // Allow initial admin creation without session checks.
     $setupMode = true;
 } else {
@@ -16,7 +16,7 @@ if ($isSetup && (!file_exists($usersFile) || trim(file_get_contents($usersFile))
     // In non-setup mode, check CSRF token and require admin privileges.
     $headers = array_change_key_case(getallheaders(), CASE_LOWER);
     $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
-    if ($receivedToken !== $_SESSION['csrf_token']) {
+    if (!isset($_SESSION['csrf_token']) || $receivedToken !== $_SESSION['csrf_token']) {
         echo json_encode(["error" => "Invalid CSRF token"]);
         http_response_code(403);
         exit;
@@ -30,7 +30,7 @@ if ($isSetup && (!file_exists($usersFile) || trim(file_get_contents($usersFile))
     }
 }
 
-// Get input data from JSON
+// Get input data from JSON.
 $data = json_decode(file_get_contents("php://input"), true);
 $newUsername = trim($data["username"] ?? "");
 $newPassword = trim($data["password"] ?? "");
@@ -42,7 +42,7 @@ if ($setupMode) {
     $isAdmin = !empty($data["isAdmin"]) ? "1" : "0"; // "1" for admin, "0" for regular user.
 }
 
-// Validate input
+// Validate input.
 if (!$newUsername || !$newPassword) {
     echo json_encode(["error" => "Username and password required"]);
     exit;
@@ -54,12 +54,12 @@ if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $newUsername)) {
     exit;
 }
 
-// Ensure users.txt exists
+// Ensure users.txt exists.
 if (!file_exists($usersFile)) {
     file_put_contents($usersFile, '');
 }
 
-// Check if username already exists
+// Check if username already exists.
 $existingUsers = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
 foreach ($existingUsers as $line) {
     list($storedUser, $storedHash, $storedRole) = explode(':', trim($line));
@@ -69,10 +69,10 @@ foreach ($existingUsers as $line) {
     }
 }
 
-// Hash the password
+// Hash the password.
 $hashedPassword = password_hash($newPassword, PASSWORD_BCRYPT);
 
-// Prepare new user line
+// Prepare new user line.
 $newUserLine = $newUsername . ":" . $hashedPassword . ":" . $isAdmin . PHP_EOL;
 
 // In setup mode, overwrite users.txt; otherwise, append to it.

auth.js

@@ -1,202 +1,159 @@
 import { sendRequest } from './networkUtils.js';
-import { toggleVisibility, showToast } from './domUtils.js';
+import { toggleVisibility, showToast, attachEnterKeyListener, showCustomConfirmModal } from './domUtils.js';
 import { loadFileList, renderFileTable, displayFilePreview, initFileActions } from './fileManager.js';
 import { loadFolderTree } from './folderManager.js';
+import { 
+  openTOTPLoginModal, 
+  openUserPanel, 
+  openTOTPModal, 
+  closeTOTPModal, 
+  openAdminPanel, 
+  closeAdminPanel,
+  setLastLoginData 
+} from './authModals.js';
 
-function initAuth() {
-  // First, check if the user is already authenticated.
-  checkAuthentication(false).then(data => {
-    if (data.setup) {
-      window.setupMode = true;
-      showToast("Setup mode: No users found. Please add an admin user.");
-      toggleVisibility("loginForm", false);
-      toggleVisibility("mainOperations", false);
-      document.querySelector(".header-buttons").style.visibility = "hidden";
-      toggleVisibility("addUserModal", true);
-      return;
-    }
-    window.setupMode = false;
-    if (data.authenticated) {
-      // User is logged in—show the main UI.
-      toggleVisibility("loginForm", false);
-      toggleVisibility("mainOperations", true);
-      toggleVisibility("uploadFileForm", true);
-      toggleVisibility("fileListContainer", true);
-      document.querySelector(".header-buttons").style.visibility = "visible";
-      // If admin, show admin-only buttons.
-      if (data.isAdmin) {
-        const addUserBtn = document.getElementById("addUserBtn");
-        const removeUserBtn = document.getElementById("removeUserBtn");
-        if (addUserBtn) addUserBtn.style.display = "block";
-        if (removeUserBtn) removeUserBtn.style.display = "block";
-        // Create and show the restore button.
-        let restoreBtn = document.getElementById("restoreFilesBtn");
-        if (!restoreBtn) {
-          restoreBtn = document.createElement("button");
-          restoreBtn.id = "restoreFilesBtn";
-          restoreBtn.classList.add("btn", "btn-warning");
-          // Use a material icon.
-          restoreBtn.innerHTML = '<i class="material-icons" title="Restore/Delete Trash">restore_from_trash</i>';
+// Production OIDC configuration (override via API as needed)
+const currentOIDCConfig = {
+  providerUrl: "https://your-oidc-provider.com",
+  clientId: "YOUR_CLIENT_ID",
+  clientSecret: "YOUR_CLIENT_SECRET",
+  redirectUri: "https://yourdomain.com/auth.php?oidc=callback",
+  globalOtpauthUrl: ""
+};
+window.currentOIDCConfig = currentOIDCConfig;
 
-          const headerButtons = document.querySelector(".header-buttons");
-          if (headerButtons) {
-            // Insert after the third child if available.
-            if (headerButtons.children.length >= 4) {
-              headerButtons.insertBefore(restoreBtn, headerButtons.children[4]);
-            } else {
-              headerButtons.appendChild(restoreBtn);
-            }
-          }
-        }
-        restoreBtn.style.display = "block";
-      } else {
-        const addUserBtn = document.getElementById("addUserBtn");
-        const removeUserBtn = document.getElementById("removeUserBtn");
-        if (addUserBtn) addUserBtn.style.display = "none";
-        if (removeUserBtn) removeUserBtn.style.display = "none";
-        // If not admin, hide the restore button.
-        const restoreBtn = document.getElementById("restoreFilesBtn");
-        if (restoreBtn) {
-          restoreBtn.style.display = "none";
-        }
-      }
-      // Set items-per-page.
-      const selectElem = document.querySelector(".form-control.bottom-select");
-      if (selectElem) {
-        const stored = localStorage.getItem("itemsPerPage") || "10";
-        selectElem.value = stored;
-      }
-    } else {
-      // Do not show a toast message repeatedly during initial check.
-      toggleVisibility("loginForm", true);
-      toggleVisibility("mainOperations", false);
-      toggleVisibility("uploadFileForm", false);
-      toggleVisibility("fileListContainer", false);
-      document.querySelector(".header-buttons").style.visibility = "hidden";
-    }
-  }).catch(error => {
-    console.error("Error checking authentication:", error);
-  });
-
-  // Attach login event listener once.
-  const authForm = document.getElementById("authForm");
-  if (authForm) {
-    authForm.addEventListener("submit", function (event) {
-      event.preventDefault();
-      const formData = {
-        username: document.getElementById("loginUsername").value.trim(),
-        password: document.getElementById("loginPassword").value.trim()
-      };
-      sendRequest("auth.php", "POST", formData, { "X-CSRF-Token": window.csrfToken })
-        .then(data => {
-          if (data.success) {
-            console.log("✅ Login successful. Reloading page.");
-            sessionStorage.setItem("welcomeMessage", "Welcome back, " + formData.username + "!");
-            window.location.reload();
-          } else {
-            showToast("Login failed: " + (data.error || "Unknown error"));
-          }
-        })
-        .catch(error => console.error("❌ Error logging in:", error));
-    });
+/* ----------------- Utility Functions ----------------- */
+function updateItemsPerPageSelect() {
+  const selectElem = document.querySelector(".form-control.bottom-select");
+  if (selectElem) {
+    selectElem.value = localStorage.getItem("itemsPerPage") || "10";
   }
+}
 
-  // Attach logout event listener.
-  document.getElementById("logoutBtn").addEventListener("click", function () {
-    fetch("logout.php", {
-      method: "POST",
-      credentials: "include",
-      headers: { "X-CSRF-Token": window.csrfToken }
-    })
-      .then(() => window.location.reload(true))
-      .catch(error => console.error("Logout error:", error));
-  });
+function updateLoginOptionsUI({ disableFormLogin, disableBasicAuth, disableOIDCLogin }) {
+  const authForm = document.getElementById("authForm");
+  if (authForm) authForm.style.display = disableFormLogin ? "none" : "block";
+  const basicAuthLink = document.querySelector("a[href='login_basic.php']");
+  if (basicAuthLink) basicAuthLink.style.display = disableBasicAuth ? "none" : "inline-block";
+  const oidcLoginBtn = document.getElementById("oidcLoginBtn");
+  if (oidcLoginBtn) oidcLoginBtn.style.display = disableOIDCLogin ? "none" : "inline-block";
+}
 
-  // Add User functionality.
-  document.getElementById("addUserBtn").addEventListener("click", function () {
-    resetUserForm();
-    toggleVisibility("addUserModal", true);
-  });
-  document.getElementById("saveUserBtn").addEventListener("click", function () {
-    const newUsername = document.getElementById("newUsername").value.trim();
-    const newPassword = document.getElementById("newPassword").value.trim();
-    const isAdmin = document.getElementById("isAdmin").checked;
-    if (!newUsername || !newPassword) {
-      showToast("Username and password are required!");
-      return;
-    }
-    let url = "addUser.php";
-    if (window.setupMode) {
-      url += "?setup=1";
-    }
-    fetch(url, {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": window.csrfToken
-      },
-      body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
-    })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          showToast("User added successfully!");
-          closeAddUserModal();
-          checkAuthentication(false); // Re-check without showing toast
-        } else {
-          showToast("Error: " + (data.error || "Could not add user"));
-        }
-      })
-      .catch(error => console.error("Error adding user:", error));
-  });
-  document.getElementById("cancelUserBtn").addEventListener("click", function () {
-    closeAddUserModal();
-  });
-
-  // Remove User functionality.
-  document.getElementById("removeUserBtn").addEventListener("click", function () {
-    loadUserList();
-    toggleVisibility("removeUserModal", true);
-  });
-  document.getElementById("deleteUserBtn").addEventListener("click", function () {
-    const selectElem = document.getElementById("removeUsernameSelect");
-    const usernameToRemove = selectElem.value;
-    if (!usernameToRemove) {
-      showToast("Please select a user to remove.");
-      return;
-    }
-    if (!confirm("Are you sure you want to delete user " + usernameToRemove + "?")) {
-      return;
-    }
-    fetch("removeUser.php", {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": window.csrfToken
-      },
-      body: JSON.stringify({ username: usernameToRemove })
-    })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          showToast("User removed successfully!");
-          closeRemoveUserModal();
-          loadUserList();
-        } else {
-          showToast("Error: " + (data.error || "Could not remove user"));
-        }
-      })
-      .catch(error => console.error("Error removing user:", error));
-  });
-  document.getElementById("cancelRemoveUserBtn").addEventListener("click", function () {
-    closeRemoveUserModal();
+function updateLoginOptionsUIFromStorage() {
+  updateLoginOptionsUI({
+    disableFormLogin: localStorage.getItem("disableFormLogin") === "true",
+    disableBasicAuth: localStorage.getItem("disableBasicAuth") === "true",
+    disableOIDCLogin: localStorage.getItem("disableOIDCLogin") === "true"
   });
 }
 
+function loadAdminConfigFunc() {
+  return fetch("getConfig.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(config => {
+      localStorage.setItem("disableFormLogin", config.loginOptions.disableFormLogin);
+      localStorage.setItem("disableBasicAuth", config.loginOptions.disableBasicAuth);
+      localStorage.setItem("disableOIDCLogin", config.loginOptions.disableOIDCLogin);
+      localStorage.setItem("globalOtpauthUrl", config.globalOtpauthUrl || "otpauth://totp/FileRise?issuer=FileRise");
+      updateLoginOptionsUIFromStorage();
+    })
+    .catch(() => {
+      localStorage.setItem("disableFormLogin", "false");
+      localStorage.setItem("disableBasicAuth", "false");
+      localStorage.setItem("disableOIDCLogin", "false");
+      localStorage.setItem("globalOtpauthUrl", "otpauth://totp/FileRise?issuer=FileRise");
+      updateLoginOptionsUIFromStorage();
+    });
+}
+
+function insertAfter(newNode, referenceNode) {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+function updateAuthenticatedUI(data) {
+  toggleVisibility("loginForm", false);
+  toggleVisibility("mainOperations", true);
+  toggleVisibility("uploadFileForm", true);
+  toggleVisibility("fileListContainer", true);
+  attachEnterKeyListener("addUserModal", "saveUserBtn");
+  attachEnterKeyListener("removeUserModal", "deleteUserBtn");
+  attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
+  document.querySelector(".header-buttons").style.visibility = "visible";
+
+  if (typeof data.totp_enabled !== "undefined") {
+    localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
+  }
+  
+  if (data.username) {
+    localStorage.setItem("username", data.username);
+  }
+  if (typeof data.folderOnly !== "undefined") {
+    localStorage.setItem("folderOnly", data.folderOnly ? "true" : "false");
+  }
+
+  const headerButtons = document.querySelector(".header-buttons");
+  const firstButton = headerButtons.firstElementChild;
+
+  if (data.isAdmin) {
+    let restoreBtn = document.getElementById("restoreFilesBtn");
+    if (!restoreBtn) {
+      restoreBtn = document.createElement("button");
+      restoreBtn.id = "restoreFilesBtn";
+      restoreBtn.classList.add("btn", "btn-warning");
+      restoreBtn.innerHTML = '<i class="material-icons" title="Restore/Delete Trash">restore_from_trash</i>';
+      if (firstButton) {
+        insertAfter(restoreBtn, firstButton);
+      } else {
+        headerButtons.appendChild(restoreBtn);
+      }
+    }
+    restoreBtn.style.display = "block";
+
+    let adminPanelBtn = document.getElementById("adminPanelBtn");
+    if (!adminPanelBtn) {
+      adminPanelBtn = document.createElement("button");
+      adminPanelBtn.id = "adminPanelBtn";
+      adminPanelBtn.classList.add("btn", "btn-info");
+      adminPanelBtn.innerHTML = '<i class="material-icons" title="Admin Panel">admin_panel_settings</i>';
+      insertAfter(adminPanelBtn, restoreBtn);
+      adminPanelBtn.addEventListener("click", openAdminPanel);
+    } else {
+      adminPanelBtn.style.display = "block";
+    }
+  } else {
+    const restoreBtn = document.getElementById("restoreFilesBtn");
+    if (restoreBtn) restoreBtn.style.display = "none";
+    const adminPanelBtn = document.getElementById("adminPanelBtn");
+    if (adminPanelBtn) adminPanelBtn.style.display = "none";
+  }
+
+  let userPanelBtn = document.getElementById("userPanelBtn");
+  if (!userPanelBtn) {
+    userPanelBtn = document.createElement("button");
+    userPanelBtn.id = "userPanelBtn";
+    userPanelBtn.classList.add("btn", "btn-user");
+    userPanelBtn.innerHTML = '<i class="material-icons" title="User Panel">account_circle</i>';
+    let adminPanelBtn = document.getElementById("adminPanelBtn");
+    if (adminPanelBtn) {
+      insertAfter(userPanelBtn, adminPanelBtn);
+    } else {
+      const firstButton = headerButtons.firstElementChild;
+      if (firstButton) {
+        insertAfter(userPanelBtn, firstButton);
+      } else {
+        headerButtons.appendChild(userPanelBtn);
+      }
+    }
+    userPanelBtn.addEventListener("click", openUserPanel);
+  } else {
+    userPanelBtn.style.display = "block";
+  }
+
+  updateItemsPerPageSelect();
+  updateLoginOptionsUIFromStorage();
+}
+
 function checkAuthentication(showLoginToast = true) {
-  // Optionally pass a flag so we don't show a toast every time.
   return sendRequest("checkAuth.php")
     .then(data => {
       if (data.setup) {
@@ -206,10 +163,15 @@ function checkAuthentication(showLoginToast = true) {
         toggleVisibility("mainOperations", false);
         document.querySelector(".header-buttons").style.visibility = "hidden";
         toggleVisibility("addUserModal", true);
+        document.getElementById("newUsername").focus();
         return false;
       }
       window.setupMode = false;
       if (data.authenticated) {
+        if (typeof data.totp_enabled !== "undefined") {
+          localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
+        }
+        updateAuthenticatedUI(data);
         return data;
       } else {
         if (showLoginToast) showToast("Please log in to continue.");
@@ -221,32 +183,48 @@ function checkAuthentication(showLoginToast = true) {
         return false;
       }
     })
-    .catch(error => {
-      console.error("Error checking authentication:", error);
-      return false;
+    .catch(() => false);
+}
+
+/* ----------------- Authentication Submission ----------------- */
+function submitLogin(data) {
+  setLastLoginData(data);
+  sendRequest("auth.php", "POST", data, { "X-CSRF-Token": window.csrfToken })
+    .then(response => {
+      if (response.success) {
+        sessionStorage.setItem("welcomeMessage", "Welcome back, " + data.username + "!");
+        window.location.reload();
+      } else if (response.totp_required) {
+        openTOTPLoginModal();
+      } else if (response.error && response.error.includes("Too many failed login attempts")) {
+        showToast(response.error);
+        const loginButton = document.getElementById("authForm").querySelector("button[type='submit']");
+        if (loginButton) {
+          loginButton.disabled = true;
+          setTimeout(() => {
+            loginButton.disabled = false;
+            showToast("You can now try logging in again.");
+          }, 30 * 60 * 1000);
+        }
+      } else {
+        showToast("Login failed: " + (response.error || "Unknown error"));
+      }
+    })
+    .catch(() => {
+      showToast("Login failed: Unknown error");
     });
 }
-window.checkAuthentication = checkAuthentication;
+window.submitLogin = submitLogin;
 
+/* ----------------- Other Helpers and Initialization ----------------- */
 window.changeItemsPerPage = function (value) {
   localStorage.setItem("itemsPerPage", value);
-  const folder = window.currentFolder || "root";
-  if (typeof renderFileTable === "function") {
-    renderFileTable(folder);
-  }
+  if (typeof renderFileTable === "function") renderFileTable(window.currentFolder || "root");
 };
 
-document.addEventListener("DOMContentLoaded", function () {
-  const selectElem = document.querySelector(".form-control.bottom-select");
-  if (selectElem) {
-    const stored = localStorage.getItem("itemsPerPage") || "10";
-    selectElem.value = stored;
-  }
-});
-
 function resetUserForm() {
   document.getElementById("newUsername").value = "";
-  document.getElementById("newPassword").value = "";
+  document.getElementById("addUserPassword").value = "";
 }
 
 function closeAddUserModal() {
@@ -277,7 +255,158 @@ function loadUserList() {
         closeRemoveUserModal();
       }
     })
-    .catch(error => console.error("Error loading user list:", error));
+    .catch(() => { });
+}
+window.loadUserList = loadUserList;
+
+function initAuth() {
+  checkAuthentication(false);
+  loadAdminConfigFunc();
+  const authForm = document.getElementById("authForm");
+  if (authForm) {
+    authForm.addEventListener("submit", function (event) {
+      event.preventDefault();
+      const rememberMe = document.getElementById("rememberMeCheckbox")
+        ? document.getElementById("rememberMeCheckbox").checked
+        : false;
+      const formData = {
+        username: document.getElementById("loginUsername").value.trim(),
+        password: document.getElementById("loginPassword").value.trim(),
+        remember_me: rememberMe
+      };
+      submitLogin(formData);
+    });
+  }
+  document.getElementById("logoutBtn").addEventListener("click", function () {
+    fetch("logout.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "X-CSRF-Token": window.csrfToken }
+    }).then(() => window.location.reload(true)).catch(() => { });
+  });
+  document.getElementById("addUserBtn").addEventListener("click", function () {
+    resetUserForm();
+    toggleVisibility("addUserModal", true);
+    document.getElementById("newUsername").focus();
+  });
+  document.getElementById("saveUserBtn").addEventListener("click", function () {
+    const newUsername = document.getElementById("newUsername").value.trim();
+    const newPassword = document.getElementById("addUserPassword").value.trim();
+    const isAdmin = document.getElementById("isAdmin").checked;
+    if (!newUsername || !newPassword) {
+      showToast("Username and password are required!");
+      return;
+    }
+    let url = "addUser.php";
+    if (window.setupMode) url += "?setup=1";
+    fetch(url, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast("User added successfully!");
+          closeAddUserModal();
+          checkAuthentication(false);
+        } else {
+          showToast("Error: " + (data.error || "Could not add user"));
+        }
+      })
+      .catch(() => { });
+  });
+  document.getElementById("cancelUserBtn").addEventListener("click", closeAddUserModal);
+
+  document.getElementById("removeUserBtn").addEventListener("click", function () {
+    loadUserList();
+    toggleVisibility("removeUserModal", true);
+  });
+  document.getElementById("deleteUserBtn").addEventListener("click", async function () {
+    const selectElem = document.getElementById("removeUsernameSelect");
+    const usernameToRemove = selectElem.value;
+    if (!usernameToRemove) {
+      showToast("Please select a user to remove.");
+      return;
+    }
+    const confirmed = await showCustomConfirmModal("Are you sure you want to delete user " + usernameToRemove + "?");
+    if (!confirmed) return;
+    fetch("removeUser.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify({ username: usernameToRemove })
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast("User removed successfully!");
+          closeRemoveUserModal();
+          loadUserList();
+        } else {
+          showToast("Error: " + (data.error || "Could not remove user"));
+        }
+      })
+      .catch(() => { });
+  });
+  document.getElementById("cancelRemoveUserBtn").addEventListener("click", closeRemoveUserModal);
+  document.getElementById("changePasswordBtn").addEventListener("click", function () {
+    document.getElementById("changePasswordModal").style.display = "block";
+    document.getElementById("oldPassword").focus();
+  });
+  document.getElementById("closeChangePasswordModal").addEventListener("click", function () {
+    document.getElementById("changePasswordModal").style.display = "none";
+  });
+  document.getElementById("saveNewPasswordBtn").addEventListener("click", function () {
+    const oldPassword = document.getElementById("oldPassword").value.trim();
+    const newPassword = document.getElementById("newPassword").value.trim();
+    const confirmPassword = document.getElementById("confirmPassword").value.trim();
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      showToast("Please fill in all fields.");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      showToast("New passwords do not match.");
+      return;
+    }
+    const data = { oldPassword, newPassword, confirmPassword };
+    fetch("changePassword.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify(data)
+    })
+      .then(response => response.json())
+      .then(result => {
+        if (result.success) {
+          showToast(result.success);
+          document.getElementById("oldPassword").value = "";
+          document.getElementById("newPassword").value = "";
+          document.getElementById("confirmPassword").value = "";
+          document.getElementById("changePasswordModal").style.display = "none";
+        } else {
+          showToast("Error: " + (result.error || "Could not change password."));
+        }
+      })
+      .catch(() => { showToast("Error changing password."); });
+  });
 }
 
+document.addEventListener("DOMContentLoaded", function () {
+  updateItemsPerPageSelect();
+  updateLoginOptionsUI({
+    disableFormLogin: localStorage.getItem("disableFormLogin") === "true",
+    disableBasicAuth: localStorage.getItem("disableBasicAuth") === "true",
+    disableOIDCLogin: localStorage.getItem("disableOIDCLogin") === "true"
+  });
+  const oidcLoginBtn = document.getElementById("oidcLoginBtn");
+  if (oidcLoginBtn) {
+    oidcLoginBtn.addEventListener("click", () => {
+      // Redirect to the OIDC auth endpoint. The endpoint can be adjusted if needed.
+      window.location.href = "auth.php?oidc=initiate";
+    });
+  }
+});
+
 export { initAuth, checkAuthentication };

auth.php

@@ -1,55 +1,234 @@
 <?php
-require 'config.php';
+require_once 'vendor/autoload.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
+/**
+ * Helper: Get the user's role from users.txt.
+ */
+function getUserRole($username) {
+    $usersFile = USERS_DIR . USERS_FILE;
+    if (file_exists($usersFile)) {
+        $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+        foreach ($lines as $line) {
+            $parts = explode(":", trim($line));
+            if (count($parts) >= 3 && $parts[0] === $username) {
+                return trim($parts[2]);
+            }
+        }
+    }
+    return null;
+}
+
+/* --- OIDC Authentication Flow --- */
+if (isset($_GET['oidc'])) {
+    // Read and decrypt OIDC configuration from JSON file.
+    $adminConfigFile = USERS_DIR . 'adminConfig.json';
+    if (file_exists($adminConfigFile)) {
+        $encryptedContent = file_get_contents($adminConfigFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        if ($decryptedContent === false) {
+            // Log internal error and return a generic message.
+            error_log("Failed to decrypt admin configuration.");
+            echo json_encode(['error' => 'Internal error.']);
+            exit;
+        }
+        $adminConfig = json_decode($decryptedContent, true);
+        if (isset($adminConfig['oidc'])) {
+            $oidcConfig = $adminConfig['oidc'];
+            $oidc_provider_url = !empty($oidcConfig['providerUrl']) ? $oidcConfig['providerUrl'] : 'https://your-oidc-provider.com';
+            $oidc_client_id    = !empty($oidcConfig['clientId']) ? $oidcConfig['clientId'] : 'YOUR_CLIENT_ID';
+            $oidc_client_secret = !empty($oidcConfig['clientSecret']) ? $oidcConfig['clientSecret'] : 'YOUR_CLIENT_SECRET';
+            $oidc_redirect_uri  = !empty($oidcConfig['redirectUri']) ? $oidcConfig['redirectUri'] : 'https://yourdomain.com/auth.php?oidc=callback';
+        } else {
+            $oidc_provider_url = 'https://your-oidc-provider.com';
+            $oidc_client_id    = 'YOUR_CLIENT_ID';
+            $oidc_client_secret = 'YOUR_CLIENT_SECRET';
+            $oidc_redirect_uri  = 'https://yourdomain.com/auth.php?oidc=callback';
+        }
+    } else {
+        $oidc_provider_url = 'https://your-oidc-provider.com';
+        $oidc_client_id    = 'YOUR_CLIENT_ID';
+        $oidc_client_secret = 'YOUR_CLIENT_SECRET';
+        $oidc_redirect_uri  = 'https://yourdomain.com/auth.php?oidc=callback';
+    }
+
+    $oidc = new Jumbojett\OpenIDConnectClient(
+        $oidc_provider_url,
+        $oidc_client_id,
+        $oidc_client_secret
+    );
+    $oidc->setRedirectURL($oidc_redirect_uri);
+
+    if ($_GET['oidc'] === 'callback') {
+        try {
+            $oidc->authenticate();
+            $username = $oidc->requestUserInfo('preferred_username');
+            session_regenerate_id(true);
+            $_SESSION["authenticated"] = true;
+            $_SESSION["username"] = $username;
+            // Determine the user role from users.txt.
+            $userRole = getUserRole($username);
+            $_SESSION["isAdmin"] = ($userRole === "1");
+            // *** Use loadUserPermissions() here instead of loadFolderPermission() ***
+            $_SESSION["folderOnly"] = loadUserPermissions($username);
+            header("Location: index.html");
+            exit();
+        } catch (Exception $e) {
+            error_log("OIDC authentication error: " . $e->getMessage());
+            echo json_encode(["error" => "Authentication failed."]);
+            exit();
+        }
+    } else {
+        try {
+            $oidc->authenticate();
+            exit();
+        } catch (Exception $e) {
+            error_log("OIDC initiation error: " . $e->getMessage());
+            echo json_encode(["error" => "Authentication initiation failed."]);
+            exit();
+        }
+    }
+}
+
+/* --- Fallback: Form-based Authentication --- */
+// (Form-based branch code remains unchanged. It calls loadUserPermissions() in its basic auth branch.)
 $usersFile = USERS_DIR . USERS_FILE;
+$maxAttempts = 5;
+$lockoutTime = 30 * 60;
+$attemptsFile = USERS_DIR . 'failed_logins.json';
+$failedLogFile = USERS_DIR . 'failed_login.log';
+$persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
 
-// Function to authenticate user
-function authenticate($username, $password)
-{
-    global $usersFile;
+function loadFailedAttempts($file) {
+    if (file_exists($file)) {
+        $data = json_decode(file_get_contents($file), true);
+        if (is_array($data)) {
+            return $data;
+        }
+    }
+    return [];
+}
 
+function saveFailedAttempts($file, $data) {
+    file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT));
+}
+
+$ip = $_SERVER['REMOTE_ADDR'];
+$currentTime = time();
+$failedAttempts = loadFailedAttempts($attemptsFile);
+
+if (isset($failedAttempts[$ip])) {
+    $attemptData = $failedAttempts[$ip];
+    if ($attemptData['count'] >= $maxAttempts && ($currentTime - $attemptData['last_attempt']) < $lockoutTime) {
+        echo json_encode(["error" => "Too many failed login attempts. Please try again later."]);
+        exit();
+    }
+}
+
+function authenticate($username, $password) {
+    global $usersFile, $encryptionKey;
     if (!file_exists($usersFile)) {
         return false;
     }
-
     $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
     foreach ($lines as $line) {
-        list($storedUser, $storedPass, $storedRole) = explode(':', trim($line), 3);
-        if ($username === $storedUser && password_verify($password, $storedPass)) {
-            return $storedRole; // Return the user's role
+        $parts = explode(':', trim($line));
+        if (count($parts) < 3) continue;
+        if ($username === $parts[0] && password_verify($password, $parts[1])) {
+            $result = ['role' => $parts[2]];
+            if (isset($parts[3]) && !empty($parts[3])) {
+                $result['totp_secret'] = decryptData($parts[3], $encryptionKey);
+            } else {
+                $result['totp_secret'] = null;
+            }
+            return $result;
         }
     }
     return false;
 }
 
-// Get JSON input
 $data = json_decode(file_get_contents("php://input"), true);
 $username = trim($data["username"] ?? "");
 $password = trim($data["password"] ?? "");
+$rememberMe = isset($data["remember_me"]) && $data["remember_me"] === true;
 
-// Validate input: ensure both fields are provided.
 if (!$username || !$password) {
     echo json_encode(["error" => "Username and password are required"]);
-    exit;
+    exit();
 }
 
-// Validate username format: allow only letters, numbers, underscores, dashes, and spaces.
 if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
     echo json_encode(["error" => "Invalid username format. Only letters, numbers, underscores, dashes, and spaces are allowed."]);
-    exit;
+    exit();
 }
 
-// Authenticate user
-$userRole = authenticate($username, $password);
-if ($userRole !== false) {
-    // Regenerate session ID to mitigate session fixation attacks
+$user = authenticate($username, $password);
+if ($user !== false) {
+    if (!empty($user['totp_secret'])) {
+        if (empty($data['totp_code'])) {
+            echo json_encode([
+              "totp_required" => true,
+              "message" => "TOTP code required"
+            ]);
+            exit();
+        } else {
+            $tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
+            $providedCode = trim($data['totp_code']);
+            if (!$tfa->verifyCode($user['totp_secret'], $providedCode)) {
+                echo json_encode(["error" => "Invalid TOTP code"]);
+                exit();
+            }
+        }
+    }
+    if (isset($failedAttempts[$ip])) {
+        unset($failedAttempts[$ip]);
+        saveFailedAttempts($attemptsFile, $failedAttempts);
+    }
     session_regenerate_id(true);
     $_SESSION["authenticated"] = true;
     $_SESSION["username"] = $username;
-    $_SESSION["isAdmin"] = ($userRole === "1"); // "1" indicates admin
-
-    echo json_encode(["success" => "Login successful", "isAdmin" => $_SESSION["isAdmin"]]);
+    $_SESSION["isAdmin"] = ($user['role'] === "1");
+    $_SESSION["folderOnly"] = loadUserPermissions($username);
+    
+    if ($rememberMe) {
+        $token = bin2hex(random_bytes(32));
+        $expiry = time() + (30 * 24 * 60 * 60);
+        $persistentTokens = [];
+        if (file_exists($persistentTokensFile)) {
+            $encryptedContent = file_get_contents($persistentTokensFile);
+            $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+            $persistentTokens = json_decode($decryptedContent, true);
+            if (!is_array($persistentTokens)) {
+                $persistentTokens = [];
+            }
+        }
+        $persistentTokens[$token] = [
+            "username" => $username,
+            "expiry"   => $expiry,
+            "isAdmin"  => ($_SESSION["isAdmin"] === true)
+        ];
+        $encryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);
+        file_put_contents($persistentTokensFile, $encryptedContent, LOCK_EX);
+        setcookie('remember_me_token', $token, $expiry, '/', '', $secure, true);
+    }
+    
+    echo json_encode([
+      "success"   => "Login successful", 
+      "isAdmin"   => $_SESSION["isAdmin"],
+      "folderOnly"=> $_SESSION["folderOnly"],
+      "username"  => $_SESSION["username"]
+    ]);
 } else {
+    if (isset($failedAttempts[$ip])) {
+        $failedAttempts[$ip]['count']++;
+        $failedAttempts[$ip]['last_attempt'] = $currentTime;
+    } else {
+        $failedAttempts[$ip] = ['count' => 1, 'last_attempt' => $currentTime];
+    }
+    saveFailedAttempts($attemptsFile, $failedAttempts);
+    $logLine = date('Y-m-d H:i:s') . " - Failed login attempt for username: " . $username . " from IP: " . $ip . PHP_EOL;
+    file_put_contents($failedLogFile, $logLine, FILE_APPEND);
     echo json_encode(["error" => "Invalid credentials"]);
 }
+?>

authModals.js

@@ -0,0 +1,655 @@
+import { showToast, toggleVisibility } from './domUtils.js';
+import { sendRequest } from './networkUtils.js';
+
+const version = "v1.0.7";
+const adminTitle = `Admin Panel <small style="font-size: 12px; color: gray;">${version}</small>`;
+let lastLoginData = null;
+
+export function setLastLoginData(data) {
+    lastLoginData = data;
+}
+
+export function openTOTPLoginModal() {
+    let totpLoginModal = document.getElementById("totpLoginModal");
+    const isDarkMode = document.body.classList.contains("dark-mode");
+    const modalBg = isDarkMode ? "#2c2c2c" : "#fff";
+    const textColor = isDarkMode ? "#e0e0e0" : "#000";
+
+    if (!totpLoginModal) {
+        totpLoginModal = document.createElement("div");
+        totpLoginModal.id = "totpLoginModal";
+        totpLoginModal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0,0,0,0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3200;
+    `;
+        totpLoginModal.innerHTML = `
+      <div style="background: ${modalBg}; padding: 20px; border-radius: 8px; text-align: center; position: relative; color: ${textColor};">
+        <span id="closeTOTPLoginModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+        <h3>Enter TOTP Code</h3>
+        <input type="text" id="totpLoginInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
+      </div>
+    `;
+        document.body.appendChild(totpLoginModal);
+        document.getElementById("closeTOTPLoginModal").addEventListener("click", () => {
+            totpLoginModal.style.display = "none";
+        });
+        const totpInput = document.getElementById("totpLoginInput");
+        totpInput.focus();
+        totpInput.addEventListener("input", function () {
+            if (this.value.trim().length === 6 && lastLoginData) {
+                lastLoginData.totp_code = this.value.trim();
+                totpLoginModal.style.display = "none";
+                if (typeof window.submitLogin === "function") {
+                    window.submitLogin(lastLoginData);
+                }
+            }
+        });
+    } else {
+        totpLoginModal.style.display = "flex";
+        const modalContent = totpLoginModal.firstElementChild;
+        modalContent.style.background = modalBg;
+        modalContent.style.color = textColor;
+    }
+}
+
+export function openUserPanel() {
+  const username = localStorage.getItem("username") || "User";
+  let userPanelModal = document.getElementById("userPanelModal");
+  const isDarkMode = document.body.classList.contains("dark-mode");
+  const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+  const modalContentStyles = `
+    background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+    color: ${isDarkMode ? "#e0e0e0" : "#000"};
+    padding: 20px;
+    max-width: 600px;
+    width: 90%;
+    border-radius: 8px;
+    position: relative;
+    overflow-y: auto;
+    max-height: 90vh;
+    border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
+    transform: none;
+    transition: none;
+  `;
+  if (!userPanelModal) {
+      userPanelModal = document.createElement("div");
+      userPanelModal.id = "userPanelModal";
+      userPanelModal.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: ${overlayBackground};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 3000;
+      `;
+      userPanelModal.innerHTML = `
+        <div class="modal-content" style="${modalContentStyles}">
+          <span id="closeUserPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+          <h3>User Panel (${username})</h3>
+          <button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">Change Password</button>
+          <fieldset style="margin-bottom: 15px;">
+            <legend>TOTP Settings</legend>
+            <div class="form-group">
+              <label for="userTOTPEnabled">Enable TOTP:</label>
+              <input type="checkbox" id="userTOTPEnabled" style="vertical-align: middle;" />
+            </div>
+          </fieldset>
+        </div>
+      `;
+      document.body.appendChild(userPanelModal);
+      document.getElementById("closeUserPanel").addEventListener("click", () => {
+          userPanelModal.style.display = "none";
+      });
+      document.getElementById("openChangePasswordModalBtn").addEventListener("click", () => {
+          document.getElementById("changePasswordModal").style.display = "block";
+      });
+      const totpCheckbox = document.getElementById("userTOTPEnabled");
+      totpCheckbox.checked = localStorage.getItem("userTOTPEnabled") === "true";
+      totpCheckbox.addEventListener("change", function () {
+          localStorage.setItem("userTOTPEnabled", this.checked ? "true" : "false");
+          const enabled = this.checked;
+          fetch("updateUserPanel.php", {
+              method: "POST",
+              credentials: "include",
+              headers: {
+                  "Content-Type": "application/json",
+                  "X-CSRF-Token": window.csrfToken
+              },
+              body: JSON.stringify({ totp_enabled: enabled })
+          })
+              .then(r => r.json())
+              .then(result => {
+                  if (!result.success) {
+                      showToast("Error updating TOTP setting: " + result.error);
+                  } else if (enabled) {
+                      openTOTPModal();
+                  }
+              })
+              .catch(() => { showToast("Error updating TOTP setting."); });
+      });
+  } else {
+      userPanelModal.style.backgroundColor = overlayBackground;
+      const modalContent = userPanelModal.querySelector(".modal-content");
+      modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
+      modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+      modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
+  }
+  userPanelModal.style.display = "flex";
+}
+
+export function openTOTPModal() {
+    let totpModal = document.getElementById("totpModal");
+    const isDarkMode = document.body.classList.contains("dark-mode");
+    const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+    const modalContentStyles = `
+    background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+    color: ${isDarkMode ? "#e0e0e0" : "#000"};
+    padding: 20px;
+    max-width: 400px;
+    width: 90%;
+    border-radius: 8px;
+    position: relative;
+  `;
+  if (!totpModal) {
+    totpModal = document.createElement("div");
+    totpModal.id = "totpModal";
+    totpModal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: ${overlayBackground};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3100;
+    `;
+    totpModal.innerHTML = `
+      <div class="modal-content" style="${modalContentStyles}">
+        <span id="closeTOTPModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+        <h3>TOTP Setup</h3>
+        <p>Scan this QR code with your authenticator app:</p>
+        <img src="totp_setup.php?csrf=${encodeURIComponent(window.csrfToken)}" alt="TOTP QR Code" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
+        <br/>
+        <p>Enter the 6-digit code from your app to confirm setup:</p>
+        <input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
+        <br/><br/>
+        <button type="button" id="confirmTOTPBtn" class="btn btn-primary">Confirm</button>
+      </div>
+    `;
+    document.body.appendChild(totpModal);
+    // Bind the X button to call closeTOTPModal with disable=true
+    document.getElementById("closeTOTPModal").addEventListener("click", () => {
+      closeTOTPModal(true);
+    });
+  
+    // Add event listener for TOTP confirmation
+    document.getElementById("confirmTOTPBtn").addEventListener("click", function () {
+      const code = document.getElementById("totpConfirmInput").value.trim();
+      if (code.length !== 6) {
+        showToast("Please enter a valid 6-digit code.");
+        return;
+      }
+      // Call the endpoint to verify the TOTP code
+      fetch("totp_verify.php", {
+        method: "POST",
+        credentials: "include",
+        headers: { 
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({ totp_code: code })
+      })
+        .then(r => r.json())
+        .then(result => {
+          if (result.success) {
+            showToast("TOTP successfully enabled.");
+            // On success, close the modal without disabling
+            closeTOTPModal(false);
+          } else {
+            showToast("TOTP verification failed: " + (result.error || "Invalid code."));
+          }
+        })
+        .catch(() => { showToast("Error verifying TOTP code."); });
+    });
+  } else {
+    totpModal.style.display = "flex";
+    totpModal.style.backgroundColor = overlayBackground;
+    const modalContent = totpModal.querySelector(".modal-content");
+    modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
+    modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+  }
+}
+
+// Updated closeTOTPModal function with a disable parameter
+export function closeTOTPModal(disable = true) {
+    const totpModal = document.getElementById("totpModal");
+    if (totpModal) totpModal.style.display = "none";
+    
+    if (disable) {
+      // Uncheck the Enable TOTP checkbox
+      const totpCheckbox = document.getElementById("userTOTPEnabled");
+      if (totpCheckbox) {
+        totpCheckbox.checked = false;
+        localStorage.setItem("userTOTPEnabled", "false");
+      }
+      // Call endpoint to remove the TOTP secret from the user's record
+      fetch("totp_disable.php", {
+        method: "POST",
+        credentials: "include",
+        headers: { 
+          "Content-Type": "application/json", 
+          "X-CSRF-Token": window.csrfToken 
+        }
+      })
+        .then(r => r.json())
+        .then(result => {
+          if (!result.success) {
+            showToast("Error disabling TOTP setting: " + result.error);
+          }
+        })
+        .catch(() => { showToast("Error disabling TOTP setting."); });
+    }
+  }
+
+export function openAdminPanel() {
+    fetch("getConfig.php", { credentials: "include" })
+        .then(response => response.json())
+        .then(config => {
+            if (config.oidc) Object.assign(window.currentOIDCConfig, config.oidc);
+            if (config.globalOtpauthUrl) window.currentOIDCConfig.globalOtpauthUrl = config.globalOtpauthUrl;
+            const isDarkMode = document.body.classList.contains("dark-mode");
+            const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+            const modalContentStyles = `
+          background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+          color: ${isDarkMode ? "#e0e0e0" : "#000"};
+          padding: 20px;
+          max-width: 600px;
+          width: 90%;
+          border-radius: 8px;
+          position: relative;
+          overflow-y: auto;
+          max-height: 90vh;
+          border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
+        `;
+            let adminModal = document.getElementById("adminPanelModal");
+
+            if (!adminModal) {
+                adminModal = document.createElement("div");
+                adminModal.id = "adminPanelModal";
+                adminModal.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: ${overlayBackground};
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 3000;
+          `;
+                // Added a version number next to "Admin Panel"
+                adminModal.innerHTML = `
+          <div class="modal-content" style="${modalContentStyles}">
+            <span id="closeAdminPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+            <h3>
+              <h3>${adminTitle}</h3>
+            </h3>
+            <form id="adminPanelForm">
+              <fieldset style="margin-bottom: 15px;">
+                <legend>User Management</legend>
+                <div style="display: flex; gap: 10px;">
+                  <button type="button" id="adminOpenAddUser" class="btn btn-success">Add User</button>
+                  <button type="button" id="adminOpenRemoveUser" class="btn btn-danger">Remove User</button>
+                  <button type="button" id="adminOpenUserPermissions" class="btn btn-secondary">User Permissions</button>
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>OIDC Configuration</legend>
+                <div class="form-group">
+                  <label for="oidcProviderUrl">OIDC Provider URL:</label>
+                  <input type="text" id="oidcProviderUrl" class="form-control" value="${window.currentOIDCConfig.providerUrl}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcClientId">OIDC Client ID:</label>
+                  <input type="text" id="oidcClientId" class="form-control" value="${window.currentOIDCConfig.clientId}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcClientSecret">OIDC Client Secret:</label>
+                  <input type="text" id="oidcClientSecret" class="form-control" value="${window.currentOIDCConfig.clientSecret}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcRedirectUri">OIDC Redirect URI:</label>
+                  <input type="text" id="oidcRedirectUri" class="form-control" value="${window.currentOIDCConfig.redirectUri}" />
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>Global TOTP Settings</legend>
+                <div class="form-group">
+                  <label for="globalOtpauthUrl">Global OTPAuth URL:</label>
+                  <input type="text" id="globalOtpauthUrl" class="form-control" value="${window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/{label}?secret={secret}&issuer=FileRise'}" />
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>Login Options</legend>
+                <div class="form-group">
+                  <input type="checkbox" id="disableFormLogin" />
+                  <label for="disableFormLogin">Disable Login Form</label>
+                </div>
+                <div class="form-group">
+                  <input type="checkbox" id="disableBasicAuth" />
+                  <label for="disableBasicAuth">Disable Basic HTTP Auth</label>
+                </div>
+                <div class="form-group">
+                  <input type="checkbox" id="disableOIDCLogin" />
+                  <label for="disableOIDCLogin">Disable OIDC Login</label>
+                </div>
+              </fieldset>
+              <div style="display: flex; justify-content: space-between;">
+                <button type="button" id="cancelAdminSettings" class="btn btn-secondary">Cancel</button>
+                <button type="button" id="saveAdminSettings" class="btn btn-primary">Save Settings</button>
+              </div>
+            </form>
+          </div>
+        `;
+                document.body.appendChild(adminModal);
+
+                document.getElementById("closeAdminPanel").addEventListener("click", closeAdminPanel);
+                adminModal.addEventListener("click", (e) => {
+                    if (e.target === adminModal) closeAdminPanel();
+                });
+                document.getElementById("cancelAdminSettings").addEventListener("click", closeAdminPanel);
+                document.getElementById("adminOpenAddUser").addEventListener("click", () => {
+                    toggleVisibility("addUserModal", true);
+                    document.getElementById("newUsername").focus();
+                });
+                document.getElementById("adminOpenRemoveUser").addEventListener("click", () => {
+                    if (typeof window.loadUserList === "function") {
+                        window.loadUserList();
+                    }
+                    toggleVisibility("removeUserModal", true);
+                });
+                // New event binding for the User Permissions button:
+                document.getElementById("adminOpenUserPermissions").addEventListener("click", () => {
+                    openUserPermissionsModal();
+                });
+                document.getElementById("saveAdminSettings").addEventListener("click", () => {
+                    const disableFormLoginCheckbox = document.getElementById("disableFormLogin");
+                    const disableBasicAuthCheckbox = document.getElementById("disableBasicAuth");
+                    const disableOIDCLoginCheckbox = document.getElementById("disableOIDCLogin");
+                    const totalDisabled = [disableFormLoginCheckbox, disableBasicAuthCheckbox, disableOIDCLoginCheckbox].filter(cb => cb.checked).length;
+                    if (totalDisabled === 3) {
+                        showToast("At least one login method must remain enabled.");
+                        disableOIDCLoginCheckbox.checked = false;
+                        localStorage.setItem("disableOIDCLogin", "false");
+                        if (typeof window.updateLoginOptionsUI === "function") {
+                            window.updateLoginOptionsUI({
+                                disableFormLogin: disableFormLoginCheckbox.checked,
+                                disableBasicAuth: disableBasicAuthCheckbox.checked,
+                                disableOIDCLogin: disableOIDCLoginCheckbox.checked
+                            });
+                        }
+                        return;
+                    }
+                    const newOIDCConfig = {
+                        providerUrl: document.getElementById("oidcProviderUrl").value.trim(),
+                        clientId: document.getElementById("oidcClientId").value.trim(),
+                        clientSecret: document.getElementById("oidcClientSecret").value.trim(),
+                        redirectUri: document.getElementById("oidcRedirectUri").value.trim()
+                    };
+                    const disableFormLogin = disableFormLoginCheckbox.checked;
+                    const disableBasicAuth = disableBasicAuthCheckbox.checked;
+                    const disableOIDCLogin = disableOIDCLoginCheckbox.checked;
+                    const globalOtpauthUrl = document.getElementById("globalOtpauthUrl").value.trim();
+                    sendRequest("updateConfig.php", "POST", {
+                        oidc: newOIDCConfig,
+                        disableFormLogin,
+                        disableBasicAuth,
+                        disableOIDCLogin,
+                        globalOtpauthUrl
+                    }, { "X-CSRF-Token": window.csrfToken })
+                        .then(response => {
+                            if (response.success) {
+                                showToast("Settings updated successfully.");
+                                localStorage.setItem("disableFormLogin", disableFormLogin);
+                                localStorage.setItem("disableBasicAuth", disableBasicAuth);
+                                localStorage.setItem("disableOIDCLogin", disableOIDCLogin);
+                                if (typeof window.updateLoginOptionsUI === "function") {
+                                    window.updateLoginOptionsUI({ disableFormLogin, disableBasicAuth, disableOIDCLogin });
+                                }
+                                closeAdminPanel();
+                            } else {
+                                showToast("Error updating settings: " + (response.error || "Unknown error"));
+                            }
+                        })
+                        .catch(() => { });
+                });
+                const disableFormLoginCheckbox = document.getElementById("disableFormLogin");
+                const disableBasicAuthCheckbox = document.getElementById("disableBasicAuth");
+                const disableOIDCLoginCheckbox = document.getElementById("disableOIDCLogin");
+                function enforceLoginOptionConstraint(changedCheckbox) {
+                    const totalDisabled = [disableFormLoginCheckbox, disableBasicAuthCheckbox, disableOIDCLoginCheckbox].filter(cb => cb.checked).length;
+                    if (changedCheckbox.checked && totalDisabled === 3) {
+                        showToast("At least one login method must remain enabled.");
+                        changedCheckbox.checked = false;
+                    }
+                }
+                disableFormLoginCheckbox.addEventListener("change", function () { enforceLoginOptionConstraint(this); });
+                disableBasicAuthCheckbox.addEventListener("change", function () { enforceLoginOptionConstraint(this); });
+                disableOIDCLoginCheckbox.addEventListener("change", function () { enforceLoginOptionConstraint(this); });
+
+                document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
+                document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
+                document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
+            } else {
+                adminModal.style.backgroundColor = overlayBackground;
+                const modalContent = adminModal.querySelector(".modal-content");
+                if (modalContent) {
+                    modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
+                    modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+                    modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
+                }
+                document.getElementById("oidcProviderUrl").value = window.currentOIDCConfig.providerUrl;
+                document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
+                document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
+                document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
+                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/FileRise?issuer=FileRise';
+                document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
+                document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
+                document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
+                adminModal.style.display = "flex";
+            }
+        })
+        .catch(() => {
+            let adminModal = document.getElementById("adminPanelModal");
+            if (adminModal) {
+                adminModal.style.backgroundColor = "rgba(0,0,0,0.5)";
+                const modalContent = adminModal.querySelector(".modal-content");
+                if (modalContent) {
+                    modalContent.style.background = "#fff";
+                    modalContent.style.color = "#000";
+                    modalContent.style.border = "1px solid #ccc";
+                }
+                document.getElementById("oidcProviderUrl").value = window.currentOIDCConfig.providerUrl;
+                document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
+                document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
+                document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
+                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/FileRise?issuer=FileRise';
+                document.getElementById("disableFormLogin").checked = localStorage.getItem("disableFormLogin") === "true";
+                document.getElementById("disableBasicAuth").checked = localStorage.getItem("disableBasicAuth") === "true";
+                document.getElementById("disableOIDCLogin").checked = localStorage.getItem("disableOIDCLogin") === "true";
+                adminModal.style.display = "flex";
+            } else {
+                openAdminPanel();
+            }
+        });
+}
+
+export function closeAdminPanel() {
+    const adminModal = document.getElementById("adminPanelModal");
+    if (adminModal) adminModal.style.display = "none";
+}
+
+// --- New: User Permissions Modal ---
+
+export function openUserPermissionsModal() {
+    let userPermissionsModal = document.getElementById("userPermissionsModal");
+    const isDarkMode = document.body.classList.contains("dark-mode");
+    const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+    const modalContentStyles = `
+      background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+      color: ${isDarkMode ? "#e0e0e0" : "#000"};
+      padding: 20px;
+      max-width: 500px;
+      width: 90%;
+      border-radius: 8px;
+      position: relative;
+    `;
+
+    if (!userPermissionsModal) {
+        userPermissionsModal = document.createElement("div");
+        userPermissionsModal.id = "userPermissionsModal";
+        userPermissionsModal.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: ${overlayBackground};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 3500;
+      `;
+        userPermissionsModal.innerHTML = `
+        <div class="modal-content" style="${modalContentStyles}">
+          <span id="closeUserPermissionsModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+          <h3>User Permissions</h3>
+          <div id="userPermissionsList" style="max-height: 300px; overflow-y: auto; margin-bottom: 15px;">
+            <!-- User rows will be loaded here -->
+          </div>
+          <div style="display: flex; justify-content: flex-end; gap: 10px;">
+            <button type="button" id="cancelUserPermissionsBtn" class="btn btn-secondary">Cancel</button>
+            <button type="button" id="saveUserPermissionsBtn" class="btn btn-primary">Save Permissions</button>
+          </div>
+        </div>
+      `;
+        document.body.appendChild(userPermissionsModal);
+        document.getElementById("closeUserPermissionsModal").addEventListener("click", () => {
+            userPermissionsModal.style.display = "none";
+        });
+        document.getElementById("cancelUserPermissionsBtn").addEventListener("click", () => {
+            userPermissionsModal.style.display = "none";
+        });
+        document.getElementById("saveUserPermissionsBtn").addEventListener("click", () => {
+            // Collect permissions data from each user row.
+            const rows = userPermissionsModal.querySelectorAll(".user-permission-row");
+            const permissionsData = [];
+            rows.forEach(row => {
+                const username = row.getAttribute("data-username");
+                const folderOnlyCheckbox = row.querySelector("input[data-permission='folderOnly']");
+                const readOnlyCheckbox = row.querySelector("input[data-permission='readOnly']");
+                const disableUploadCheckbox = row.querySelector("input[data-permission='disableUpload']");
+                permissionsData.push({
+                    username,
+                    folderOnly: folderOnlyCheckbox.checked,
+                    readOnly: readOnlyCheckbox.checked,
+                    disableUpload: disableUploadCheckbox.checked
+                });
+            });
+            // Send the permissionsData to the server.
+            sendRequest("updateUserPermissions.php", "POST", { permissions: permissionsData }, { "X-CSRF-Token": window.csrfToken })
+                .then(response => {
+                    if (response.success) {
+                        showToast("User permissions updated successfully.");
+                        userPermissionsModal.style.display = "none";
+                    } else {
+                        showToast("Error updating permissions: " + (response.error || "Unknown error"));
+                    }
+                })
+                .catch(() => {
+                    showToast("Error updating permissions.");
+                });
+        });
+    } else {
+        userPermissionsModal.style.display = "flex";
+    }
+    // Load the list of users into the modal.
+    loadUserPermissionsList();
+}
+
+function loadUserPermissionsList() {
+    const listContainer = document.getElementById("userPermissionsList");
+    if (!listContainer) return;
+    listContainer.innerHTML = "";
+
+    // First, fetch the current permissions from the server.
+    fetch("getUserPermissions.php", { credentials: "include" })
+        .then(response => response.json())
+        .then(permissionsData => {
+            // Then, fetch the list of users.
+            return fetch("getUsers.php", { credentials: "include" })
+                .then(response => response.json())
+                .then(usersData => {
+                    const users = Array.isArray(usersData) ? usersData : (usersData.users || []);
+                    if (users.length === 0) {
+                        listContainer.innerHTML = "<p>No users found.</p>";
+                        return;
+                    }
+                    users.forEach(user => {
+                        // Skip admin users.
+                        if ((user.role && user.role === "1") || user.username.toLowerCase() === "admin") return;
+
+                        // Use stored permissions if available; otherwise fall back to localStorage defaults.
+                        const defaultPerm = {
+                            folderOnly: localStorage.getItem("folderOnly") === "true",
+                            readOnly: localStorage.getItem("readOnly") === "true",
+                            disableUpload: localStorage.getItem("disableUpload") === "true"
+                        };
+                        const userPerm = (permissionsData && typeof permissionsData === "object" && permissionsData[user.username]) || defaultPerm;
+
+                        // Create a row for the user.
+                        const row = document.createElement("div");
+                        row.classList.add("user-permission-row");
+                        row.setAttribute("data-username", user.username);
+                        row.style.padding = "10px 0";
+                        row.innerHTML = `
+                <div style="font-weight: bold; margin-bottom: 5px;">${user.username}</div>
+                <div style="display: flex; flex-direction: column; gap: 5px;">
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="folderOnly" ${userPerm.folderOnly ? "checked" : ""} />
+                    User Folder Only
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="readOnly" ${userPerm.readOnly ? "checked" : ""} />
+                    Read Only
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="disableUpload" ${userPerm.disableUpload ? "checked" : ""} />
+                    Disable Upload
+                  </label>
+                </div>
+                <hr style="margin-top: 10px; border: 0; border-bottom: 1px solid #ccc;">
+              `;
+                        listContainer.appendChild(row);
+                    });
+                });
+        })
+        .catch(() => {
+            listContainer.innerHTML = "<p>Error loading users.</p>";
+        });
+}

changePassword.php

@@ -0,0 +1,99 @@
+<?php
+// changePassword.php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+if (!$username) {
+    echo json_encode(["error" => "No username in session"]);
+    exit;
+}
+
+// CSRF token check.
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if ($receivedToken !== $_SESSION['csrf_token']) {
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    http_response_code(403);
+    exit;
+}
+
+// Get POST data.
+$data = json_decode(file_get_contents("php://input"), true);
+$oldPassword = trim($data["oldPassword"] ?? "");
+$newPassword = trim($data["newPassword"] ?? "");
+$confirmPassword = trim($data["confirmPassword"] ?? "");
+
+// Validate input.
+if (!$oldPassword || !$newPassword || !$confirmPassword) {
+    echo json_encode(["error" => "All fields are required."]);
+    exit;
+}
+if ($newPassword !== $confirmPassword) {
+    echo json_encode(["error" => "New passwords do not match."]);
+    exit;
+}
+
+// Path to users file.
+$usersFile = USERS_DIR . USERS_FILE;
+if (!file_exists($usersFile)) {
+    echo json_encode(["error" => "Users file not found"]);
+    exit;
+}
+
+// Read current users.
+$lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+$userFound = false;
+$newLines = [];
+
+foreach ($lines as $line) {
+    $parts = explode(':', trim($line));
+    // Expect at least 3 parts: username, hashed password, and role.
+    if (count($parts) < 3) {
+        // Skip invalid lines.
+        $newLines[] = $line;
+        continue;
+    }
+    $storedUser = $parts[0];
+    $storedHash = $parts[1];
+    $storedRole = $parts[2];
+    // Preserve TOTP secret if it exists.
+    $totpSecret = (count($parts) >= 4) ? $parts[3] : "";
+    
+    if ($storedUser === $username) {
+        $userFound = true;
+        // Verify the old password.
+        if (!password_verify($oldPassword, $storedHash)) {
+            echo json_encode(["error" => "Old password is incorrect."]);
+            exit;
+        }
+        // Hash the new password.
+        $newHashedPassword = password_hash($newPassword, PASSWORD_BCRYPT);
+        // Rebuild the line with the new hash and preserve TOTP secret if present.
+        if ($totpSecret !== "") {
+            $newLines[] = $username . ":" . $newHashedPassword . ":" . $storedRole . ":" . $totpSecret;
+        } else {
+            $newLines[] = $username . ":" . $newHashedPassword . ":" . $storedRole;
+        }
+    } else {
+        $newLines[] = $line;
+    }
+}
+
+if (!$userFound) {
+    echo json_encode(["error" => "User not found."]);
+    exit;
+}
+
+// Save updated users file.
+if (file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL)) {
+    echo json_encode(["success" => "Password updated successfully."]);
+} else {
+    echo json_encode(["error" => "Could not update password."]);
+}
+?>

checkAuth.php

@@ -1,22 +1,70 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
-// Check if users.txt is empty or doesn't exist
+// Check if users.txt is empty or doesn't exist.
 $usersFile = USERS_DIR . USERS_FILE;
 if (!file_exists($usersFile) || trim(file_get_contents($usersFile)) === '') {
-    // Return JSON indicating setup mode
+    // In production, you might log that the system is in setup mode.
+    error_log("checkAuth: users file not found or empty; entering setup mode.");
     echo json_encode(["setup" => true]);
     exit();
 }
 
+// Check session authentication.
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     echo json_encode(["authenticated" => false]);
-    exit;
+    exit();
 }
 
-echo json_encode([
+/**
+ * Helper function to get a user's role from users.txt.
+ * Returns the role as a string (e.g. "1") or null if not found.
+ */
+function getUserRole($username) {
+    global $usersFile;
+    if (file_exists($usersFile)) {
+        $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+        foreach ($lines as $line) {
+            $parts = explode(":", trim($line));
+            if (count($parts) >= 3 && $parts[0] === $username) {
+                return trim($parts[2]);
+            }
+        }
+    }
+    return null;
+}
+
+// Determine if TOTP is enabled by checking users.txt.
+$totp_enabled = false;
+$username = $_SESSION['username'] ?? '';
+if ($username) {
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        $parts = explode(":", trim($line));
+        // Assuming first field is username and fourth (if exists) is the TOTP secret.
+        if ($parts[0] === $username) {
+            if (isset($parts[3]) && trim($parts[3]) !== "") {
+                $totp_enabled = true;
+            }
+            break;
+        }
+    }
+}
+
+// Use getUserRole() to determine admin status.
+// We cast the role to an integer so that "1" (string) is treated as true.
+$userRole = getUserRole($username);
+$isAdmin = ((int)$userRole === 1);
+
+// Build and return the JSON response.
+$response = [
     "authenticated" => true,
-    "isAdmin" => isset($_SESSION["isAdmin"]) ? $_SESSION["isAdmin"] : false
-]);
+    "isAdmin"       => $isAdmin,
+    "totp_enabled"  => $totp_enabled,
+    "username"      => $username,
+    "folderOnly"    => isset($_SESSION["folderOnly"]) ? $_SESSION["folderOnly"] : false
+];
+
+echo json_encode($response);
 ?>

config.php

@@ -1,10 +1,86 @@
 <?php
 // config.php
 
-// Allow an environment variable to override HTTPS detection.
+// Define constants.
+define('UPLOAD_DIR', '/var/www/uploads/');
+define('USERS_DIR', '/var/www/users/');
+define('USERS_FILE', 'users.txt');
+define('META_DIR', '/var/www/metadata/');
+define('META_FILE', 'file_metadata.json');
+define('TRASH_DIR', UPLOAD_DIR . 'trash/');
+define('TIMEZONE', 'America/New_York');
+define('DATE_TIME_FORMAT', 'm/d/y  h:iA');
+define('TOTAL_UPLOAD_SIZE', '5G');
+
+date_default_timezone_set(TIMEZONE);
+
+/**
+ * Encrypts data using AES-256-CBC.
+ *
+ * @param string $data The plaintext.
+ * @param string $encryptionKey The encryption key.
+ * @return string Base64-encoded string containing IV and ciphertext.
+ */
+function encryptData($data, $encryptionKey)
+{
+    $cipher = 'AES-256-CBC';
+    $ivlen = openssl_cipher_iv_length($cipher);
+    $iv = openssl_random_pseudo_bytes($ivlen);
+    $ciphertext = openssl_encrypt($data, $cipher, $encryptionKey, OPENSSL_RAW_DATA, $iv);
+    return base64_encode($iv . $ciphertext);
+}
+
+/**
+ * Decrypts data encrypted with AES-256-CBC.
+ *
+ * @param string $encryptedData Base64-encoded data containing IV and ciphertext.
+ * @param string $encryptionKey The encryption key.
+ * @return string|false The decrypted plaintext or false on failure.
+ */
+function decryptData($encryptedData, $encryptionKey)
+{
+    $cipher = 'AES-256-CBC';
+    $data = base64_decode($encryptedData);
+    $ivlen = openssl_cipher_iv_length($cipher);
+    $iv = substr($data, 0, $ivlen);
+    $ciphertext = substr($data, $ivlen);
+    return openssl_decrypt($ciphertext, $cipher, $encryptionKey, OPENSSL_RAW_DATA, $iv);
+}
+
+// Load encryption key from environment (override in production).
+$encryptionKey = getenv('PERSISTENT_TOKENS_KEY') ?: 'default_please_change_this_key';
+if (!$encryptionKey) {
+    die('Encryption key for persistent tokens is not set.');
+}
+
+function loadUserPermissions($username)
+{
+    global $encryptionKey;
+    $permissionsFile = USERS_DIR . 'userPermissions.json';
+
+    if (file_exists($permissionsFile)) {
+        $content = file_get_contents($permissionsFile);
+
+        // Try to decrypt the content.
+        $decryptedContent = decryptData($content, $encryptionKey);
+        if ($decryptedContent !== false) {
+            $permissions = json_decode($decryptedContent, true);
+        } else {
+            $permissions = json_decode($content, true);
+        }
+
+        if (is_array($permissions) && array_key_exists($username, $permissions)) {
+            $result = $permissions[$username];
+            return !empty($result) ? $result : false;
+        }
+    }
+    // Removed error_log() to prevent flooding logs when file is not found.
+    return false; // Return false if no permissions found.
+}
+
+// Determine whether HTTPS is used.
 $envSecure = getenv('SECURE');
 if ($envSecure !== false) {
-    // Convert the environment variable value to a boolean.
     $secure = filter_var($envSecure, FILTER_VALIDATE_BOOLEAN);
 } else {
     $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
@@ -13,25 +89,52 @@ if ($envSecure !== false) {
 $cookieParams = [
     'lifetime' => 7200,
     'path'     => '/',
-    'domain'   => '', // Specify your domain if needed
+    'domain'   => '', // Set your domain as needed.
     'secure'   => $secure,
     'httponly' => true,
     'samesite' => 'Lax'
 ];
-session_set_cookie_params($cookieParams);
 
-ini_set('session.gc_maxlifetime', 7200);
-session_start();
+if (session_status() === PHP_SESSION_NONE) {
+    session_set_cookie_params($cookieParams);
+    ini_set('session.gc_maxlifetime', 7200);
+    session_start();
+}
 
 if (empty($_SESSION['csrf_token'])) {
     $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
 }
 
-// Define BASE_URL (this should point to where index.html is, e.g. your uploads directory)
+// Auto-login via persistent token.
+if (!isset($_SESSION["authenticated"]) && isset($_COOKIE['remember_me_token'])) {
+    $persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
+    $persistentTokens = [];
+    if (file_exists($persistentTokensFile)) {
+        $encryptedContent = file_get_contents($persistentTokensFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        $persistentTokens = json_decode($decryptedContent, true);
+        if (!is_array($persistentTokens)) {
+            $persistentTokens = [];
+        }
+    }
+    if (isset($persistentTokens[$_COOKIE['remember_me_token']])) {
+        $tokenData = $persistentTokens[$_COOKIE['remember_me_token']];
+        if ($tokenData['expiry'] >= time()) {
+            $_SESSION["authenticated"] = true;
+            $_SESSION["username"] = $tokenData["username"];
+            // IMPORTANT: Set the folderOnly flag here for auto-login.
+            $_SESSION["folderOnly"] = loadUserPermissions($tokenData["username"]);
+        } else {
+            unset($persistentTokens[$_COOKIE['remember_me_token']]);
+            $newEncryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);
+            file_put_contents($persistentTokensFile, $newEncryptedContent, LOCK_EX);
+            setcookie('remember_me_token', '', time() - 3600, '/', '', $secure, true);
+        }
+    }
+}
+
 define('BASE_URL', 'http://yourwebsite/uploads/');
 
-// If BASE_URL is still the default placeholder, use the server's HTTP_HOST.
-// Otherwise, use BASE_URL and append share.php.
 if (strpos(BASE_URL, 'yourwebsite') !== false) {
     $defaultShareUrl = isset($_SERVER['HTTP_HOST'])
         ? "http://" . $_SERVER['HTTP_HOST'] . "/share.php"
@@ -39,17 +142,4 @@ if (strpos(BASE_URL, 'yourwebsite') !== false) {
 } else {
     $defaultShareUrl = rtrim(BASE_URL, '/') . "/share.php";
 }
-
 define('SHARE_URL', getenv('SHARE_URL') ? getenv('SHARE_URL') : $defaultShareUrl);
-
-define('UPLOAD_DIR', '/var/www/uploads/');
-define('TIMEZONE', 'America/New_York');
-define('DATE_TIME_FORMAT', 'm/d/y  h:iA');
-define('TOTAL_UPLOAD_SIZE', '5G');
-define('USERS_DIR', '/var/www/users/');
-define('USERS_FILE', 'users.txt');
-define('META_DIR','/var/www/metadata/');
-define('META_FILE','file_metadata.json');
-define('TRASH_DIR', UPLOAD_DIR . 'trash/');
-date_default_timezone_set(TIMEZONE);
-?>

copyFiles.php

@@ -18,6 +18,16 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to copy files."]);
+        exit();
+    }
+}
+
 $data = json_decode(file_get_contents("php://input"), true);
 if (
     !$data || 

createFolder.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 // Ensure user is authenticated
@@ -24,6 +24,16 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to create folders."]);
+        exit();
+    }
+}
+
 // Get the JSON input and decode it
 $input = json_decode(file_get_contents('php://input'), true);
 if (!isset($input['folderName'])) {

createShareLink.php

@@ -20,10 +20,8 @@ if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
     exit;
 }
 
-// Optionally, you could check if the file exists in the uploads directory here.
-
 // Generate a secure token.
-$token = bin2hex(random_bytes(4)); // 8 hex characters.
+$token = bin2hex(random_bytes(16)); // 32 hex characters.
 
 // Calculate expiration (Unix timestamp).
 $expires = time() + ($expirationMinutes * 60);
@@ -42,6 +40,14 @@ if (file_exists($shareFile)) {
     }
 }
 
+// Clean up expired share links.
+$currentTime = time();
+foreach ($shareLinks as $key => $link) {
+    if ($link["expires"] < $currentTime) {
+        unset($shareLinks[$key]);
+    }
+}
+
 // Add record.
 $shareLinks[$token] = [
     "folder" => $folder,

deleteFiles.php

@@ -19,6 +19,20 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
+// Define $username first.
+$username = $_SESSION['username'] ?? '';
+
+// Now load the user's permissions.
+$userPermissions = loadUserPermissions($username);
+
+// Check if the user is read-only.
+if ($username) {
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to delete files."]);
+        exit();
+    }
+}
+
 // --- Setup Trash Folder & Metadata ---
 $trashDir = rtrim(TRASH_DIR, '/\\') . DIRECTORY_SEPARATOR;
 if (!file_exists($trashDir)) {

deleteFolder.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 // Ensure user is authenticated
@@ -24,6 +24,16 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to delete folders."]);
+        exit();
+    }
+}
+
 // Get the JSON input and decode it
 $input = json_decode(file_get_contents('php://input'), true);
 if (!isset($input['folder'])) {

deleteTrashFiles.php

@@ -1,5 +1,4 @@
 <?php
-session_start();
 require_once 'config.php';
 header('Content-Type: application/json');
 

domUtils.js

@@ -28,35 +28,39 @@ export function toggleAllCheckboxes(masterCheckbox) {
 }
 
 export function updateFileActionButtons() {
-  const fileListContainer = document.getElementById("fileList");
   const fileCheckboxes = document.querySelectorAll("#fileList .file-checkbox");
   const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
   const copyBtn = document.getElementById("copySelectedBtn");
   const moveBtn = document.getElementById("moveSelectedBtn");
   const deleteBtn = document.getElementById("deleteSelectedBtn");
   const zipBtn = document.getElementById("downloadZipBtn");
+  const extractZipBtn = document.getElementById("extractZipBtn");
 
   if (fileCheckboxes.length === 0) {
     if (copyBtn) copyBtn.style.display = "none";
     if (moveBtn) moveBtn.style.display = "none";
     if (deleteBtn) deleteBtn.style.display = "none";
     if (zipBtn) zipBtn.style.display = "none";
+    if (extractZipBtn) extractZipBtn.style.display = "none";
   } else {
     if (copyBtn) copyBtn.style.display = "inline-block";
     if (moveBtn) moveBtn.style.display = "inline-block";
     if (deleteBtn) deleteBtn.style.display = "inline-block";
     if (zipBtn) zipBtn.style.display = "inline-block";
+    if (extractZipBtn) extractZipBtn.style.display = "inline-block";
 
-    if (selectedCheckboxes.length > 0) {
-      if (copyBtn) copyBtn.disabled = false;
-      if (moveBtn) moveBtn.disabled = false;
-      if (deleteBtn) deleteBtn.disabled = false;
-      if (zipBtn) zipBtn.disabled = false;
-    } else {
-      if (copyBtn) copyBtn.disabled = true;
-      if (moveBtn) moveBtn.disabled = true;
-      if (deleteBtn) deleteBtn.disabled = true;
-      if (zipBtn) zipBtn.disabled = true;
+    const anySelected = selectedCheckboxes.length > 0;
+    if (copyBtn) copyBtn.disabled = !anySelected;
+    if (moveBtn) moveBtn.disabled = !anySelected;
+    if (deleteBtn) deleteBtn.disabled = !anySelected;
+    if (zipBtn) zipBtn.disabled = !anySelected;
+
+    if (extractZipBtn) {
+      // Enable only if at least one selected file ends with .zip (case-insensitive).
+      const anyZipSelected = Array.from(selectedCheckboxes).some(chk =>
+        chk.value.toLowerCase().endsWith(".zip")
+      );
+      extractZipBtn.disabled = !anyZipSelected;
     }
   }
 }
@@ -93,7 +97,7 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
               <i class="material-icons">search</i>
             </span>
           </div>
-          <input type="text" id="searchInput" class="form-control" placeholder="Search files..." value="${safeSearchTerm}" aria-describedby="searchIcon">
+          <input type="text" id="searchInput" class="form-control" placeholder="Search files or tag..." value="${safeSearchTerm}" aria-describedby="searchIcon">
         </div>
       </div>
       <div class="col-12 col-md-4 text-left">
@@ -132,18 +136,20 @@ export function buildFileTableRow(file, folderPath) {
   const safeUploader = escapeHTML(file.uploader || "Unknown");
 
   let previewButton = "";
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|mov|ogg)$/i.test(file.name)) {
+  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|mov|mp3|wav|m4a|ogg|flac|aac|wma|opus|mkv|ogv)$/i.test(file.name)) {
     let previewIcon = "";
     if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">image</i>`;
-    } else if (/\.(mp4|webm|mov|ogg)$/i.test(file.name)) {
+    } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">videocam</i>`;
     } else if (/\.pdf$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">picture_as_pdf</i>`;
+    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
+      previewIcon = `<i class="material-icons">audiotrack</i>`;
     }
     previewButton = `<button class="btn btn-sm btn-info preview-btn" onclick="event.stopPropagation(); previewFile('${folderPath + encodeURIComponent(file.name)}', '${safeFileName}')">
-               ${previewIcon}
-             </button>`;
+                 ${previewIcon}
+               </button>`;
   }
 
   return `
@@ -151,7 +157,7 @@ export function buildFileTableRow(file, folderPath) {
     <td>
       <input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
     </td>
-    <td>${safeFileName}</td>
+    <td class="file-name-cell">${safeFileName}</td>
     <td class="hide-small nowrap">${safeModified}</td>
     <td class="hide-small hide-medium nowrap">${safeUploaded}</td>
     <td class="hide-small nowrap">${safeSize}</td>
@@ -227,82 +233,51 @@ export function toggleRowSelection(event, fileName) {
   updateFileActionButtons();
 }
 
-export function previewFile(fileUrl, fileName) {
-  let modal = document.getElementById("filePreviewModal");
-  if (!modal) {
-    modal = document.createElement("div");
-    modal.id = "filePreviewModal";
-    Object.assign(modal.style, {
-      display: "none",
-      position: "fixed",
-      top: "0",
-      left: "0",
-      width: "100vw",
-      height: "100vh",
-      backgroundColor: "rgba(0,0,0,0.7)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: "1000"
-    });
-    modal.innerHTML = `
-      <div class="modal-content image-preview-modal-content">
-        <span id="closeFileModal" class="close-image-modal">&times;</span>
-        <h4 class="image-modal-header"></h4>
-        <div class="file-preview-container"></div>
-      </div>`;
-    document.body.appendChild(modal);
-
-    document.getElementById("closeFileModal").addEventListener("click", function () {
-      const video = modal.querySelector("video");
-      if (video) {
-        video.pause();
-        video.currentTime = 0;
-      }
-      modal.style.display = "none";
-    });
-
-    modal.addEventListener("click", function (e) {
-      if (e.target === modal) {
-        const video = modal.querySelector("video");
-        if (video) {
-          video.pause();
-          video.currentTime = 0;
+export function attachEnterKeyListener(modalId, buttonId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    // Make the modal focusable
+    modal.setAttribute("tabindex", "-1");
+    modal.focus();
+    modal.addEventListener("keydown", function(e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const btn = document.getElementById(buttonId);
+        if (btn) {
+          btn.click();
         }
-        modal.style.display = "none";
       }
     });
   }
+}
 
-  modal.querySelector("h4").textContent = fileName;
-  const container = modal.querySelector(".file-preview-container");
-  container.innerHTML = "";
+export function showCustomConfirmModal(message) {
+  return new Promise((resolve) => {
+    const modal = document.getElementById("customConfirmModal");
+    const messageElem = document.getElementById("confirmMessage");
+    const yesBtn = document.getElementById("confirmYesBtn");
+    const noBtn = document.getElementById("confirmNoBtn");
 
-  const extension = fileName.split('.').pop().toLowerCase();
+    messageElem.textContent = message;
+    modal.style.display = "block";
 
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(fileName)) {
-    const img = document.createElement("img");
-    img.src = fileUrl;
-    img.className = "image-modal-img";
-    container.appendChild(img);
-  } else if (extension === "pdf") {
-    const embed = document.createElement("embed");
-    const separator = fileUrl.indexOf('?') === -1 ? '?' : '&';
-    embed.src = fileUrl + separator + 't=' + new Date().getTime();
-    embed.type = "application/pdf";
-    embed.style.width = "80vw";
-    embed.style.height = "80vh";
-    embed.style.border = "none";
-    container.appendChild(embed);
-  } else if (/\.(mp4|webm|mov|ogg)$/i.test(fileName)) {
-    const video = document.createElement("video");
-    video.src = fileUrl;
-    video.controls = true;
-    video.className = "image-modal-img";
-    container.appendChild(video);
-  } else {
-    container.textContent = "Preview not available for this file type.";
-  }
+    // Cleanup function to hide the modal and remove event listeners.
+    function cleanup() {
+      modal.style.display = "none";
+      yesBtn.removeEventListener("click", onYes);
+      noBtn.removeEventListener("click", onNo);
+    }
 
-  modal.style.display = "flex";
+    function onYes() {
+      cleanup();
+      resolve(true);
+    }
+    function onNo() {
+      cleanup();
+      resolve(false);
+    }
+
+    yesBtn.addEventListener("click", onYes);
+    noBtn.addEventListener("click", onNo);
+  });
 }

download.php

@@ -1,8 +1,6 @@
 <?php
 require_once 'config.php';
 
-// For GET requests (which download.php will use), we assume session authentication is enough.
-
 // Check if the user is authenticated.
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
@@ -22,38 +20,70 @@ if (!preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $file)) {
     exit;
 }
 
-// Determine the directory.
-if ($folder !== 'root') {
-    $directory = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
-} else {
-    $directory = UPLOAD_DIR;
+// Get the realpath of the upload directory.
+$uploadDirReal = realpath(UPLOAD_DIR);
+if ($uploadDirReal === false) {
+    http_response_code(500);
+    echo json_encode(["error" => "Server misconfiguration."]);
+    exit;
 }
 
-$filePath = $directory . $file;
+// Determine the directory.
+if ($folder === 'root') {
+    $directory = $uploadDirReal;
+} else {
+    // Prevent path traversal in folder parameter.
+    if (strpos($folder, '..') !== false) {
+        http_response_code(400);
+        echo json_encode(["error" => "Invalid folder name."]);
+        exit;
+    }
+    
+    $directoryPath = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder;
+    $directory = realpath($directoryPath);
+    
+    // Ensure that the resolved directory exists and is within the allowed UPLOAD_DIR.
+    if ($directory === false || strpos($directory, $uploadDirReal) !== 0) {
+        http_response_code(400);
+        echo json_encode(["error" => "Invalid folder path."]);
+        exit;
+    }
+}
 
-if (!file_exists($filePath)) {
+// Build the file path.
+$filePath = $directory . DIRECTORY_SEPARATOR . $file;
+$realFilePath = realpath($filePath);
+
+// Validate that the real file path exists and is within the allowed directory.
+if ($realFilePath === false || strpos($realFilePath, $uploadDirReal) !== 0) {
+    http_response_code(403);
+    echo json_encode(["error" => "Access forbidden."]);
+    exit;
+}
+
+if (!file_exists($realFilePath)) {
     http_response_code(404);
     echo json_encode(["error" => "File not found."]);
     exit;
 }
 
 // Serve the file.
-$mimeType = mime_content_type($filePath);
+$mimeType = mime_content_type($realFilePath);
 header("Content-Type: " . $mimeType);
 
 // For images, serve inline; for other types, force download.
-$ext = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));
+$ext = strtolower(pathinfo($realFilePath, PATHINFO_EXTENSION));
 if (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp','svg','ico'])) {
-    header('Content-Disposition: inline; filename="' . basename($filePath) . '"');
+    header('Content-Disposition: inline; filename="' . basename($realFilePath) . '"');
 } else {
-    header('Content-Disposition: attachment; filename="' . basename($filePath) . '"');
+    header('Content-Disposition: attachment; filename="' . basename($realFilePath) . '"');
 }
-header('Content-Length: ' . filesize($filePath));
+header('Content-Length: ' . filesize($realFilePath));
 
 // Disable caching.
 header('Cache-Control: no-store, no-cache, must-revalidate');
 header('Pragma: no-cache');
 
-readfile($filePath);
+readfile($realFilePath);
 exit;
 ?>

dragAndDrop.js

@@ -0,0 +1,599 @@
+// dragAndDrop.js
+// This file handles drag-and-drop functionality for cards in the sidebar, header and top drop zones.
+// It also manages the visibility of the sidebar and header drop zones based on the current state of the application.
+// It includes functions to save and load the order of cards in the sidebar and header from localStorage.
+// It also includes functions to handle the drag-and-drop events, including mouse movements and drop zones.
+// It uses CSS classes to manage the appearance of the sidebar and header drop zones during drag-and-drop operations.
+
+// Moves cards into the sidebar based on the saved order in localStorage.
+export function loadSidebarOrder() {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (!sidebar) return;
+    const orderStr = localStorage.getItem('sidebarOrder');
+    if (orderStr) {
+      const order = JSON.parse(orderStr);
+      if (order.length > 0) {
+        // Ensure main wrapper is visible.
+        const mainWrapper = document.querySelector('.main-wrapper');
+        if (mainWrapper) {
+          mainWrapper.style.display = 'flex';
+        }
+        // For each saved ID, move the card into the sidebar.
+        order.forEach(id => {
+          const card = document.getElementById(id);
+          if (card && card.parentNode.id !== 'sidebarDropArea') {
+            sidebar.appendChild(card);
+            // Animate vertical slide for sidebar card
+            animateVerticalSlide(card);
+          }
+        });
+      }
+    }
+    updateSidebarVisibility();
+  }
+  
+  // NEW: Load header order from localStorage.
+  export function loadHeaderOrder() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (!headerDropArea) return;
+    const orderStr = localStorage.getItem('headerOrder');
+    if (orderStr) {
+      const order = JSON.parse(orderStr);
+      if (order.length > 0) {
+        order.forEach(id => {
+          const card = document.getElementById(id);
+          // Only load if card is not already in header drop zone.
+          if (card && card.parentNode.id !== 'headerDropArea') {
+            insertCardInHeader(card, null);
+          }
+        });
+      }
+    }
+  }
+  
+  // Internal helper: update sidebar visibility based on its content.
+  function updateSidebarVisibility() {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (sidebar) {
+      const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
+      if (cards.length > 0) {
+        sidebar.classList.add('active');
+        sidebar.style.display = 'block';
+      } else {
+        sidebar.classList.remove('active');
+        sidebar.style.display = 'none';
+      }
+      // Save the current order in localStorage.
+      saveSidebarOrder();
+    }
+  }
+  
+  // NEW: Save header order to localStorage.
+  function saveHeaderOrder() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (headerDropArea) {
+      const icons = Array.from(headerDropArea.children);
+      // Each header icon stores its associated card in the property cardElement.
+      const order = icons.map(icon => icon.cardElement.id);
+      localStorage.setItem('headerOrder', JSON.stringify(order));
+    }
+  }
+  
+  // Internal helper: update top zone layout (center a card if one column is empty).
+  function updateTopZoneLayout() {
+    const leftCol = document.getElementById('leftCol');
+    const rightCol = document.getElementById('rightCol');
+  
+    const leftIsEmpty = !leftCol.querySelector('#uploadCard');
+    const rightIsEmpty = !rightCol.querySelector('#folderManagementCard');
+  
+    if (leftIsEmpty && !rightIsEmpty) {
+      leftCol.style.display = 'none';
+      rightCol.style.margin = '0 auto';
+    } else if (rightIsEmpty && !leftIsEmpty) {
+      rightCol.style.display = 'none';
+      leftCol.style.margin = '0 auto';
+    } else {
+      leftCol.style.display = '';
+      rightCol.style.display = '';
+      leftCol.style.margin = '';
+      rightCol.style.margin = '';
+    }
+  }
+  
+  // When a card is being dragged, if the top drop zone is empty, set its min-height.
+  function addTopZoneHighlight() {
+    const topZone = document.getElementById('uploadFolderRow');
+    if (topZone) {
+      topZone.classList.add('highlight');
+      if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
+        topZone.style.minHeight = '375px';
+      }
+    }
+  }
+  
+  // When the drag ends, remove the extra min-height.
+  function removeTopZoneHighlight() {
+    const topZone = document.getElementById('uploadFolderRow');
+    if (topZone) {
+      topZone.classList.remove('highlight');
+      topZone.style.minHeight = '';
+    }
+  }
+  
+  // Vertical slide/fade animation helper.
+  function animateVerticalSlide(card) {
+    card.style.transform = 'translateY(30px)';
+    card.style.opacity = '0';
+    // Force reflow.
+    card.offsetWidth;
+    requestAnimationFrame(() => {
+      card.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
+      card.style.transform = 'translateY(0)';
+      card.style.opacity = '1';
+    });
+    setTimeout(() => {
+      card.style.transition = '';
+      card.style.transform = '';
+      card.style.opacity = '';
+    }, 310);
+  }
+  
+  // Internal helper: insert card into sidebar at a proper position based on event.clientY.
+  function insertCardInSidebar(card, event) {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (!sidebar) return;
+    const existingCards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
+    let inserted = false;
+    for (const currentCard of existingCards) {
+      const rect = currentCard.getBoundingClientRect();
+      const midY = rect.top + rect.height / 2;
+      if (event.clientY < midY) {
+        sidebar.insertBefore(card, currentCard);
+        inserted = true;
+        break;
+      }
+    }
+    if (!inserted) {
+      sidebar.appendChild(card);
+    }
+    // Ensure card fills the sidebar.
+    card.style.width = '100%';
+    animateVerticalSlide(card);
+  }
+  
+  // Internal helper: save the current sidebar card order to localStorage.
+  function saveSidebarOrder() {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (sidebar) {
+      const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
+      const order = Array.from(cards).map(card => card.id);
+      localStorage.setItem('sidebarOrder', JSON.stringify(order));
+    }
+  }
+  
+  // Helper: move cards from sidebar back to the top drop area when on small screens.
+  function moveSidebarCardsToTop() {
+    if (window.innerWidth < 1205) {
+      const sidebar = document.getElementById('sidebarDropArea');
+      if (!sidebar) return;
+      const cards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
+      cards.forEach(card => {
+        const orig = document.getElementById(card.dataset.originalContainerId);
+        if (orig) {
+          orig.appendChild(card);
+          animateVerticalSlide(card);
+        }
+      });
+      updateSidebarVisibility();
+      updateTopZoneLayout();
+    }
+  }
+  
+  // Listen for window resize to automatically move sidebar cards back to top on small screens.
+  window.addEventListener('resize', function () {
+    if (window.innerWidth < 1205) {
+      moveSidebarCardsToTop();
+    }
+  });
+  
+  // This function ensures the top drop zone (#uploadFolderRow) has a stable width when empty.
+  function ensureTopZonePlaceholder() {
+    const topZone = document.getElementById('uploadFolderRow');
+    if (!topZone) return;
+    if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
+      let placeholder = topZone.querySelector('.placeholder');
+      if (!placeholder) {
+        placeholder = document.createElement('div');
+        placeholder.className = 'placeholder';
+        placeholder.style.visibility = 'hidden';
+        placeholder.style.display = 'block';
+        placeholder.style.width = '100%';
+        placeholder.style.height = '375px';
+        topZone.appendChild(placeholder);
+      }
+    } else {
+      const placeholder = topZone.querySelector('.placeholder');
+      if (placeholder) placeholder.remove();
+    }
+  }
+    
+  // --- NEW HELPER FUNCTIONS FOR HEADER DROP ZONE ---
+  
+  // Show header drop zone and add a "drag-active" class so that the pseudo-element appears.
+  function showHeaderDropZone() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (headerDropArea) {
+      headerDropArea.style.display = 'inline-flex';
+      headerDropArea.classList.add('drag-active');
+    }
+  }
+    
+  // Hide header drop zone by removing the "drag-active" class.
+  // If a header icon is present (i.e. a card was dropped), the drop zone remains visible without the dashed border.
+  function hideHeaderDropZone() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (headerDropArea) {
+      headerDropArea.classList.remove('drag-active');
+      if (headerDropArea.children.length === 0) {
+        headerDropArea.style.display = 'none';
+      }
+    }
+  }
+    
+  // === NEW FUNCTION: Insert card into header drop zone as a material icon ===
+  function insertCardInHeader(card, event) {
+      const headerDropArea = document.getElementById('headerDropArea');
+      if (!headerDropArea) return;
+      
+      // For folder management and upload cards, preserve the original by moving it to a hidden container.
+      if (card.id === 'folderManagementCard' || card.id === 'uploadCard') {
+        let hiddenContainer = document.getElementById('hiddenCardsContainer');
+        if (!hiddenContainer) {
+          hiddenContainer = document.createElement('div');
+          hiddenContainer.id = 'hiddenCardsContainer';
+          hiddenContainer.style.display = 'none';
+          document.body.appendChild(hiddenContainer);
+        }
+        // Move the original card to the hidden container if it's not already there.
+        if (card.parentNode.id !== 'hiddenCardsContainer') {
+          hiddenContainer.appendChild(card);
+        }
+      } else {
+        // For other cards, simply remove from current container.
+        if (card.parentNode) {
+          card.parentNode.removeChild(card);
+        }
+      }
+      
+      // Create the header icon button.
+      const iconButton = document.createElement('button');
+      iconButton.className = 'header-card-icon';
+      // Remove default button styling.
+      iconButton.style.border = 'none';
+      iconButton.style.background = 'none';
+      iconButton.style.outline = 'none';
+      iconButton.style.cursor = 'pointer';
+        
+      // Choose an icon based on the card type with 24px size.
+      if (card.id === 'uploadCard') {
+        iconButton.innerHTML = '<i class="material-icons" style="font-size:24px;">cloud_upload</i>';
+      } else if (card.id === 'folderManagementCard') {
+        iconButton.innerHTML = '<i class="material-icons" style="font-size:24px;">folder</i>';
+      } else {
+        iconButton.innerHTML = '<i class="material-icons" style="font-size:24px;">insert_drive_file</i>';
+      }
+      
+      // Save a reference to the card in the icon button.
+      iconButton.cardElement = card;
+      // Associate this icon with the card for future removal.
+      card.headerIconButton = iconButton;
+      
+      let modal = null;
+      let isLocked = false;
+      let hoverActive = false;
+      
+      // showModal: When triggered, ensure the card is attached to the modal.
+      function showModal() {
+        if (!modal) {
+          modal = document.createElement('div');
+          modal.className = 'header-card-modal';
+          modal.style.position = 'fixed';
+          modal.style.top = '80px';
+          modal.style.right = '80px';
+          modal.style.zIndex = '11000';
+          // Render the modal but initially keep it hidden.
+          modal.style.display = 'block';
+          modal.style.visibility = 'hidden';
+          modal.style.opacity = '0';
+          modal.style.background = 'none';
+          modal.style.border = 'none';
+          modal.style.padding = '0';
+          modal.style.boxShadow = 'none';
+          document.body.appendChild(modal);
+          // Attach modal hover events.
+          modal.addEventListener('mouseover', handleMouseOver);
+          modal.addEventListener('mouseout', handleMouseOut);
+          iconButton.modalInstance = modal;
+        }
+        // If the card isn't already in the modal, remove it from the hidden container and attach it.
+        if (!modal.contains(card)) {
+          const hiddenContainer = document.getElementById('hiddenCardsContainer');
+          if (hiddenContainer && hiddenContainer.contains(card)) {
+            hiddenContainer.removeChild(card);
+          }
+          modal.appendChild(card);
+        }
+        // Reveal the modal.
+        modal.style.visibility = 'visible';
+        modal.style.opacity = '1';
+      }
+      
+      // hideModal: Hide the modal and return the card to the hidden container.
+      function hideModal() {
+        if (modal && !isLocked && !hoverActive) {
+          modal.style.visibility = 'hidden';
+          modal.style.opacity = '0';
+          // Return the card to the hidden container.
+          const hiddenContainer = document.getElementById('hiddenCardsContainer');
+          if (hiddenContainer && modal.contains(card)) {
+            hiddenContainer.appendChild(card);
+          }
+        }
+      }
+      
+      function handleMouseOver() {
+        hoverActive = true;
+        showModal();
+      }
+      
+      function handleMouseOut() {
+        hoverActive = false;
+        setTimeout(() => {
+          if (!hoverActive && !isLocked) {
+            hideModal();
+          }
+        }, 300);
+      }
+      
+      // Attach hover events to the icon.
+      iconButton.addEventListener('mouseover', handleMouseOver);
+      iconButton.addEventListener('mouseout', handleMouseOut);
+      
+      // Toggle the locked state on click so the modal stays open.
+      iconButton.addEventListener('click', (e) => {
+        isLocked = !isLocked;
+        if (isLocked) {
+          showModal();
+        } else {
+          hideModal();
+        }
+        e.stopPropagation();
+      });
+      
+      // Append the header icon button into the header drop zone.
+      headerDropArea.appendChild(iconButton);
+      // Save the updated header order.
+      saveHeaderOrder();
+    }
+    
+  // === Main Drag and Drop Initialization ===
+  export function initDragAndDrop() {
+    function run() {
+      const draggableCards = document.querySelectorAll('#uploadCard, #folderManagementCard');
+      draggableCards.forEach(card => {
+        if (!card.dataset.originalContainerId) {
+          card.dataset.originalContainerId = card.parentNode.id;
+        }
+        const header = card.querySelector('.card-header');
+        if (header) {
+          header.classList.add('drag-header');
+        }
+    
+        let isDragging = false;
+        let dragTimer = null;
+        let offsetX = 0, offsetY = 0;
+        let initialLeft, initialTop;
+    
+        if (header) {
+          header.addEventListener('mousedown', function (e) {
+            e.preventDefault();
+            const card = this.closest('.card');
+            // Capture the card's initial bounding rectangle.
+            const initialRect = card.getBoundingClientRect();
+            const originX = ((e.clientX - initialRect.left) / initialRect.width) * 100;
+            const originY = ((e.clientY - initialRect.top) / initialRect.height) * 100;
+            card.style.transformOrigin = `${originX}% ${originY}%`;
+    
+            // Store the initial rect so we use it later.
+            dragTimer = setTimeout(() => {
+              isDragging = true;
+              card.classList.add('dragging');
+              card.style.pointerEvents = 'none';
+              addTopZoneHighlight();
+    
+              const sidebar = document.getElementById('sidebarDropArea');
+              if (sidebar) {
+                sidebar.classList.add('active');
+                sidebar.style.display = 'block';
+                sidebar.classList.add('highlight');
+                sidebar.style.height = '800px';
+              }
+    
+              // Show header drop zone while dragging.
+              showHeaderDropZone();
+    
+              // Use the stored initialRect.
+              initialLeft = initialRect.left + window.pageXOffset;
+              initialTop = initialRect.top + window.pageYOffset;
+              offsetX = e.pageX - initialLeft;
+              offsetY = e.pageY - initialTop;
+    
+              // Remove any associated header icon if present.
+              if (card.headerIconButton) {
+                if (card.headerIconButton.parentNode) {
+                  card.headerIconButton.parentNode.removeChild(card.headerIconButton);
+                }
+                if (card.headerIconButton.modalInstance && card.headerIconButton.modalInstance.parentNode) {
+                  card.headerIconButton.modalInstance.parentNode.removeChild(card.headerIconButton.modalInstance);
+                }
+                card.headerIconButton = null;
+                saveHeaderOrder();
+              }
+    
+              // Append card to body and fix its dimensions.
+              document.body.appendChild(card);
+              card.style.position = 'absolute';
+              card.style.left = initialLeft + 'px';
+              card.style.top = initialTop + 'px';
+              card.style.width = initialRect.width + 'px';
+              card.style.height = initialRect.height + 'px';
+              card.style.minWidth = initialRect.width + 'px';
+              card.style.flexShrink = '0';
+              card.style.zIndex = '10000';
+            }, 500);
+          });
+          header.addEventListener('mouseup', function () {
+            clearTimeout(dragTimer);
+          });
+        }
+    
+        document.addEventListener('mousemove', function (e) {
+          if (isDragging) {
+            card.style.left = (e.pageX - offsetX) + 'px';
+            card.style.top = (e.pageY - offsetY) + 'px';
+          }
+        });
+    
+        document.addEventListener('mouseup', function (e) {
+          if (isDragging) {
+            isDragging = false;
+            card.style.pointerEvents = '';
+            card.classList.remove('dragging');
+            removeTopZoneHighlight();
+    
+            const sidebar = document.getElementById('sidebarDropArea');
+            if (sidebar) {
+              sidebar.classList.remove('highlight');
+              sidebar.style.height = '';
+            }
+    
+            // Remove any existing header icon if present.
+            if (card.headerIconButton) {
+              if (card.headerIconButton.parentNode) {
+                card.headerIconButton.parentNode.removeChild(card.headerIconButton);
+              }
+              if (card.headerIconButton.modalInstance && card.headerIconButton.modalInstance.parentNode) {
+                card.headerIconButton.modalInstance.parentNode.removeChild(card.headerIconButton.modalInstance);
+              }
+              card.headerIconButton = null;
+              saveHeaderOrder();
+            }
+    
+            let droppedInSidebar = false;
+            let droppedInTop = false;
+            let droppedInHeader = false;
+    
+            // Check if dropped in sidebar drop zone.
+            const sidebarElem = document.getElementById('sidebarDropArea');
+            if (sidebarElem) {
+              const rect = sidebarElem.getBoundingClientRect();
+              const dropZoneBottom = rect.top + 800; // Virtual drop zone height.
+              if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= dropZoneBottom
+              ) {
+                insertCardInSidebar(card, e);
+                droppedInSidebar = true;
+              }
+            }
+            // Check the top drop zone.
+            const topRow = document.getElementById('uploadFolderRow');
+            if (!droppedInSidebar && topRow) {
+              const rect = topRow.getBoundingClientRect();
+              if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom
+              ) {
+                let container;
+                if (card.id === 'uploadCard') {
+                  container = document.getElementById('leftCol');
+                } else if (card.id === 'folderManagementCard') {
+                  container = document.getElementById('rightCol');
+                }
+                if (container) {
+                  ensureTopZonePlaceholder();
+                  updateTopZoneLayout();
+                  container.appendChild(card);
+                  droppedInTop = true;
+                  // Set a fixed width during animation.
+                  card.style.width = "363px";
+                  animateVerticalSlide(card);
+                  setTimeout(() => {
+                    card.style.removeProperty('width');
+                  }, 210);
+                }
+              }
+            }
+            // Check the header drop zone.
+            const headerDropArea = document.getElementById('headerDropArea');
+            if (!droppedInSidebar && !droppedInTop && headerDropArea) {
+              const rect = headerDropArea.getBoundingClientRect();
+              if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom
+              ) {
+                insertCardInHeader(card, e);
+                droppedInHeader = true;
+              }
+            }
+            // If card was not dropped in any zone, return it to its original container.
+            if (!droppedInSidebar && !droppedInTop && !droppedInHeader) {
+              const orig = document.getElementById(card.dataset.originalContainerId);
+              if (orig) {
+                orig.appendChild(card);
+                card.style.removeProperty('width');
+              }
+            }
+    
+            // Clear inline drag-related styles.
+            [
+              'position',
+              'left',
+              'top',
+              'z-index',
+              'height',
+              'min-width',
+              'flex-shrink',
+              'transition',
+              'transform',
+              'opacity'
+            ].forEach(prop => card.style.removeProperty(prop));
+    
+            // For sidebar drops, force width to 100%.
+            if (droppedInSidebar) {
+              card.style.width = '100%';
+            }
+    
+            updateTopZoneLayout();
+            updateSidebarVisibility();
+    
+            // Hide header drop zone if no icon is present.
+            hideHeaderDropZone();
+          }
+        });
+      });
+    }
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', run);
+    } else {
+      run();
+    }
+  }

extractZip.php

@@ -0,0 +1,165 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// --- CSRF Protection ---
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if ($receivedToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+// Ensure user is authenticated.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(401);
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to extract zip files"]);
+        exit();
+    }
+}
+
+// Read and decode the JSON input.
+$rawData = file_get_contents("php://input");
+$data = json_decode($rawData, true);
+if (!is_array($data) || !isset($data['folder']) || !isset($data['files']) || !is_array($data['files'])) {
+    http_response_code(400);
+    echo json_encode(["error" => "Invalid input."]);
+    exit;
+}
+
+$folder = $data['folder'];
+$files = $data['files'];
+
+if (empty($files)) {
+    http_response_code(400);
+    echo json_encode(["error" => "No files specified."]);
+    exit;
+}
+
+// Validate folder name (allow "root" or valid subfolder names).
+if ($folder !== "root") {
+    $parts = explode('/', $folder);
+    foreach ($parts as $part) {
+        if (empty($part) || $part === '.' || $part === '..' || !preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $part)) {
+            http_response_code(400);
+            echo json_encode(["error" => "Invalid folder name."]);
+            exit;
+        }
+    }
+    $relativePath = implode(DIRECTORY_SEPARATOR, $parts) . DIRECTORY_SEPARATOR;
+} else {
+    $relativePath = "";
+}
+
+$baseDir = realpath(UPLOAD_DIR);
+if ($baseDir === false) {
+    http_response_code(500);
+    echo json_encode(["error" => "Uploads directory not configured correctly."]);
+    exit;
+}
+
+$folderPath = $baseDir . DIRECTORY_SEPARATOR . $relativePath;
+$folderPathReal = realpath($folderPath);
+if ($folderPathReal === false || strpos($folderPathReal, $baseDir) !== 0) {
+    http_response_code(404);
+    echo json_encode(["error" => "Folder not found."]);
+    exit;
+}
+
+// ---------- Metadata Setup ----------
+function getMetadataFilePath($folder) {
+    if (strtolower($folder) === 'root' || $folder === '') {
+        return META_DIR . "root_metadata.json";
+    }
+    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
+}
+
+$srcMetaFile = getMetadataFilePath($folder);
+$destMetaFile = getMetadataFilePath($folder);
+$srcMetadata = file_exists($srcMetaFile) ? json_decode(file_get_contents($srcMetaFile), true) : [];
+$destMetadata = file_exists($destMetaFile) ? json_decode(file_get_contents($destMetaFile), true) : [];
+
+$errors = [];
+$allSuccess = true;
+$extractedFiles = array(); // Array to collect names of extracted files
+$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
+
+// ---------- Process Each File ----------
+foreach ($files as $zipFileName) {
+    $originalName = basename(trim($zipFileName));
+    // Process only .zip files.
+    if (strtolower(substr($originalName, -4)) !== '.zip') {
+        continue;
+    }
+    if (!preg_match($safeFileNamePattern, $originalName)) {
+        $errors[] = "$originalName has an invalid name.";
+        $allSuccess = false;
+        continue;
+    }
+    
+    $zipFilePath = $folderPathReal . DIRECTORY_SEPARATOR . $originalName;
+    if (!file_exists($zipFilePath)) {
+        $errors[] = "$originalName does not exist in folder.";
+        $allSuccess = false;
+        continue;
+    }
+    
+    $zip = new ZipArchive();
+    if ($zip->open($zipFilePath) !== TRUE) {
+        $errors[] = "Could not open $originalName as a zip file.";
+        $allSuccess = false;
+        continue;
+    }
+    
+    // Attempt extraction.
+    if (!$zip->extractTo($folderPathReal)) {
+        $errors[] = "Failed to extract $originalName.";
+        $allSuccess = false;
+    } else {
+        // Collect extracted file names from this zip.
+        for ($i = 0; $i < $zip->numFiles; $i++) {
+            $entryName = $zip->getNameIndex($i);
+            $extractedFileName = basename($entryName);
+            if ($extractedFileName) {
+                $extractedFiles[] = $extractedFileName;
+            }
+        }
+        // Update metadata for each extracted file if the zip file has metadata.
+        if (isset($srcMetadata[$originalName])) {
+            $zipMeta = $srcMetadata[$originalName];
+            // Iterate through all entries in the zip.
+            for ($i = 0; $i < $zip->numFiles; $i++) {
+                $entryName = $zip->getNameIndex($i);
+                $extractedFileName = basename($entryName);
+                if ($extractedFileName) {
+                    $destMetadata[$extractedFileName] = $zipMeta;
+                }
+            }
+        }
+    }
+    $zip->close();
+}
+
+// Write updated metadata back to the destination metadata file.
+if (file_put_contents($destMetaFile, json_encode($destMetadata, JSON_PRETTY_PRINT)) === false) {
+    $errors[] = "Failed to update metadata.";
+    $allSuccess = false;
+}
+
+if ($allSuccess) {
+    echo json_encode(["success" => true, "extractedFiles" => $extractedFiles]);
+} else {
+    echo json_encode(["success" => false, "error" => implode(" ", $errors)]);
+}
+exit;
+?>

fileManager.js

@@ -9,12 +9,14 @@ import {
   showToast,
   updateRowHighlight,
   toggleRowSelection,
-  previewFile as originalPreviewFile
+  attachEnterKeyListener
 } from './domUtils.js';
 
 export let fileData = [];
 export let sortOrder = { column: "uploaded", ascending: true };
 
+import { initTagSearch, openTagModal, openMultiTagModal } from './fileTags.js';
+
 window.itemsPerPage = window.itemsPerPage || 10;
 window.currentPage = window.currentPage || 1;
 window.viewMode = localStorage.getItem("viewMode") || "table"; // "table" or "gallery"
@@ -152,7 +154,7 @@ function openShareModal(file, folder) {
 // ==============================================
 // FEATURE: Enhanced Preview Modal with Navigation
 // ==============================================
-function enhancedPreviewFile(fileUrl, fileName) {
+function previewFile(fileUrl, fileName) {
   let modal = document.getElementById("filePreviewModal");
   if (!modal) {
     modal = document.createElement("div");
@@ -172,17 +174,32 @@ function enhancedPreviewFile(fileUrl, fileName) {
     modal.innerHTML = `
       <div class="modal-content image-preview-modal-content" style="position: relative; max-width: 90vw; max-height: 90vh;">
         <span id="closeFileModal" class="close-image-modal" style="position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer;">&times;</span>
-        <h4 class="image-modal-header" style="text-align: center; margin-top: 40px;"></h4>
+        <h4 class="image-modal-header"></h4>
         <div class="file-preview-container" style="position: relative; text-align: center;"></div>
       </div>`;
     document.body.appendChild(modal);
 
-    document.getElementById("closeFileModal").addEventListener("click", function () {
+    function closeModal() {
+      // Pause media elements without resetting currentTime for video elements
+      const mediaElements = modal.querySelectorAll("video, audio");
+      mediaElements.forEach(media => {
+        media.pause();
+        // Only reset if it's not a video
+        if (media.tagName.toLowerCase() !== 'video') {
+          try {
+            media.currentTime = 0;
+          } catch(e) {
+            // Some media types might not support setting currentTime.
+          }
+        }
+      });
       modal.style.display = "none";
-    });
+    }
+
+    document.getElementById("closeFileModal").addEventListener("click", closeModal);
     modal.addEventListener("click", function (e) {
       if (e.target === modal) {
-        modal.style.display = "none";
+        closeModal();
       }
     });
   }
@@ -246,12 +263,41 @@ function enhancedPreviewFile(fileUrl, fileName) {
       embed.style.height = "80vh";
       embed.style.border = "none";
       container.appendChild(embed);
-    } else if (/\.(mp4|webm|mov|ogg)$/i.test(fileName)) {
+    } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(fileName)) {
       const video = document.createElement("video");
       video.src = fileUrl;
       video.controls = true;
       video.className = "image-modal-img";
+    
+      // Create a unique key for this video (using fileUrl here)
+      const progressKey = 'videoProgress-' + fileUrl;
+    
+      // When the video's metadata is loaded, check for saved progress
+      video.addEventListener("loadedmetadata", () => {
+        const savedTime = localStorage.getItem(progressKey);
+        if (savedTime) {
+          video.currentTime = parseFloat(savedTime);
+        }
+      });
+    
+      // Listen for time updates and save the current time
+      video.addEventListener("timeupdate", () => {
+        localStorage.setItem(progressKey, video.currentTime);
+      });
+
+      video.addEventListener("ended", () => {
+        localStorage.removeItem(progressKey);
+      });
+    
       container.appendChild(video);
+
+    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(fileName)) {
+      const audio = document.createElement("audio");
+      audio.src = fileUrl;
+      audio.controls = true;
+      audio.className = "audio-modal";
+      audio.style.maxWidth = "80vw";
+      container.appendChild(audio);
     } else {
       container.textContent = "Preview not available for this file type.";
     }
@@ -259,10 +305,6 @@ function enhancedPreviewFile(fileUrl, fileName) {
   modal.style.display = "flex";
 }
 
-export function previewFile(fileUrl, fileName) {
-  enhancedPreviewFile(fileUrl, fileName);
-}
-
 // ==============================================
 // ORIGINAL FILE MANAGER FUNCTIONS
 // ==============================================
@@ -323,75 +365,74 @@ export function loadFileList(folderParam) {
 //
 function fileDragStartHandler(event) {
   const row = event.currentTarget;
+  let fileNames = [];
+
   // Check if multiple file checkboxes are selected.
   const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
-  let fileNames = [];
   if (selectedCheckboxes.length > 1) {
-    // Gather file names from all selected rows.
     selectedCheckboxes.forEach(chk => {
       const parentRow = chk.closest("tr");
       if (parentRow) {
         const cell = parentRow.querySelector("td:nth-child(2)");
-        if (cell) fileNames.push(cell.textContent.trim());
+        if (cell) {
+          let rawName = cell.textContent.trim();
+          // Attempt to get the tag text from a container that holds the tags.
+          const tagContainer = cell.querySelector(".tag-badges");
+          if (tagContainer) {
+            const tagText = tagContainer.innerText.trim();
+            if (rawName.endsWith(tagText)) {
+              rawName = rawName.slice(0, -tagText.length).trim();
+            }
+          }
+          fileNames.push(rawName);
+        }
       }
     });
   } else {
-    // Only one file is selected (or none), so get file name from the current row.
     const fileNameCell = row.querySelector("td:nth-child(2)");
     if (fileNameCell) {
-      fileNames.push(fileNameCell.textContent.trim());
+      let rawName = fileNameCell.textContent.trim();
+      const tagContainer = fileNameCell.querySelector(".tag-badges");
+      if (tagContainer) {
+        const tagText = tagContainer.innerText.trim();
+        if (rawName.endsWith(tagText)) {
+          rawName = rawName.slice(0, -tagText.length).trim();
+        }
+      }
+      fileNames.push(rawName);
     }
   }
+
   if (fileNames.length === 0) return;
-  const dragData = {
-    files: fileNames, // use an array of file names
-    sourceFolder: window.currentFolder || "root"
-  };
+
+  // For a single file, send fileName; for multiple, send an array.
+  const dragData = fileNames.length === 1 
+    ? { fileName: fileNames[0], sourceFolder: window.currentFolder || "root" }
+    : { files: fileNames, sourceFolder: window.currentFolder || "root" };
+
   event.dataTransfer.setData("application/json", JSON.stringify(dragData));
 
-  // (Keep your custom drag image code here.)
-  let dragImage;
-  if (fileNames.length > 1) {
-    dragImage = document.createElement("div");
-    dragImage.style.display = "inline-flex";
-    dragImage.style.width = "auto";
-    dragImage.style.maxWidth = "fit-content";
-    dragImage.style.padding = "6px 10px";
-    dragImage.style.backgroundColor = "#333";
-    dragImage.style.color = "#fff";
-    dragImage.style.border = "1px solid #555";
-    dragImage.style.borderRadius = "4px";
-    dragImage.style.alignItems = "center";
-    dragImage.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.3)";
-    const icon = document.createElement("span");
-    icon.className = "material-icons";
-    icon.textContent = "insert_drive_file";
-    icon.style.marginRight = "4px";
-    const countSpan = document.createElement("span");
-    countSpan.textContent = fileNames.length + " files";
-    dragImage.appendChild(icon);
-    dragImage.appendChild(countSpan);
-  } else {
-    dragImage = document.createElement("div");
-    dragImage.style.display = "inline-flex";
-    dragImage.style.width = "auto";
-    dragImage.style.maxWidth = "fit-content";
-    dragImage.style.padding = "6px 10px";
-    dragImage.style.backgroundColor = "#333";
-    dragImage.style.color = "#fff";
-    dragImage.style.border = "1px solid #555";
-    dragImage.style.borderRadius = "4px";
-    dragImage.style.alignItems = "center";
-    dragImage.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.3)";
-    const icon = document.createElement("span");
-    icon.className = "material-icons";
-    icon.textContent = "insert_drive_file";
-    icon.style.marginRight = "4px";
-    const nameSpan = document.createElement("span");
-    nameSpan.textContent = fileNames[0];
-    dragImage.appendChild(icon);
-    dragImage.appendChild(nameSpan);
-  }
+  // Create a custom drag image.
+  let dragImage = document.createElement("div");
+  dragImage.style.display = "inline-flex";
+  dragImage.style.width = "auto";
+  dragImage.style.maxWidth = "fit-content";
+  dragImage.style.padding = "6px 10px";
+  dragImage.style.backgroundColor = "#333";
+  dragImage.style.color = "#fff";
+  dragImage.style.border = "1px solid #555";
+  dragImage.style.borderRadius = "4px";
+  dragImage.style.alignItems = "center";
+  dragImage.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.3)";
+  const icon = document.createElement("span");
+  icon.className = "material-icons";
+  icon.textContent = "insert_drive_file";
+  icon.style.marginRight = "4px";
+  const label = document.createElement("span");
+  label.textContent = fileNames.length === 1 ? fileNames[0] : fileNames.length + " files";
+  dragImage.appendChild(icon);
+  dragImage.appendChild(label);
+  
   document.body.appendChild(dragImage);
   event.dataTransfer.setDragImage(dragImage, 5, 5);
   setTimeout(() => {
@@ -404,17 +445,19 @@ function fileDragStartHandler(event) {
 //
 export function renderFileTable(folder) {
   const fileListContainer = document.getElementById("fileList");
-  const searchTerm = window.currentSearchTerm || "";
+  const searchTerm = (window.currentSearchTerm || "").toLowerCase();
   const itemsPerPageSetting = parseInt(localStorage.getItem("itemsPerPage") || "10", 10);
   let currentPage = window.currentPage || 1;
 
-  const filteredFiles = fileData.filter(file =>
-    file.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  // Filter files: include a file if its name OR any of its tags include the search term.
+  const filteredFiles = fileData.filter(file => {
+    const nameMatch = file.name.toLowerCase().includes(searchTerm);
+    const tagMatch = file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm));
+    return nameMatch || tagMatch;
+  });
 
   const totalFiles = filteredFiles.length;
   const totalPages = Math.ceil(totalFiles / itemsPerPageSetting);
-
   if (currentPage > totalPages) {
     currentPage = totalPages > 0 ? totalPages : 1;
     window.currentPage = currentPage;
@@ -427,19 +470,40 @@ export function renderFileTable(folder) {
   const topControlsHTML = buildSearchAndPaginationControls({
     currentPage,
     totalPages,
-    searchTerm
+    searchTerm: window.currentSearchTerm || ""
   });
   let headerHTML = buildFileTableHeader(sortOrder);
   const startIndex = (currentPage - 1) * itemsPerPageSetting;
   const endIndex = Math.min(startIndex + itemsPerPageSetting, totalFiles);
   let rowsHTML = "<tbody>";
+
   if (totalFiles > 0) {
-    filteredFiles.slice(startIndex, endIndex).forEach(file => {
+    filteredFiles.slice(startIndex, endIndex).forEach((file, idx) => {
+      // Build the table row HTML.
       let rowHTML = buildFileTableRow(file, folderPath);
+      // Add a unique id attribute so that tag updates can target this row.
+      rowHTML = rowHTML.replace("<tr", `<tr id="file-row-${encodeURIComponent(file.name)}-${startIndex + idx}"`);
+
+      // Build tag badges HTML.
+      let tagBadgesHTML = "";
+      if (file.tags && file.tags.length > 0) {
+        tagBadgesHTML = '<div class="tag-badges" style="display:inline-block; margin-left:5px;">';
+        file.tags.forEach(tag => {
+          tagBadgesHTML += `<span style="background-color: ${tag.color}; color: #fff; padding: 2px 4px; border-radius: 3px; margin-right: 2px; font-size: 0.8em;">${escapeHTML(tag.name)}</span>`;
+        });
+        tagBadgesHTML += "</div>";
+      }
+
+      // Insert tag badges into the file name cell.
+      rowHTML = rowHTML.replace(/(<td class="file-name-cell">)(.*?)(<\/td>)/, (match, p1, p2, p3) => {
+        return p1 + p2 + tagBadgesHTML + p3;
+      });
+
       // Insert share button into the actions cell.
       rowHTML = rowHTML.replace(/(<\/div>\s*<\/td>\s*<\/tr>)/, `<button class="share-btn btn btn-sm btn-secondary" data-file="${escapeHTML(file.name)}" title="Share">
             <i class="material-icons">share</i>
           </button>$1`);
+
       rowsHTML += rowHTML;
     });
   } else {
@@ -457,12 +521,10 @@ export function renderFileTable(folder) {
       window.currentSearchTerm = newSearchInput.value;
       window.currentPage = 1;
       renderFileTable(folder);
-      // After re‑render, re-select the input element and set focus.
       setTimeout(() => {
         const freshInput = document.getElementById("searchInput");
         if (freshInput) {
           freshInput.focus();
-          // Place the caret at the end of the text.
           const len = freshInput.value.length;
           freshInput.setSelectionRange(len, len);
         }
@@ -504,29 +566,48 @@ export function renderFileTable(folder) {
   });
 }
 
-//
-// --- RENDER GALLERY VIEW ---
-//
 export function renderGalleryView(folder) {
   const fileListContainer = document.getElementById("fileList");
+  const searchTerm = (window.currentSearchTerm || "").toLowerCase();
+  // Filter files using the same logic as table view.
+  const filteredFiles = fileData.filter(file => {
+    return file.name.toLowerCase().includes(searchTerm) ||
+           (file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm)));
+  });
+
   const folderPath = folder === "root"
     ? "uploads/"
     : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
   const gridStyle = "display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px;";
   let galleryHTML = `<div class="gallery-container" style="${gridStyle}">`;
-  fileData.forEach((file) => {
+
+  filteredFiles.forEach((file) => {
     let thumbnail;
     if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
       thumbnail = `<img src="${folderPath + encodeURIComponent(file.name)}?t=${new Date().getTime()}" class="gallery-thumbnail" alt="${escapeHTML(file.name)}" style="max-width: 100%; max-height: 150px; display: block; margin: 0 auto;">`;
+    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
+      thumbnail = `<span class="material-icons gallery-icon">audiotrack</span>`;
     } else {
       thumbnail = `<span class="material-icons gallery-icon">insert_drive_file</span>`;
     }
+
+    // Build tag badges HTML for the gallery view.
+    let tagBadgesHTML = "";
+    if (file.tags && file.tags.length > 0) {
+      tagBadgesHTML = `<div class="tag-badges" style="margin-top:4px;">`;
+      file.tags.forEach(tag => {
+        tagBadgesHTML += `<span style="background-color: ${tag.color}; color: #fff; padding: 2px 4px; border-radius: 3px; margin-right: 2px; font-size: 0.8em;">${escapeHTML(tag.name)}</span>`;
+      });
+      tagBadgesHTML += `</div>`;
+    }
+
     galleryHTML += `<div class="gallery-card" style="border: 1px solid #ccc; padding: 5px; text-align: center;">
       <div class="gallery-preview" style="cursor: pointer;" onclick="previewFile('${folderPath + encodeURIComponent(file.name)}?t=' + new Date().getTime(), '${file.name}')">
         ${thumbnail}
       </div>
       <div class="gallery-info" style="margin-top: 5px;">
         <span class="gallery-file-name" style="display: block;">${escapeHTML(file.name)}</span>
+        ${tagBadgesHTML}
         <div class="button-wrap" style="display: flex; justify-content: center; gap: 5px;">
           <a class="btn btn-sm btn-success download-btn" 
              href="download.php?folder=${encodeURIComponent(file.folder || 'root')}&file=${encodeURIComponent(file.name)}" 
@@ -534,7 +615,7 @@ export function renderGalleryView(folder) {
             <i class="material-icons">file_download</i>
           </a>
           ${file.editable ? `
-            <button class="btn btn-sm edit-btn"  onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})' title="Edit">
+            <button class="btn btn-sm edit-btn" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})' title="Edit">
               <i class="material-icons">edit</i>
             </button>
           ` : ""}
@@ -548,22 +629,10 @@ export function renderGalleryView(folder) {
       </div>
     </div>`;
   });
+
   galleryHTML += "</div>";
   fileListContainer.innerHTML = galleryHTML;
 
-  // Re-bind share button events if necessary.
-  document.querySelectorAll(".gallery-share-btn").forEach(btn => {
-    btn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      const fileName = this.getAttribute("data-file");
-      const folder = this.getAttribute("data-folder");
-      const file = fileData.find(f => f.name === fileName);
-      if (file) {
-        openShareModal(file, folder);
-      }
-    });
-  });
-
   createViewToggleButton();
   updateFileActionButtons();
 }
@@ -661,6 +730,7 @@ export function handleDeleteSelected(e) {
   document.getElementById("deleteFilesMessage").textContent =
     "Are you sure you want to delete " + window.filesToDelete.length + " selected file(s)?";
   document.getElementById("deleteFilesModal").style.display = "block";
+  attachEnterKeyListener("deleteFilesModal", "confirmDeleteFiles");
 }
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -671,6 +741,7 @@ document.addEventListener("DOMContentLoaded", function () {
       window.filesToDelete = [];
     });
   }
+  
   const confirmDelete = document.getElementById("confirmDeleteFiles");
   if (confirmDelete) {
     confirmDelete.addEventListener("click", function () {
@@ -700,7 +771,7 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 });
-
+attachEnterKeyListener("downloadZipModal", "confirmDownloadZip");
 export function handleDownloadZipSelected(e) {
   e.preventDefault();
   e.stopImmediatePropagation();
@@ -711,6 +782,69 @@ export function handleDownloadZipSelected(e) {
   }
   window.filesToDownload = Array.from(checkboxes).map(chk => chk.value);
   document.getElementById("downloadZipModal").style.display = "block";
+  setTimeout(() => {
+    const input = document.getElementById("zipFileNameInput");
+    input.focus();
+  }, 100);
+  
+}
+
+export function handleExtractZipSelected(e) {
+  if (e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+  // Get selected file names
+  const checkboxes = document.querySelectorAll(".file-checkbox:checked");
+  if (!checkboxes.length) {
+    showToast("No files selected.");
+    return;
+  }
+  // Filter for zip files only
+  const zipFiles = Array.from(checkboxes)
+    .map(chk => chk.value)
+    .filter(name => name.toLowerCase().endsWith(".zip"));
+  if (!zipFiles.length) {
+    showToast("No zip files selected.");
+    return;
+  }
+  // Call the extract endpoint with the selected zip files
+  fetch("extractZip.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify({
+      folder: window.currentFolder || "root",
+      files: zipFiles
+    })
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        // If the server returned a list of extracted files, join them into a string.
+        let toastMessage = "Zip file(s) extracted successfully!";
+        if (data.extractedFiles && Array.isArray(data.extractedFiles) && data.extractedFiles.length) {
+          toastMessage = "Extracted: " + data.extractedFiles.join(", ");
+        }
+        showToast(toastMessage);
+        loadFileList(window.currentFolder);
+      } else {
+        showToast("Error extracting zip: " + (data.error || "Unknown error"));
+      }
+    })
+    .catch(error => {
+      console.error("Error extracting zip files:", error);
+      showToast("Error extracting zip files.");
+    });
+}
+
+const extractZipBtn = document.getElementById("extractZipBtn");
+if (extractZipBtn) {
+  extractZipBtn.replaceWith(extractZipBtn.cloneNode(true));
+  document.getElementById("extractZipBtn").addEventListener("click", handleExtractZipSelected);
 }
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -720,6 +854,7 @@ document.addEventListener("DOMContentLoaded", function () {
       document.getElementById("downloadZipModal").style.display = "none";
     });
   }
+  
   const confirmDownloadZip = document.getElementById("confirmDownloadZip");
   if (confirmDownloadZip) {
     confirmDownloadZip.addEventListener("click", function () {
@@ -1007,7 +1142,7 @@ function adjustEditorSize() {
   if (modal && window.currentEditor) {
     // Calculate available height for the editor.
     // If you have a header or footer inside the modal, subtract their heights.
-    const headerHeight = 60;
+    const headerHeight = 60; // adjust this value as needed
     const availableHeight = modal.clientHeight - headerHeight;
     window.currentEditor.setSize("100%", availableHeight + "px");
   }
@@ -1035,7 +1170,7 @@ export function editFile(fileName, folder) {
   fetch(fileUrl, { method: "HEAD" })
     .then(response => {
       const contentLength = response.headers.get("Content-Length");
-      if (!contentLength || parseInt(contentLength) > 10485760) {
+      if (contentLength !== null && parseInt(contentLength) > 10485760) {
         showToast("This file is larger than 10 MB and cannot be edited in the browser.");
         throw new Error("File too large.");
       }
@@ -1054,12 +1189,12 @@ export function editFile(fileName, folder) {
       modal.innerHTML = `
       <div class="editor-header">
         <h3 class="editor-title">Editing: ${fileName}</h3>
+        <div class="editor-controls">
+           <button id="decreaseFont" class="btn btn-sm btn-secondary">A-</button>
+           <button id="increaseFont" class="btn btn-sm btn-secondary">A+</button>
+        </div>
         <button id="closeEditorX" class="editor-close-btn">&times;</button>
       </div>
-      <div id="editorControls" class="editor-controls">
-         <button id="decreaseFont" class="btn btn-sm btn-secondary">A-</button>
-         <button id="increaseFont" class="btn btn-sm btn-secondary">A+</button>
-      </div>
       <textarea id="fileEditor" class="editor-textarea">${content}</textarea>
       <div class="editor-footer">
         <button id="saveBtn" class="btn btn-primary">Save</button>
@@ -1157,13 +1292,17 @@ export function saveFile(fileName, folder) {
 }
 
 export function displayFilePreview(file, container) {
+  // Use the underlying File object if it exists (for resumable files)
+  const actualFile = file.file || file;
   container.style.display = "inline-block";
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
+  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(actualFile.name)) {
     const img = document.createElement("img");
-    img.src = URL.createObjectURL(file);
+    img.src = URL.createObjectURL(actualFile);
     img.classList.add("file-preview-img");
+    container.innerHTML = ""; // Clear previous content
     container.appendChild(img);
   } else {
+    container.innerHTML = ""; // Clear previous content
     const iconSpan = document.createElement("span");
     iconSpan.classList.add("material-icons", "file-icon");
     iconSpan.textContent = "insert_drive_file";
@@ -1192,13 +1331,28 @@ export function initFileActions() {
     downloadZipBtn.replaceWith(downloadZipBtn.cloneNode(true));
     document.getElementById("downloadZipBtn").addEventListener("click", handleDownloadZipSelected);
   }
+  const extractZipBtn = document.getElementById("extractZipBtn");
+  if (extractZipBtn) {
+    extractZipBtn.replaceWith(extractZipBtn.cloneNode(true));
+    document.getElementById("extractZipBtn").addEventListener("click", handleExtractZipSelected);
+  }
 }
-
+attachEnterKeyListener("renameFileModal", "submitRenameFile");
 export function renameFile(oldName, folder) {
   window.fileToRename = oldName;
   window.fileFolder = folder || window.currentFolder || "root";
   document.getElementById("newFileName").value = oldName;
   document.getElementById("renameFileModal").style.display = "block";
+  setTimeout(() => {
+    const input = document.getElementById("newFileName");
+    input.focus();
+    const lastDot = oldName.lastIndexOf('.');
+    if (lastDot > 0) {
+      input.setSelectionRange(0, lastDot);
+    } else {
+      input.select();
+    }
+  }, 100);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -1209,6 +1363,7 @@ document.addEventListener("DOMContentLoaded", () => {
       document.getElementById("newFileName").value = "";
     });
   }
+
   const submitBtn = document.getElementById("submitRenameFile");
   if (submitBtn) {
     submitBtn.addEventListener("click", function () {
@@ -1269,4 +1424,186 @@ document.addEventListener("DOMContentLoaded", function () {
     el.addEventListener("dragleave", folderDragLeaveHandler);
     el.addEventListener("drop", folderDropHandler);
   });
-});
+});
+
+document.addEventListener("keydown", function(e) {
+  // Skip if focus is on an input, textarea, or any contentEditable element.
+  const tag = e.target.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea" || e.target.isContentEditable) {
+    return;
+  }
+  // On Mac, the delete key is often reported as "Backspace" (keyCode 8)
+  if (e.key === "Delete" || e.key === "Backspace" || e.keyCode === 46 || e.keyCode === 8) {
+    const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
+    if (selectedCheckboxes.length > 0) {
+      e.preventDefault(); // Prevent default back navigation in some browsers.
+      handleDeleteSelected(new Event("click"));
+    }
+  }
+});
+
+// ---------- CONTEXT MENU SUPPORT FOR FILE LIST ----------
+
+// Function to display the context menu with provided items at (x, y)
+// Function to display the context menu with provided items at (x, y)
+function showFileContextMenu(x, y, menuItems) {
+  let menu = document.getElementById("fileContextMenu");
+  if (!menu) {
+    menu = document.createElement("div");
+    menu.id = "fileContextMenu";
+    // Use fixed positioning so the menu is relative to the viewport
+    menu.style.position = "fixed";
+    menu.style.backgroundColor = "#fff";
+    menu.style.border = "1px solid #ccc";
+    menu.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.2)";
+    menu.style.zIndex = "9999";
+    menu.style.padding = "5px 0";
+    menu.style.minWidth = "150px";
+    document.body.appendChild(menu);
+  }
+  // Clear previous items
+  menu.innerHTML = "";
+  menuItems.forEach(item => {
+    let menuItem = document.createElement("div");
+    menuItem.textContent = item.label;
+    menuItem.style.padding = "5px 15px";
+    menuItem.style.cursor = "pointer";
+    menuItem.addEventListener("mouseover", () => {
+      menuItem.style.backgroundColor = document.body.classList.contains("dark-mode") ? "#444" : "#f0f0f0";
+    });
+    menuItem.addEventListener("mouseout", () => {
+      menuItem.style.backgroundColor = "";
+    });
+    menuItem.addEventListener("click", () => {
+      item.action();
+      hideFileContextMenu();
+    });
+    menu.appendChild(menuItem);
+  });
+  
+  // Use the event's clientX and clientY coordinates (which are viewport-relative)
+  menu.style.left = x + "px";
+  menu.style.top = y + "px";
+  menu.style.display = "block";
+  
+  // Adjust if the menu would extend past the bottom of the viewport
+  const menuRect = menu.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  if (menuRect.bottom > viewportHeight) {
+    let newTop = viewportHeight - menuRect.height;
+    if (newTop < 0) newTop = 0;
+    menu.style.top = newTop + "px";
+  }
+}
+
+function hideFileContextMenu() {
+  const menu = document.getElementById("fileContextMenu");
+  if (menu) {
+    menu.style.display = "none";
+  }
+}
+
+// Context menu handler for the file list.
+function fileListContextMenuHandler(e) {
+  e.preventDefault();
+  
+  // If no file is selected, try to select the row that was right-clicked.
+  let row = e.target.closest("tr");
+  if (row) {
+    const checkbox = row.querySelector(".file-checkbox");
+    if (checkbox && !checkbox.checked) {
+      checkbox.checked = true;
+      updateRowHighlight(checkbox);
+      updateFileActionButtons();
+    }
+  }
+  
+  // Get selected file names.
+  const selected = Array.from(document.querySelectorAll("#fileList .file-checkbox:checked")).map(chk => chk.value);
+  
+  // Build the context menu items.
+  let menuItems = [
+    { label: "Delete Selected", action: () => { handleDeleteSelected(new Event("click")); } },
+    { label: "Copy Selected", action: () => { handleCopySelected(new Event("click")); } },
+    { label: "Move Selected", action: () => { handleMoveSelected(new Event("click")); } },
+    { label: "Download Zip", action: () => { handleDownloadZipSelected(new Event("click")); } }
+  ];
+  
+  if (selected.some(name => name.toLowerCase().endsWith(".zip"))) {
+    menuItems.push({
+      label: "Extract Zip",
+      action: () => { handleExtractZipSelected(new Event("click")); }
+    });
+  }
+  
+  // If multiple files are selected, add a "Tag Selected" option.
+  if (selected.length > 1) {
+    menuItems.push({
+      label: "Tag Selected",
+      action: () => {
+        const files = fileData.filter(f => selected.includes(f.name));
+        openMultiTagModal(files);
+      }
+    });
+  }
+  // If exactly one file is selected, add options specific to that file.
+  else if (selected.length === 1) {
+    const file = fileData.find(f => f.name === selected[0]);
+    
+    menuItems.push({
+      label: "Preview",
+      action: () => {
+        const folder = window.currentFolder || "root";
+        const folderPath = folder === "root"
+          ? "uploads/"
+          : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
+        previewFile(folderPath + encodeURIComponent(file.name) + "?t=" + new Date().getTime(), file.name);
+      }
+    });
+    
+    if (canEditFile(file.name)) {
+      menuItems.push({
+        label: "Edit",
+        action: () => { editFile(selected[0], window.currentFolder); }
+      });
+    }
+    
+    menuItems.push({
+      label: "Rename",
+      action: () => { renameFile(selected[0], window.currentFolder); }
+    });
+    
+    menuItems.push({
+      label: "Tag File",
+      action: () => { openTagModal(file); }
+    });
+  }
+  
+  showFileContextMenu(e.clientX, e.clientY, menuItems);
+}
+
+// Bind the context menu to the file list container.
+// (This is set every time the file list is rendered.)
+function bindFileListContextMenu() {
+  const fileListContainer = document.getElementById("fileList");
+  if (fileListContainer) {
+    fileListContainer.oncontextmenu = fileListContextMenuHandler;
+  }
+}
+
+// Hide the context menu if clicking anywhere else.
+document.addEventListener("click", function(e) {
+  const menu = document.getElementById("fileContextMenu");
+  if (menu && menu.style.display === "block") {
+    hideFileContextMenu();
+  }
+});
+
+// After rendering the file table, bind the context menu handler.
+(function() {
+  const originalRenderFileTable = renderFileTable;
+  renderFileTable = function(folder) {
+    originalRenderFileTable(folder);
+    bindFileListContextMenu();
+  };
+})();

fileTags.js

@@ -0,0 +1,466 @@
+// fileTags.js
+// This module provides functions for opening the tag modal,
+// adding tags to files (with a global tag store for reuse),
+// updating the file row display with tag badges,
+// filtering the file list by tag, and persisting tag data.
+import { escapeHTML } from './domUtils.js';
+
+export function openTagModal(file) {
+  // Create the modal element.
+  let modal = document.createElement('div');
+  modal.id = 'tagModal';
+  modal.className = 'modal';
+  modal.innerHTML = `
+    <div class="modal-content" style="width: 400px; max-width:90vw;">
+      <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
+        <h3 style="margin:0;">Tag File: ${file.name}</h3>
+        <span id="closeTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
+      </div>
+      <div class="modal-body" style="margin-top:10px;">
+        <label for="tagNameInput">Tag Name:</label>
+        <input type="text" id="tagNameInput" placeholder="Enter tag name" style="width:100%; padding:5px;"/>
+        <br><br>
+        <label for="tagColorInput">Tag Color:</label>
+        <input type="color" id="tagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
+        <br><br>
+        <div id="customTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;">
+          <!-- Custom tag options will be populated here -->
+        </div>
+        <br>
+        <div style="text-align:right;">
+          <button id="saveTagBtn" class="btn btn-primary">Save Tag</button>
+        </div>
+        <div id="currentTags" style="margin-top:10px; font-size:0.9em;">
+          <!-- Existing tags will be listed here -->
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+  modal.style.display = 'block';
+
+  updateCustomTagDropdown();
+
+  document.getElementById('closeTagModal').addEventListener('click', () => {
+    modal.remove();
+  });
+
+  updateTagModalDisplay(file);
+
+  document.getElementById('tagNameInput').addEventListener('input', (e) => {
+    updateCustomTagDropdown(e.target.value);
+  });
+
+  document.getElementById('saveTagBtn').addEventListener('click', () => {
+    const tagName = document.getElementById('tagNameInput').value.trim();
+    const tagColor = document.getElementById('tagColorInput').value;
+    if (!tagName) {
+      alert('Please enter a tag name.');
+      return;
+    }
+    addTagToFile(file, { name: tagName, color: tagColor });
+    updateTagModalDisplay(file);
+    updateFileRowTagDisplay(file);
+    saveFileTags(file);
+    document.getElementById('tagNameInput').value = '';
+    updateCustomTagDropdown();
+  });
+}
+
+/**
+ * Open a modal to tag multiple files.
+ * @param {Array} files - Array of file objects to tag.
+ */
+export function openMultiTagModal(files) {
+  let modal = document.createElement('div');
+  modal.id = 'multiTagModal';
+  modal.className = 'modal';
+  modal.innerHTML = `
+    <div class="modal-content" style="width: 400px; max-width:90vw;">
+      <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
+        <h3 style="margin:0;">Tag Selected Files (${files.length})</h3>
+        <span id="closeMultiTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
+      </div>
+      <div class="modal-body" style="margin-top:10px;">
+        <label for="multiTagNameInput">Tag Name:</label>
+        <input type="text" id="multiTagNameInput" placeholder="Enter tag name" style="width:100%; padding:5px;"/>
+        <br><br>
+        <label for="multiTagColorInput">Tag Color:</label>
+        <input type="color" id="multiTagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
+        <br><br>
+        <div id="multiCustomTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;">
+          <!-- Custom tag options will be populated here -->
+        </div>
+        <br>
+        <div style="text-align:right;">
+          <button id="saveMultiTagBtn" class="btn btn-primary">Save Tag to Selected</button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+  modal.style.display = 'block';
+
+  updateMultiCustomTagDropdown();
+
+  document.getElementById('closeMultiTagModal').addEventListener('click', () => {
+    modal.remove();
+  });
+
+  document.getElementById('multiTagNameInput').addEventListener('input', (e) => {
+    updateMultiCustomTagDropdown(e.target.value);
+  });
+
+  document.getElementById('saveMultiTagBtn').addEventListener('click', () => {
+    const tagName = document.getElementById('multiTagNameInput').value.trim();
+    const tagColor = document.getElementById('multiTagColorInput').value;
+    if (!tagName) {
+      alert('Please enter a tag name.');
+      return;
+    }
+    files.forEach(file => {
+      addTagToFile(file, { name: tagName, color: tagColor });
+      updateFileRowTagDisplay(file);
+      saveFileTags(file);
+    });
+    modal.remove();
+  });
+}
+
+/**
+ * Update the custom dropdown for multi-tag modal.
+ * Similar to updateCustomTagDropdown but includes a remove icon.
+ */
+function updateMultiCustomTagDropdown(filterText = "") {
+  const dropdown = document.getElementById("multiCustomTagDropdown");
+  if (!dropdown) return;
+  dropdown.innerHTML = "";
+  let tags = window.globalTags || [];
+  if (filterText) {
+    tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
+  }
+  if (tags.length > 0) {
+    tags.forEach(tag => {
+      const item = document.createElement("div");
+      item.style.cursor = "pointer";
+      item.style.padding = "5px";
+      item.style.borderBottom = "1px solid #eee";
+      // Display colored square and tag name with remove icon.
+      item.innerHTML = `
+        <span style="display:inline-block; width:16px; height:16px; background-color:${tag.color}; border:1px solid #ccc; margin-right:5px; vertical-align:middle;"></span>
+        ${escapeHTML(tag.name)}
+        <span class="global-remove" style="color:red; font-weight:bold; margin-left:5px; cursor:pointer;">×</span>
+      `;
+      item.addEventListener("click", function(e) {
+        if (e.target.classList.contains("global-remove")) return;
+        document.getElementById("multiTagNameInput").value = tag.name;
+        document.getElementById("multiTagColorInput").value = tag.color;
+      });
+      item.querySelector('.global-remove').addEventListener("click", function(e){
+        e.stopPropagation();
+        removeGlobalTag(tag.name);
+      });
+      dropdown.appendChild(item);
+    });
+  } else {
+    dropdown.innerHTML = "<div style='padding:5px;'>No tags available</div>";
+  }
+}
+
+function updateCustomTagDropdown(filterText = "") {
+  const dropdown = document.getElementById("customTagDropdown");
+  if (!dropdown) return;
+  dropdown.innerHTML = "";
+  let tags = window.globalTags || [];
+  if (filterText) {
+    tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
+  }
+  if (tags.length > 0) {
+    tags.forEach(tag => {
+      const item = document.createElement("div");
+      item.style.cursor = "pointer";
+      item.style.padding = "5px";
+      item.style.borderBottom = "1px solid #eee";
+      item.innerHTML = `
+        <span style="display:inline-block; width:16px; height:16px; background-color:${tag.color}; border:1px solid #ccc; margin-right:5px; vertical-align:middle;"></span>
+        ${escapeHTML(tag.name)}
+        <span class="global-remove" style="color:red; font-weight:bold; margin-left:5px; cursor:pointer;">×</span>
+      `;
+      item.addEventListener("click", function(e){
+        if (e.target.classList.contains('global-remove')) return;
+        document.getElementById("tagNameInput").value = tag.name;
+        document.getElementById("tagColorInput").value = tag.color;
+      });
+      item.querySelector('.global-remove').addEventListener("click", function(e){
+        e.stopPropagation();
+        removeGlobalTag(tag.name);
+      });
+      dropdown.appendChild(item);
+    });
+  } else {
+    dropdown.innerHTML = "<div style='padding:5px;'>No tags available</div>";
+  }
+}
+    
+// Update the modal display to show current tags on the file.
+function updateTagModalDisplay(file) {
+  const container = document.getElementById('currentTags');
+  if (!container) return;
+  container.innerHTML = '<strong>Current Tags:</strong> ';
+  if (file.tags && file.tags.length > 0) {
+    file.tags.forEach(tag => {
+      const tagElem = document.createElement('span');
+      tagElem.textContent = tag.name;
+      tagElem.style.backgroundColor = tag.color;
+      tagElem.style.color = '#fff';
+      tagElem.style.padding = '2px 6px';
+      tagElem.style.marginRight = '5px';
+      tagElem.style.borderRadius = '3px';
+      tagElem.style.display = 'inline-block';
+      tagElem.style.position = 'relative';
+      
+      const removeIcon = document.createElement('span');
+      removeIcon.textContent = ' ✕';
+      removeIcon.style.fontWeight = 'bold';
+      removeIcon.style.marginLeft = '3px';
+      removeIcon.style.cursor = 'pointer';
+      
+      removeIcon.addEventListener('click', (e) => {
+        e.stopPropagation();
+        removeTagFromFile(file, tag.name);
+      });
+      
+      tagElem.appendChild(removeIcon);
+      container.appendChild(tagElem);
+    });
+  } else {
+    container.innerHTML += 'None';
+  }
+}
+
+function removeTagFromFile(file, tagName) {
+  file.tags = file.tags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
+  updateTagModalDisplay(file);
+  updateFileRowTagDisplay(file);
+  saveFileTags(file);
+}
+
+/**
+ * Remove a tag from the global tag store.
+ * This function updates window.globalTags and calls the backend endpoint
+ * to remove the tag from the persistent store.
+ */
+function removeGlobalTag(tagName) {
+  window.globalTags = window.globalTags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
+  localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+  updateCustomTagDropdown();
+  updateMultiCustomTagDropdown();
+  saveGlobalTagRemoval(tagName);
+}
+
+// NEW: Save global tag removal to the server.
+function saveGlobalTagRemoval(tagName) {
+  fetch("saveFileTag.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify({
+      folder: "root",
+      file: "global",
+      deleteGlobal: true,
+      tagToDelete: tagName,
+      tags: []
+    })
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        console.log("Global tag removed:", tagName);
+        if (data.globalTags) {
+          window.globalTags = data.globalTags;
+          localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+          updateCustomTagDropdown();
+          updateMultiCustomTagDropdown();
+        }
+      } else {
+        console.error("Error removing global tag:", data.error);
+      }
+    })
+    .catch(err => {
+      console.error("Error removing global tag:", err);
+    });
+}
+  
+// Global store for reusable tags.
+window.globalTags = window.globalTags || [];
+if (localStorage.getItem('globalTags')) {
+  try {
+    window.globalTags = JSON.parse(localStorage.getItem('globalTags'));
+  } catch (e) { }
+}
+  
+// New function to load global tags from the server's persistent JSON.
+export function loadGlobalTags() {
+  fetch("metadata/createdTags.json", { credentials: "include" })
+    .then(response => {
+      if (!response.ok) {
+        // If the file doesn't exist, assume there are no global tags.
+        return [];
+      }
+      return response.json();
+    })
+    .then(data => {
+      window.globalTags = data;
+      localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+      updateCustomTagDropdown();
+      updateMultiCustomTagDropdown();
+    })
+    .catch(err => {
+      console.error("Error loading global tags:", err);
+      window.globalTags = [];
+      updateCustomTagDropdown();
+      updateMultiCustomTagDropdown();
+    });
+}
+  
+loadGlobalTags();
+  
+// Add (or update) a tag in the file object.
+export function addTagToFile(file, tag) {
+  if (!file.tags) {
+    file.tags = [];
+  }
+  const exists = file.tags.find(t => t.name.toLowerCase() === tag.name.toLowerCase());
+  if (exists) {
+    exists.color = tag.color;
+  } else {
+    file.tags.push(tag);
+  }
+  const globalExists = window.globalTags.find(t => t.name.toLowerCase() === tag.name.toLowerCase());
+  if (!globalExists) {
+    window.globalTags.push(tag);
+    localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+  }
+}
+  
+// Update the file row (in table view) to show tag badges.
+export function updateFileRowTagDisplay(file) {
+  const rows = document.querySelectorAll(`[id^="file-row-${encodeURIComponent(file.name)}"]`);
+  console.log('Updating tags for rows:', rows);
+  rows.forEach(row => {
+    let cell = row.querySelector('.file-name-cell');
+    if (cell) {
+      let badgeContainer = cell.querySelector('.tag-badges');
+      if (!badgeContainer) {
+        badgeContainer = document.createElement('div');
+        badgeContainer.className = 'tag-badges';
+        badgeContainer.style.display = 'inline-block';
+        badgeContainer.style.marginLeft = '5px';
+        cell.appendChild(badgeContainer);
+      }
+      badgeContainer.innerHTML = '';
+      if (file.tags && file.tags.length > 0) {
+        file.tags.forEach(tag => {
+          const badge = document.createElement('span');
+          badge.textContent = tag.name;
+          badge.style.backgroundColor = tag.color;
+          badge.style.color = '#fff';
+          badge.style.padding = '2px 4px';
+          badge.style.marginRight = '2px';
+          badge.style.borderRadius = '3px';
+          badge.style.fontSize = '0.8em';
+          badge.style.verticalAlign = 'middle';
+          badgeContainer.appendChild(badge);
+        });
+      }
+    }
+  });
+}
+  
+export function initTagSearch() {
+  const searchInput = document.getElementById('searchInput');
+  if (searchInput) {
+    let tagSearchInput = document.getElementById('tagSearchInput');
+    if (!tagSearchInput) {
+      tagSearchInput = document.createElement('input');
+      tagSearchInput.id = 'tagSearchInput';
+      tagSearchInput.placeholder = 'Filter by tag';
+      tagSearchInput.style.marginLeft = '10px';
+      tagSearchInput.style.padding = '5px';
+      searchInput.parentNode.insertBefore(tagSearchInput, searchInput.nextSibling);
+      tagSearchInput.addEventListener('input', () => {
+        window.currentTagFilter = tagSearchInput.value.trim().toLowerCase();
+        if (window.currentFolder) {
+          renderFileTable(window.currentFolder);
+        }
+      });
+    }
+  }
+}
+  
+export function filterFilesByTag(files) {
+  if (window.currentTagFilter && window.currentTagFilter !== '') {
+    return files.filter(file => {
+      if (file.tags && file.tags.length > 0) {
+        return file.tags.some(tag => tag.name.toLowerCase().includes(window.currentTagFilter));
+      }
+      return false;
+    });
+  }
+  return files;
+}
+  
+function updateGlobalTagList() {
+  const dataList = document.getElementById("globalTagList");
+  if (dataList) {
+    dataList.innerHTML = "";
+    window.globalTags.forEach(tag => {
+      const option = document.createElement("option");
+      option.value = tag.name;
+      dataList.appendChild(option);
+    });
+  }
+}
+  
+export function saveFileTags(file, deleteGlobal = false, tagToDelete = null) {
+  const folder = file.folder || "root";
+  const payload = {
+    folder: folder,
+    file: file.name,
+    tags: file.tags
+  };
+  if (deleteGlobal && tagToDelete) {
+    payload.file = "global";
+    payload.deleteGlobal = true;
+    payload.tagToDelete = tagToDelete;
+  }
+  fetch("saveFileTag.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify(payload)
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        console.log("Tags saved:", data);
+        if (data.globalTags) {
+          window.globalTags = data.globalTags;
+          localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+          updateCustomTagDropdown();
+          updateMultiCustomTagDropdown();
+        }
+      } else {
+        console.error("Error saving tags:", data.error);
+      }
+    })
+    .catch(err => {
+      console.error("Error saving tags:", err);
+    });
+}

folderManager.js

@@ -1,11 +1,11 @@
 // folderManager.js
 
 import { loadFileList } from './fileManager.js';
-import { showToast, escapeHTML } from './domUtils.js';
+import { showToast, escapeHTML, attachEnterKeyListener } from './domUtils.js';
 
-// ----------------------
-// Helper Functions (Data/State)
-// ----------------------
+/* ----------------------
+   Helper Functions (Data/State)
+----------------------*/
 
 // Formats a folder name for display (e.g. adding indentations).
 export function formatFolderName(folder) {
@@ -26,7 +26,6 @@ export function formatFolderName(folder) {
 function buildFolderTree(folders) {
   const tree = {};
   folders.forEach(folderPath => {
-    // Ensure folderPath is a string
     if (typeof folderPath !== "string") return;
     const parts = folderPath.split('/');
     let current = tree;
@@ -40,9 +39,9 @@ function buildFolderTree(folders) {
   return tree;
 }
 
-// ----------------------
-// Folder Tree State (Save/Load)
-// ----------------------
+/* ----------------------
+   Folder Tree State (Save/Load)
+----------------------*/
 function loadFolderTreeState() {
   const state = localStorage.getItem("folderTreeState");
   return state ? JSON.parse(state) : {};
@@ -59,31 +58,151 @@ function getParentFolder(folder) {
   return lastSlash === -1 ? "root" : folder.substring(0, lastSlash);
 }
 
-// ----------------------
-// DOM Building Functions
-// ----------------------
+/* ----------------------
+   Breadcrumb Functions
+----------------------*/
+function renderBreadcrumb(normalizedFolder) {
+  if (!normalizedFolder || normalizedFolder === "") return "";
+  const parts = normalizedFolder.split("/");
+  let breadcrumbItems = [];
+  // Use the first segment as the root.
+  breadcrumbItems.push(`<span class="breadcrumb-link" data-folder="${parts[0]}">${escapeHTML(parts[0])}</span>`);
+  let cumulative = parts[0];
+  parts.slice(1).forEach(part => {
+    cumulative += "/" + part;
+    breadcrumbItems.push(`<span class="breadcrumb-separator"> / </span>`);
+    breadcrumbItems.push(`<span class="breadcrumb-link" data-folder="${cumulative}">${escapeHTML(part)}</span>`);
+  });
+  return breadcrumbItems.join('');
+}
 
-// Recursively builds HTML for the folder tree as nested <ul> elements.
+function bindBreadcrumbEvents() {
+  const breadcrumbLinks = document.querySelectorAll(".breadcrumb-link");
+  breadcrumbLinks.forEach(link => {
+    link.addEventListener("click", function (e) {
+      e.stopPropagation();
+      let folder = this.getAttribute("data-folder");
+      window.currentFolder = folder;
+      localStorage.setItem("lastOpenedFolder", folder);
+      const titleEl = document.getElementById("fileListTitle");
+      titleEl.innerHTML = "Files in (" + renderBreadcrumb(folder) + ")";
+      expandTreePath(folder);
+      document.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected"));
+      const targetOption = document.querySelector(`.folder-option[data-folder="${folder}"]`);
+      if (targetOption) targetOption.classList.add("selected");
+      loadFileList(folder);
+      bindBreadcrumbEvents();
+    });
+    link.addEventListener("dragover", function (e) {
+      e.preventDefault();
+      this.classList.add("drop-hover");
+    });
+    link.addEventListener("dragleave", function (e) {
+      this.classList.remove("drop-hover");
+    });
+    link.addEventListener("drop", function (e) {
+      e.preventDefault();
+      this.classList.remove("drop-hover");
+      const dropFolder = this.getAttribute("data-folder");
+      let dragData;
+      try {
+        dragData = JSON.parse(e.dataTransfer.getData("application/json"));
+      } catch (err) {
+        console.error("Invalid drag data on breadcrumb:", err);
+        return;
+      }
+      const filesToMove = dragData.files ? dragData.files : (dragData.fileName ? [dragData.fileName] : []);
+      if (filesToMove.length === 0) return;
+      fetch("moveFiles.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
+        },
+        body: JSON.stringify({
+          source: dragData.sourceFolder,
+          files: filesToMove,
+          destination: dropFolder
+        })
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast(`File(s) moved successfully to ${dropFolder}!`);
+          loadFileList(dragData.sourceFolder);
+        } else {
+          showToast("Error moving files: " + (data.error || "Unknown error"));
+        }
+      })
+      .catch(error => {
+        console.error("Error moving files via drop on breadcrumb:", error);
+        showToast("Error moving files.");
+      });
+    });
+  });
+}
+
+/* ----------------------
+   Check Current User's Folder-Only Permission
+----------------------*/
+// This function uses localStorage values (set during login) to determine if the current user is restricted.
+// If folderOnly is "true", then the personal folder (i.e. username) is forced as the effective root.
+function checkUserFolderPermission() {
+  const username = localStorage.getItem("username");
+  console.log("checkUserFolderPermission: username =", username);
+  if (!username) {
+    console.warn("No username in localStorage; skipping getUserPermissions fetch.");
+    return Promise.resolve(false);
+  }
+  if (localStorage.getItem("folderOnly") === "true") {
+    window.userFolderOnly = true;
+    console.log("checkUserFolderPermission: using localStorage.folderOnly = true");
+    localStorage.setItem("lastOpenedFolder", username);
+    window.currentFolder = username;
+    return Promise.resolve(true);
+  }
+  return fetch("getUserPermissions.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(permissionsData => {
+      console.log("checkUserFolderPermission: permissionsData =", permissionsData);
+      if (permissionsData && permissionsData[username] && permissionsData[username].folderOnly) {
+        window.userFolderOnly = true;
+        localStorage.setItem("folderOnly", "true");
+        localStorage.setItem("lastOpenedFolder", username);
+        window.currentFolder = username;
+        return true;
+      } else {
+        window.userFolderOnly = false;
+        localStorage.setItem("folderOnly", "false");
+        return false;
+      }
+    })
+    .catch(err => {
+      console.error("Error fetching user permissions:", err);
+      window.userFolderOnly = false;
+      return false;
+    });
+}
+
+/* ----------------------
+   DOM Building Functions for Folder Tree
+----------------------*/
 function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
   const state = loadFolderTreeState();
   let html = `<ul class="folder-tree ${defaultDisplay === 'none' ? 'collapsed' : 'expanded'}">`;
   for (const folder in tree) {
-    // Skip the trash folder (case-insensitive)
-    if (folder.toLowerCase() === "trash") {
-      continue;
-    }
-    
+    if (folder.toLowerCase() === "trash") continue;
     const fullPath = parentPath ? parentPath + "/" + folder : folder;
     const hasChildren = Object.keys(tree[folder]).length > 0;
     const displayState = state[fullPath] !== undefined ? state[fullPath] : defaultDisplay;
     html += `<li class="folder-item">`;
     if (hasChildren) {
-      const toggleSymbol = (displayState === "none") ? "[+]" : "[-]";
+      const toggleSymbol = (displayState === 'none') ? '[+]' : '[' + '<span class="custom-dash">-</span>' + ']';
       html += `<span class="folder-toggle" data-folder="${fullPath}">${toggleSymbol}</span>`;
     } else {
       html += `<span class="folder-indent-placeholder"></span>`;
     }
-    // Use escapeHTML to safely render the folder name.
     html += `<span class="folder-option" data-folder="${fullPath}">${escapeHTML(folder)}</span>`;
     if (hasChildren) {
       html += renderFolderTree(tree[folder], fullPath, displayState);
@@ -94,7 +213,6 @@ function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
   return html;
 }
 
-// Expands the folder tree along a given path.
 function expandTreePath(path) {
   const parts = path.split("/");
   let cumulative = "";
@@ -109,7 +227,7 @@ function expandTreePath(path) {
         nestedUl.classList.add("expanded");
         const toggle = li.querySelector(".folder-toggle");
         if (toggle) {
-          toggle.textContent = "[-]";
+          toggle.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
           let state = loadFolderTreeState();
           state[cumulative] = "block";
           saveFolderTreeState(state);
@@ -119,22 +237,18 @@ function expandTreePath(path) {
   });
 }
 
-// ----------------------
-// Drag & Drop Support for Folder Tree Nodes
-// ----------------------
-
-// When a draggable file is dragged over a folder node, allow the drop and add a visual cue.
+/* ----------------------
+   Drag & Drop Support for Folder Tree Nodes
+----------------------*/
 function folderDragOverHandler(event) {
   event.preventDefault();
   event.currentTarget.classList.add("drop-hover");
 }
 
-// Remove the visual cue when the drag leaves.
 function folderDragLeaveHandler(event) {
   event.currentTarget.classList.remove("drop-hover");
 }
 
-// When a file is dropped onto a folder node, send a move request.
 function folderDropHandler(event) {
   event.preventDefault();
   event.currentTarget.classList.remove("drop-hover");
@@ -143,10 +257,9 @@ function folderDropHandler(event) {
   try {
     dragData = JSON.parse(event.dataTransfer.getData("application/json"));
   } catch (e) {
-    console.error("Invalid drag data");
+    console.error("Invalid drag data", e);
     return;
   }
-  // Use the files array if present, or fall back to a single file.
   const filesToMove = dragData.files ? dragData.files : (dragData.fileName ? [dragData.fileName] : []);
   if (filesToMove.length === 0) return;
   fetch("moveFiles.php", {
@@ -177,85 +290,110 @@ function folderDropHandler(event) {
     });
 }
 
-// ----------------------
-// Main Folder Tree Rendering and Event Binding
-// ----------------------
+/* ----------------------
+   Main Folder Tree Rendering and Event Binding
+----------------------*/
 export async function loadFolderTree(selectedFolder) {
   try {
-    const response = await fetch('getFolderList.php');
+    // Check if the user has folder-only permission.
+    await checkUserFolderPermission();
+    
+    // Determine effective root folder.
+    const username = localStorage.getItem("username") || "root";
+    let effectiveRoot = "root";
+    let effectiveLabel = "(Root)";
+    if (window.userFolderOnly) {
+      effectiveRoot = username; // Use the username as the personal root.
+      effectiveLabel = `(Root)`;
+      // Force override of any saved folder.
+      localStorage.setItem("lastOpenedFolder", username);
+      window.currentFolder = username;
+    } else {
+      window.currentFolder = localStorage.getItem("lastOpenedFolder") || "root";
+    }
+    
+    // Build fetch URL.
+    let fetchUrl = 'getFolderList.php';
+    if (window.userFolderOnly) {
+      fetchUrl += '?restricted=1';
+    }
+    console.log("Fetching folder list from:", fetchUrl);
+    
+    // Fetch folder list from the server.
+    const response = await fetch(fetchUrl);
     if (response.status === 401) {
       console.error("Unauthorized: Please log in to view folders.");
       showToast("Session expired. Please log in again.");
       window.location.href = "logout.php";
       return;
     }
-    let folders = await response.json();
-
-    // If returned items are objects (with a "folder" property), extract folder paths.
-    if (Array.isArray(folders) && folders.length && typeof folders[0] === "object" && folders[0].folder) {
-      folders = folders.map(item => item.folder);
+    let folderData = await response.json();
+    console.log("Folder data received:", folderData);
+    let folders = [];
+    if (Array.isArray(folderData) && folderData.length && typeof folderData[0] === "object" && folderData[0].folder) {
+      folders = folderData.map(item => item.folder);
+    } else if (Array.isArray(folderData)) {
+      folders = folderData;
     }
-    // Filter out duplicate "root" entries if present.
-    folders = folders.filter(folder => folder !== "root");
-
-    if (!Array.isArray(folders)) {
-      console.error("Folder list response is not an array:", folders);
-      return;
+    
+    // Remove any global "root" entry.
+    folders = folders.filter(folder => folder.toLowerCase() !== "root");
+    
+    // If restricted, filter folders: keep only those that start with effectiveRoot + "/" (do not include effectiveRoot itself).
+    if (window.userFolderOnly && effectiveRoot !== "root") {
+      folders = folders.filter(folder => folder.startsWith(effectiveRoot + "/"));
+      // Force current folder to be the effective root.
+      localStorage.setItem("lastOpenedFolder", effectiveRoot);
+      window.currentFolder = effectiveRoot;
     }
-
+    
+    localStorage.setItem("lastOpenedFolder", window.currentFolder);
+    
+    // Render the folder tree.
     const container = document.getElementById("folderTreeContainer");
     if (!container) {
       console.error("Folder tree container not found.");
       return;
     }
-
+    
     let html = `<div id="rootRow" class="root-row">
-                  <span class="folder-toggle" data-folder="root">[-]</span>
-                  <span class="folder-option root-folder-option" data-folder="root">(Root)</span>
-                </div>`;
-    if (folders.length === 0) {
-      html += `<ul class="folder-tree expanded">
-                 <li class="folder-item">
-                   <span class="folder-option" data-folder="root">(Root)</span>
-                 </li>
-               </ul>`;
-    } else {
+      <span class="folder-toggle" data-folder="${effectiveRoot}">[<span class="custom-dash">-</span>]</span>
+      <span class="folder-option root-folder-option" data-folder="${effectiveRoot}">${effectiveLabel}</span>
+    </div>`;
+    if (folders.length > 0) {
       const tree = buildFolderTree(folders);
       html += renderFolderTree(tree, "", "block");
     }
     container.innerHTML = html;
-
-    // Attach drag-and-drop event listeners to folder nodes.
+    
+    // Attach drag/drop event listeners.
     container.querySelectorAll(".folder-option").forEach(el => {
       el.addEventListener("dragover", folderDragOverHandler);
       el.addEventListener("dragleave", folderDragLeaveHandler);
       el.addEventListener("drop", folderDropHandler);
     });
-
-    // Determine current folder.
+    
     if (selectedFolder) {
       window.currentFolder = selectedFolder;
-    } else {
-      window.currentFolder = localStorage.getItem("lastOpenedFolder") || "root";
     }
     localStorage.setItem("lastOpenedFolder", window.currentFolder);
-    document.getElementById("fileListTitle").textContent =
-      window.currentFolder === "root" ? "Files in (Root)" : "Files in (" + window.currentFolder + ")";
+    
+    const titleEl = document.getElementById("fileListTitle");
+    titleEl.innerHTML = "Files in (" + renderBreadcrumb(window.currentFolder) + ")";
+    bindBreadcrumbEvents();
     loadFileList(window.currentFolder);
-
-    // Expand tree to current folder.
+    
     const folderState = loadFolderTreeState();
-    if (window.currentFolder !== "root" && folderState[window.currentFolder] !== "none") {
+    if (window.currentFolder !== effectiveRoot && folderState[window.currentFolder] !== "none") {
       expandTreePath(window.currentFolder);
     }
-
-    // Highlight current folder.
+    
     const selectedEl = container.querySelector(`.folder-option[data-folder="${window.currentFolder}"]`);
     if (selectedEl) {
+      container.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected"));
       selectedEl.classList.add("selected");
     }
-
-    // Event binding for folder selection.
+    
     container.querySelectorAll(".folder-option").forEach(el => {
       el.addEventListener("click", function (e) {
         e.stopPropagation();
@@ -264,13 +402,13 @@ export async function loadFolderTree(selectedFolder) {
         const selected = this.getAttribute("data-folder");
         window.currentFolder = selected;
         localStorage.setItem("lastOpenedFolder", selected);
-        document.getElementById("fileListTitle").textContent =
-          selected === "root" ? "Files in (Root)" : "Files in (" + selected + ")";
+        const titleEl = document.getElementById("fileListTitle");
+        titleEl.innerHTML = "Files in (" + renderBreadcrumb(selected) + ")";
+        bindBreadcrumbEvents();
         loadFileList(selected);
       });
     });
-
-    // Event binding for toggling folders.
+    
     const rootToggle = container.querySelector("#rootRow .folder-toggle");
     if (rootToggle) {
       rootToggle.addEventListener("click", function (e) {
@@ -281,19 +419,19 @@ export async function loadFolderTree(selectedFolder) {
           if (nestedUl.classList.contains("collapsed") || !nestedUl.classList.contains("expanded")) {
             nestedUl.classList.remove("collapsed");
             nestedUl.classList.add("expanded");
-            this.textContent = "[-]";
-            state["root"] = "block";
+            this.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
+            state[effectiveRoot] = "block";
           } else {
             nestedUl.classList.remove("expanded");
             nestedUl.classList.add("collapsed");
             this.textContent = "[+]";
-            state["root"] = "none";
+            state[effectiveRoot] = "none";
           }
           saveFolderTreeState(state);
         }
       });
     }
-
+    
     container.querySelectorAll(".folder-toggle").forEach(toggle => {
       toggle.addEventListener("click", function (e) {
         e.stopPropagation();
@@ -304,7 +442,7 @@ export async function loadFolderTree(selectedFolder) {
           if (siblingUl.classList.contains("collapsed") || !siblingUl.classList.contains("expanded")) {
             siblingUl.classList.remove("collapsed");
             siblingUl.classList.add("expanded");
-            this.textContent = "[-]";
+            this.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
             state[folderPath] = "block";
           } else {
             siblingUl.classList.remove("expanded");
@@ -316,7 +454,7 @@ export async function loadFolderTree(selectedFolder) {
         }
       });
     });
-
+    
   } catch (error) {
     console.error("Error loading folder tree:", error);
   }
@@ -327,10 +465,9 @@ export function loadFolderList(selectedFolder) {
   loadFolderTree(selectedFolder);
 }
 
-// ----------------------
-// Folder Management (Rename, Delete, Create)
-// ----------------------
-
+/* ----------------------
+   Folder Management (Rename, Delete, Create)
+----------------------*/
 document.getElementById("renameFolderBtn").addEventListener("click", openRenameFolderModal);
 document.getElementById("deleteFolderBtn").addEventListener("click", openDeleteFolderModal);
 
@@ -343,13 +480,18 @@ function openRenameFolderModal() {
   const parts = selectedFolder.split("/");
   document.getElementById("newRenameFolderName").value = parts[parts.length - 1];
   document.getElementById("renameFolderModal").style.display = "block";
+  setTimeout(() => {
+    const input = document.getElementById("newRenameFolderName");
+    input.focus();
+    input.select();
+  }, 100);
 }
 
 document.getElementById("cancelRenameFolder").addEventListener("click", function () {
   document.getElementById("renameFolderModal").style.display = "none";
   document.getElementById("newRenameFolderName").value = "";
 });
-
+attachEnterKeyListener("renameFolderModal", "submitRenameFolder");
 document.getElementById("submitRenameFolder").addEventListener("click", function (event) {
   event.preventDefault();
   const selectedFolder = window.currentFolder || "root";
@@ -406,7 +548,7 @@ function openDeleteFolderModal() {
 document.getElementById("cancelDeleteFolder").addEventListener("click", function () {
   document.getElementById("deleteFolderModal").style.display = "none";
 });
-
+attachEnterKeyListener("deleteFolderModal", "confirmDeleteFolder");
 document.getElementById("confirmDeleteFolder").addEventListener("click", function () {
   const selectedFolder = window.currentFolder || "root";
   const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
@@ -437,13 +579,14 @@ document.getElementById("confirmDeleteFolder").addEventListener("click", functio
 
 document.getElementById("createFolderBtn").addEventListener("click", function () {
   document.getElementById("createFolderModal").style.display = "block";
+  document.getElementById("newFolderName").focus();
 });
 
 document.getElementById("cancelCreateFolder").addEventListener("click", function () {
   document.getElementById("createFolderModal").style.display = "none";
   document.getElementById("newFolderName").value = "";
 });
-
+attachEnterKeyListener("createFolderModal", "submitCreateFolder");
 document.getElementById("submitCreateFolder").addEventListener("click", function () {
   const folderInput = document.getElementById("newFolderName").value.trim();
   if (!folderInput) {
@@ -484,4 +627,123 @@ document.getElementById("submitCreateFolder").addEventListener("click", function
       console.error("Error creating folder:", error);
       document.getElementById("createFolderModal").style.display = "none";
     });
-});
+});
+
+// ---------- CONTEXT MENU SUPPORT FOR FOLDER MANAGER ----------
+function showFolderManagerContextMenu(x, y, menuItems) {
+  let menu = document.getElementById("folderManagerContextMenu");
+  if (!menu) {
+    menu = document.createElement("div");
+    menu.id = "folderManagerContextMenu";
+    menu.style.position = "absolute";
+    menu.style.padding = "5px 0";
+    menu.style.minWidth = "150px";
+    menu.style.zIndex = "9999";
+    document.body.appendChild(menu);
+  }
+  if (document.body.classList.contains("dark-mode")) {
+    menu.style.backgroundColor = "#2c2c2c";
+    menu.style.border = "1px solid #555";
+    menu.style.color = "#e0e0e0";
+  } else {
+    menu.style.backgroundColor = "#fff";
+    menu.style.border = "1px solid #ccc";
+    menu.style.color = "#000";
+  }
+  menu.innerHTML = "";
+  menuItems.forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.textContent = item.label;
+    menuItem.style.padding = "5px 15px";
+    menuItem.style.cursor = "pointer";
+    menuItem.addEventListener("mouseover", () => {
+      if (document.body.classList.contains("dark-mode")) {
+        menuItem.style.backgroundColor = "#444";
+      } else {
+        menuItem.style.backgroundColor = "#f0f0f0";
+      }
+    });
+    menuItem.addEventListener("mouseout", () => {
+      menuItem.style.backgroundColor = "";
+    });
+    menuItem.addEventListener("click", () => {
+      item.action();
+      hideFolderManagerContextMenu();
+    });
+    menu.appendChild(menuItem);
+  });
+  menu.style.left = x + "px";
+  menu.style.top = y + "px";
+  menu.style.display = "block";
+}
+
+function hideFolderManagerContextMenu() {
+  const menu = document.getElementById("folderManagerContextMenu");
+  if (menu) {
+    menu.style.display = "none";
+  }
+}
+
+function folderManagerContextMenuHandler(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  const target = e.target.closest(".folder-option, .breadcrumb-link");
+  if (!target) return;
+  const folder = target.getAttribute("data-folder");
+  if (!folder) return;
+  window.currentFolder = folder;
+  document.querySelectorAll(".folder-option, .breadcrumb-link").forEach(el => el.classList.remove("selected"));
+  target.classList.add("selected");
+  const menuItems = [
+    {
+      label: "Create Folder",
+      action: () => {
+        document.getElementById("createFolderModal").style.display = "block";
+        document.getElementById("newFolderName").focus();
+      }
+    },
+    {
+      label: "Rename Folder",
+      action: () => { openRenameFolderModal(); }
+    },
+    {
+      label: "Delete Folder",
+      action: () => { openDeleteFolderModal(); }
+    }
+  ];
+  showFolderManagerContextMenu(e.pageX, e.pageY, menuItems);
+}
+
+function bindFolderManagerContextMenu() {
+  const container = document.getElementById("folderTreeContainer");
+  if (container) {
+    container.removeEventListener("contextmenu", folderManagerContextMenuHandler);
+    container.addEventListener("contextmenu", folderManagerContextMenuHandler, false);
+  }
+  const breadcrumbNodes = document.querySelectorAll(".breadcrumb-link");
+  breadcrumbNodes.forEach(node => {
+    node.removeEventListener("contextmenu", folderManagerContextMenuHandler);
+    node.addEventListener("contextmenu", folderManagerContextMenuHandler, false);
+  });
+}
+
+document.addEventListener("click", function () {
+  hideFolderManagerContextMenu();
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.addEventListener("keydown", function (e) {
+    const tag = e.target.tagName.toLowerCase();
+    if (tag === "input" || tag === "textarea" || e.target.isContentEditable) {
+      return;
+    }
+    if (e.key === "Delete" || e.key === "Backspace" || e.keyCode === 46 || e.keyCode === 8) {
+      if (window.currentFolder && window.currentFolder !== "root") {
+        e.preventDefault();
+        openDeleteFolderModal();
+      }
+    }
+  });
+});
+
+bindFolderManagerContextMenu();

getConfig.php

@@ -0,0 +1,36 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+$configFile = USERS_DIR . 'adminConfig.json';
+if (file_exists($configFile)) {
+    $encryptedContent = file_get_contents($configFile);
+    $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+    if ($decryptedContent === false) {
+        http_response_code(500);
+        echo json_encode(['error' => 'Failed to decrypt configuration.']);
+        exit;
+    }
+    // Decode the configuration and ensure globalOtpauthUrl is set
+    $config = json_decode($decryptedContent, true);
+    if (!isset($config['globalOtpauthUrl'])) {
+        $config['globalOtpauthUrl'] = "";
+    }
+    echo json_encode($config);
+} else {
+    echo json_encode([
+        'oidc' => [
+            'providerUrl'  => 'https://your-oidc-provider.com',
+            'clientId'     => 'YOUR_CLIENT_ID',
+            'clientSecret' => 'YOUR_CLIENT_SECRET',
+            'redirectUri'  => 'https://yourdomain.com/auth.php?oidc=callback'
+        ],
+        'loginOptions' => [
+            'disableFormLogin' => false,
+            'disableBasicAuth' => false,
+            'disableOIDCLogin' => false
+        ],
+        'globalOtpauthUrl' => ""
+    ]);
+}
+?>

getFileList.php

@@ -93,9 +93,14 @@ foreach ($files as $file) {
         'modified' => $fileDateModified,
         'uploaded' => $fileUploadedDate,
         'size' => $fileSizeFormatted,
-        'uploader' => $fileUploader
+        'uploader' => $fileUploader,
+        'tags' => isset($metadata[$metaKey]['tags']) ? $metadata[$metaKey]['tags'] : []
     ];
 }
 
-echo json_encode(["files" => $fileList]);
+// Load global tags from createdTags.json.
+$globalTagsFile = META_DIR . "createdTags.json";
+$globalTags = file_exists($globalTagsFile) ? json_decode(file_get_contents($globalTagsFile), true) : [];
+
+echo json_encode(["files" => $fileList, "globalTags" => $globalTags]);
 ?>

getFolderList.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 // Ensure user is authenticated

getUserPermissions.php

@@ -0,0 +1,47 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Check if the user is authenticated.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+$permissionsFile = USERS_DIR . "userPermissions.json";
+$permissionsArray = [];
+
+// Load permissions file if it exists.
+if (file_exists($permissionsFile)) {
+    $content = file_get_contents($permissionsFile);
+    // Attempt to decrypt the content.
+    $decryptedContent = decryptData($content, $encryptionKey);
+    if ($decryptedContent === false) {
+        // If decryption fails, assume the file is plain JSON.
+        $permissionsArray = json_decode($content, true);
+    } else {
+        $permissionsArray = json_decode($decryptedContent, true);
+    }
+    if (!is_array($permissionsArray)) {
+        $permissionsArray = [];
+    }
+}
+
+// If the user is an admin, return all permissions.
+if (isset($_SESSION['isAdmin']) && $_SESSION['isAdmin'] === true) {
+    echo json_encode($permissionsArray);
+    exit;
+}
+
+// Otherwise, return only the current user's permissions.
+$username = $_SESSION['username'] ?? '';
+foreach ($permissionsArray as $storedUsername => $data) {
+    if (strcasecmp($storedUsername, $username) === 0) {
+        echo json_encode($data);
+        exit;
+    }
+}
+
+// If no permissions are found for the current user, return an empty object.
+echo json_encode(new stdClass());
+?>

getUsers.php

@@ -1,24 +1,31 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
+
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true ||
     !isset($_SESSION['isAdmin']) || $_SESSION['isAdmin'] !== true) {
     echo json_encode(["error" => "Unauthorized"]);
     exit;
 }
+
 $usersFile = USERS_DIR . USERS_FILE;
 $users = [];
+
 if (file_exists($usersFile)) {
     $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
     foreach ($lines as $line) {
         $parts = explode(':', trim($line));
         if (count($parts) >= 3) {
-            // Optionally, validate username format:
+            // Validate username format:
             if (preg_match('/^[A-Za-z0-9_\- ]+$/', $parts[0])) {
-                $users[] = ["username" => $parts[0]];
+                $users[] = [
+                    "username" => $parts[0],
+                    "role" => trim($parts[2])
+                ];
             }
         }
     }
 }
+
 echo json_encode($users);
-?>
+?>

index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Multi File Upload Editor</title>
+  <title>FileRise</title>
   <link rel="icon" type="image/png" href="/assets/logo.png">
   <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
   <meta name="csrf-token" content="">
@@ -20,6 +20,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
   <link rel="stylesheet" href="styles.css" />
 </head>
 
@@ -35,9 +36,15 @@
               <stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
               <stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
             </linearGradient>
-            <!-- Drop shadow filter -->
+            <!-- Drop shadow filter with animated attributes for a lifting effect -->
             <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
-              <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2" />
+              <feDropShadow id="dropShadow" dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2">
+                <!-- Animate the vertical offset: from 2 to 1 (as it rises), hold, then back to 2 -->
+                <animate attributeName="dy" values="2;1;1;2" keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
+                <!-- Animate the blur similarly: from 2 to 1.5 then back to 2 -->
+                <animate attributeName="stdDeviation" values="2;1.5;1.5;2" keyTimes="0;0.2;0.8;1" dur="5s"
+                  fill="freeze" />
+              </feDropShadow>
             </filter>
           </defs>
           <style type="text/css">
@@ -61,37 +68,43 @@
               fill: #1565C0;
             }
           </style>
-          <!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
-          <rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
-          <!-- Divider lines for drawers -->
-          <line x1="5" y1="22" x2="59" y2="22" class="divider" />
-          <line x1="5" y1="34" x2="59" y2="34" class="divider" />
-          <!-- Drawers with Handles -->
-          <rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
-          <circle cx="54" cy="27" r="1.5" class="handle" />
-
-          <rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
-          <circle cx="54" cy="39" r="1.5" class="handle" />
-
-          <rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
-          <circle cx="54" cy="51" r="1.5" class="handle" />
-
-          <!-- Additional detail: a small top handle on the cabinet door -->
-          <rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
+          <!-- Group that will animate upward and then back down once -->
+          <g id="cabinetGroup">
+            <!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
+            <rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
+            <!-- Divider lines for drawers -->
+            <line x1="5" y1="22" x2="59" y2="22" class="divider" />
+            <line x1="5" y1="34" x2="59" y2="34" class="divider" />
+            <!-- Drawers with Handles -->
+            <rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
+            <circle cx="54" cy="27" r="1.5" class="handle" />
+            <rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
+            <circle cx="54" cy="39" r="1.5" class="handle" />
+            <rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
+            <circle cx="54" cy="51" r="1.5" class="handle" />
+            <!-- Additional detail: a small top handle on the cabinet door -->
+            <rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
+            <!-- Animate transform: rises by 2 pixels over 1s, holds for 3s, then falls over 1s (total 5s) -->
+            <animateTransform attributeName="transform" type="translate" values="0 0; 0 -2; 0 -2; 0 0"
+              keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
+          </g>
         </svg>
       </div>
     </div>
-
     <div class="header-title">
-      <h1>Multi File Upload Editor</h1>
+      <h1>FileRise</h1>
     </div>
-
     <div class="header-right">
+      <div class="header-buttons-wrapper" style="display: flex; align-items: center; gap: 10px;">
+        <!-- Your header drop zone -->
+        <div id="headerDropArea" class="header-drop-zone"></div>
       <div class="header-buttons">
         <button id="logoutBtn" title="Logout">
           <i class="material-icons">exit_to_app</i>
         </button>
-        <!-- Restore Files Modal (Admin Only) -->
+        <button id="changePasswordBtn" title="Change Password" style="display: none;">
+          <i class="material-icons">vpn_key</i>
+        </button>
         <div id="restoreFilesModal" class="modal centered-modal" style="display: none;">
           <div class="modal-content">
             <h4 class="custom-restore-header">
@@ -113,212 +126,234 @@
             </div>
           </div>
         </div>
-        <button id="addUserBtn" title="Add User">
+        <button id="addUserBtn" title="Add User" style="display: none;">
           <i class="material-icons">person_add</i>
         </button>
-        <button id="removeUserBtn" title="Remove User">
+        <button id="removeUserBtn" title="Remove User" style="display: none;">
           <i class="material-icons">person_remove</i>
         </button>
         <button id="darkModeToggle" class="dark-mode-toggle">Dark Mode</button>
       </div>
     </div>
+    </div>
   </header>
 
   <!-- Custom Toast Container -->
   <div id="customToast"></div>
-  <div class="container-fluid">
-    <!-- Login Form -->
-    <div class="row" id="loginForm">
-      <div class="col-12">
-        <form id="authForm" method="post">
-          <div class="form-group">
-            <label for="loginUsername">User:</label>
-            <input type="text" class="form-control" id="loginUsername" name="username" required />
-          </div>
-          <div class="form-group">
-            <label for="loginPassword">Password:</label>
-            <input type="password" class="form-control" id="loginPassword" name="password" required />
-          </div>
-          <button type="submit" class="btn btn-primary btn-block btn-login">Login</button>
-        </form>
-      </div>
-    </div>
+  <div id="hiddenCardsContainer" style="display:none;"></div>
 
-    <!-- Main Operations: Upload and Folder Management -->
-    <div id="mainOperations">
-      <div class="container" style="max-width: 1400px; margin: 0 auto;">
-        <div class="row align-items-start" id="uploadFolderRow">
-          <!-- Upload Card: 50% width on medium, 58% on large -->
-          <div class="col-md-6 col-lg-7 d-flex">
-            <div id="uploadCard" class="card flex-fill" style="max-width: 900px; width: 100%;">
-              <div class="card-header">Upload Files/Folders</div>
-              <div class="card-body d-flex flex-column">
-                <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column"
-                  style="height: 100%;">
-                  <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
-                    <div id="uploadDropArea"
-                      style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-                      <span>Drop files/folders here or click 'Choose files'</span>
-                      <br />
-                      <input type="file" id="file" name="file[]" class="form-control-file" multiple required
-                        webkitdirectory directory mozdirectory style="opacity:0; position:absolute; z-index:-1;" />
-                      <button type="button" onclick="document.getElementById('file').click();">Choose Folder</button>
-                    </div>
-                  </div>
-                  <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
-                  <div id="uploadProgressContainer"></div>
-                </form>
+  <!-- Main Wrapper: Hidden by default; remove "display: none;" after login -->
+  <div class="main-wrapper">
+    <!-- Sidebar Drop Zone: Hidden until you drag a card (display controlled by JS) -->
+    <div id="sidebarDropArea" class="drop-target-sidebar"></div>
+    <!-- Main Column -->
+    <div id="mainColumn" class="main-column">
+      <div class="container-fluid">
+        <!-- Login Form (unchanged) -->
+        <div class="row" id="loginForm">
+          <div class="col-12">
+            <form id="authForm" method="post">
+              <div class="form-group">
+                <label for="loginUsername">User:</label>
+                <input type="text" class="form-control" id="loginUsername" name="username" required />
               </div>
+              <div class="form-group">
+                <label for="loginPassword">Password:</label>
+                <input type="password" class="form-control" id="loginPassword" name="password" required />
+              </div>
+              <button type="submit" class="btn btn-primary btn-block btn-login">Login</button>
+              <div class="form-group remember-me-container">
+                <input type="checkbox" id="rememberMeCheckbox" name="remember_me" />
+                <label for="rememberMeCheckbox">Remember me</label>
+              </div>
+            </form>
+            <!-- OIDC Login Option -->
+            <div class="text-center mt-3">
+              <button id="oidcLoginBtn" class="btn btn-secondary">Login with OIDC</button>
+            </div>
+            <!-- Basic HTTP Login Option -->
+            <div class="text-center mt-3">
+              <a href="login_basic.php" class="btn btn-secondary">Use Basic HTTP Login</a>
             </div>
           </div>
+        </div>
 
-          <!-- Folder Management Card -->
-          <div class="col-md-6 col-lg-5 d-flex">
-            <div id="folderManagementCard" class="card flex-fill" style="max-width: 900px; width: 100%; position: relative;">
-              <!-- Card header with folder management title and help icon -->
-              <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
-                <span>Folder Navigation &amp; Management</span>
-                <button id="folderHelpBtn" class="btn btn-link" title="Folder Help"
-                  style="padding: 0; border: none; background: none;">
-                  <i class="material-icons folder-help-icon" style="font-size: 24px;">info</i>
-                </button>
+        <!-- Main Operations: Upload and Folder Management -->
+        <div id="mainOperations">
+          <div class="container" style="max-width: 1400px; margin: 0 auto;">
+            <!-- Top Zone: Two columns (60% and 40%) -->
+            <div id="uploadFolderRow" class="row">
+              <!-- Left Column (60% for Upload Card) -->
+              <div id="leftCol" class="col-md-7" style="display: flex; justify-content: center;">
+                <div id="uploadCard" class="card" style="width: 100%;">
+                  <div class="card-header">Upload Files/Folders</div>
+                  <div class="card-body d-flex flex-column">
+                    <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column">
+                      <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
+                        <div id="uploadDropArea"
+                          style="border:2px dashed #ccc; padding:20px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative;">
+                          <span>Drop files/folders here or click 'Choose Files'</span>
+                          <br />
+                          <input type="file" id="file" name="file[]" class="form-control-file" multiple
+                            style="opacity:0; position:absolute; width:1px; height:1px;" />
+                          <button type="button" id="customChooseBtn">Choose Files</button>
+                        </div>
+                      </div>
+                      <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
+                      <div id="uploadProgressContainer"></div>
+                    </form>
+                  </div>
+                </div>
               </div>
-              <div class="card-body custom-folder-card-body">
-                <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
-                  <div id="folderTreeContainer"></div>
-                </div>
-                <!-- Folder actions (create, rename, delete) -->
-                <div class="folder-actions mt-3">
-                  <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
-                  <!-- Create Folder Modal -->
-                  <div id="createFolderModal" class="modal">
-                    <div class="modal-content">
-                      <h4>Create Folder</h4>
-                      <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name"
-                        style="margin-top:10px;" />
-                      <div style="margin-top:15px; text-align:right;">
-                        <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
-                        <button id="submitCreateFolder" class="btn btn-primary">Create</button>
+              <!-- Right Column (40% for Folder Management Card) -->
+              <div id="rightCol" class="col-md-5" style="display: flex; justify-content: center;">
+                <div id="folderManagementCard" class="card" style="width: 100%; position: relative;">
+                  <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
+                    <span>Folder Navigation &amp; Management</span>
+                    <button id="folderHelpBtn" class="btn btn-link" title="Folder Help"
+                      style="padding: 0; border: none; background: none;">
+                      <i class="material-icons folder-help-icon" style="font-size: 24px;">info</i>
+                    </button>
+                  </div>
+                  <div class="card-body custom-folder-card-body">
+                    <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
+                      <div id="folderTreeContainer"></div>
+                    </div>
+                    <div class="folder-actions mt-3">
+                      <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
+                      <div id="createFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4>Create Folder</h4>
+                          <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name"
+                            style="margin-top:10px;" />
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
+                            <button id="submitCreateFolder" class="btn btn-primary">Create</button>
+                          </div>
+                        </div>
+                      </div>
+                      <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
+                        <i class="material-icons">drive_file_rename_outline</i>
+                      </button>
+                      <div id="renameFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4>Rename Folder</h4>
+                          <input type="text" id="newRenameFolderName" class="form-control"
+                            placeholder="Enter new folder name" style="margin-top:10px;" />
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
+                            <button id="submitRenameFolder" class="btn btn-primary">Rename</button>
+                          </div>
+                        </div>
+                      </div>
+                      <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
+                        <i class="material-icons">delete</i>
+                      </button>
+                      <div id="deleteFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4>Delete Folder</h4>
+                          <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
+                            <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
-                    <i class="material-icons">drive_file_rename_outline</i>
-                  </button>
-                  <!-- Rename Folder Modal -->
-                  <div id="renameFolderModal" class="modal">
-                    <div class="modal-content">
-                      <h4>Rename Folder</h4>
-                      <input type="text" id="newRenameFolderName" class="form-control"
-                        placeholder="Enter new folder name" style="margin-top:10px;" />
-                      <div style="margin-top:15px; text-align:right;">
-                        <button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
-                        <button id="submitRenameFolder" class="btn btn-primary">Rename</button>
-                      </div>
-                    </div>
-                  </div>
-                  <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
-                    <i class="material-icons">delete</i>
-                  </button>
-                  <!-- Delete Folder Modal -->
-                  <div id="deleteFolderModal" class="modal">
-                    <div class="modal-content">
-                      <h4>Delete Folder</h4>
-                      <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
-                      <div style="margin-top:15px; text-align:right;">
-                        <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
-                        <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
-                      </div>
+                    <div id="folderHelpTooltip" class="folder-help-tooltip"
+                      style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
+                      <ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
+                        <li>Click on a folder in the tree to view its files.</li>
+                        <li>Use [-] to collapse and [+] to expand folders.</li>
+                        <li>Select a folder and click "Create Folder" to add a subfolder.</li>
+                        <li>To rename or delete a folder, select it and then click the appropriate button.</li>
+                      </ul>
                     </div>
                   </div>
                 </div>
-                <!-- Help Tooltip: Initially hidden -->
-                <div id="folderHelpTooltip" class="folder-help-tooltip"
-                  style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
-                  <ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
-                    <li>Click on a folder in the tree to view its files.</li>
-                    <li>Use [-] to collapse and [+] to expand folders.</li>
-                    <li>Select a folder and click "Create Folder" to add a subfolder.</li>
-                    <li>To rename or delete a folder, select it and then click the appropriate button.</li>
-                  </ul>
+              </div>
+            </div> <!-- end uploadFolderRow -->
+          </div> <!-- end container -->
+        </div> <!-- end mainOperations -->
+
+        <!-- File List Section -->
+        <div id="fileListContainer" style="display: none;">
+          <h2 id="fileListTitle">Files in (Root)</h2>
+          <div id="fileListActions" class="file-list-actions">
+            <button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">Delete Files</button>
+            <div id="deleteFilesModal" class="modal">
+              <div class="modal-content">
+                <h4>Delete Selected Files</h4>
+                <p id="deleteFilesMessage">Are you sure you want to delete the selected files?</p>
+                <div class="modal-footer">
+                  <button id="cancelDeleteFiles" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmDeleteFiles" class="btn btn-danger">Delete</button>
+                </div>
+              </div>
+            </div>
+            <button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>Copy Files</button>
+            <div id="copyFilesModal" class="modal">
+              <div class="modal-content">
+                <h4>Copy Selected Files</h4>
+                <p id="copyFilesMessage">Select a target folder for copying the selected files:</p>
+                <select id="copyTargetFolder" class="form-control modal-input"></select>
+                <div class="modal-footer">
+                  <button id="cancelCopyFiles" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmCopyFiles" class="btn btn-primary">Copy</button>
+                </div>
+              </div>
+            </div>
+            <button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>Move Files</button>
+            <div id="moveFilesModal" class="modal">
+              <div class="modal-content">
+                <h4>Move Selected Files</h4>
+                <p id="moveFilesMessage">Select a target folder for moving the selected files:</p>
+                <select id="moveTargetFolder" class="form-control modal-input"></select>
+                <div class="modal-footer">
+                  <button id="cancelMoveFiles" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmMoveFiles" class="btn btn-primary">Move</button>
+                </div>
+              </div>
+            </div>
+            <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled>Download ZIP</button>
+            <button id="extractZipBtn" class="btn btn-sm btn-info" title="Extract Zip">Extract Zip</button>
+            <div id="downloadZipModal" class="modal" style="display:none;">
+              <div class="modal-content">
+                <h4>Download Selected Files as Zip</h4>
+                <p>Enter a name for the zip file:</p>
+                <input type="text" id="zipFileNameInput" class="form-control" placeholder="files.zip" />
+                <div class="modal-footer" style="margin-top:15px; text-align:right;">
+                  <button id="cancelDownloadZip" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmDownloadZip" class="btn btn-primary">Download</button>
                 </div>
               </div>
             </div>
           </div>
+          <div id="fileList"></div>
         </div>
-      </div>
-    </div>
-    <!-- File List Section -->
-    <div id="fileListContainer" style="display: none;">
-      <h2 id="fileListTitle">Files in (Root)</h2>
-      <div id="fileListActions" class="file-list-actions">
-        <button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">Delete Files</button>
-        <!-- Delete Files Modal -->
-        <div id="deleteFilesModal" class="modal">
-          <div class="modal-content">
-            <h4>Delete Selected Files</h4>
-            <p id="deleteFilesMessage">Are you sure you want to delete the selected files?</p>
-            <div class="modal-footer">
-              <button id="cancelDeleteFiles" class="btn btn-secondary">Cancel</button>
-              <button id="confirmDeleteFiles" class="btn btn-danger">Delete</button>
-            </div>
-          </div>
-        </div>
+      </div> <!-- end container-fluid -->
+    </div> <!-- end mainColumn -->
+  </div> <!-- end main-wrapper -->
 
-        <button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>Copy Files</button>
-        <!-- Copy Files Modal -->
-        <div id="copyFilesModal" class="modal">
-          <div class="modal-content">
-            <h4>Copy Selected Files</h4>
-            <p id="copyFilesMessage">Select a target folder for copying the selected files:</p>
-            <select id="copyTargetFolder" class="form-control modal-input"></select>
-            <div class="modal-footer">
-              <button id="cancelCopyFiles" class="btn btn-secondary">Cancel</button>
-              <button id="confirmCopyFiles" class="btn btn-primary">Copy</button>
-            </div>
-          </div>
-        </div>
-
-        <button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>Move Files</button>
-        <!-- Move Files Modal -->
-        <div id="moveFilesModal" class="modal">
-          <div class="modal-content">
-            <h4>Move Selected Files</h4>
-            <p id="moveFilesMessage">Select a target folder for moving the selected files:</p>
-            <select id="moveTargetFolder" class="form-control modal-input"></select>
-            <div class="modal-footer">
-              <button id="cancelMoveFiles" class="btn btn-secondary">Cancel</button>
-              <button id="confirmMoveFiles" class="btn btn-primary">Move</button>
-            </div>
-          </div>
-        </div>
-
-        <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled>Download ZIP</button>
-        <!-- Download Zip Modal -->
-        <div id="downloadZipModal" class="modal" style="display:none;">
-          <div class="modal-content">
-            <h4>Download Selected Files as Zip</h4>
-            <p>Enter a name for the zip file:</p>
-            <input type="text" id="zipFileNameInput" class="form-control" placeholder="files.zip" />
-            <div class="modal-footer" style="margin-top:15px; text-align:right;">
-              <button id="cancelDownloadZip" class="btn btn-secondary">Cancel</button>
-              <button id="confirmDownloadZip" class="btn btn-primary">Download</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id="fileList"></div>
+  <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
+  <div id="changePasswordModal" class="modal" style="display:none;">
+    <div class="modal-content" style="max-width:400px; margin:auto;">
+      <span id="closeChangePasswordModal" style="cursor:pointer;">&times;</span>
+      <h3>Change Password</h3>
+      <input type="password" id="oldPassword" placeholder="Old Password" style="width:100%; margin: 5px 0;" />
+      <input type="password" id="newPassword" placeholder="New Password" style="width:100%; margin: 5px 0;" />
+      <input type="password" id="confirmPassword" placeholder="Confirm New Password"
+        style="width:100%; margin: 5px 0;" />
+      <button id="saveNewPasswordBtn" class="btn btn-primary" style="width:100%;">Save</button>
     </div>
   </div>
-
-  <!-- Add User Modal -->
   <div id="addUserModal" class="modal">
     <div class="modal-content">
       <h3>Create New User</h3>
       <label for="newUsername">Username:</label>
       <input type="text" id="newUsername" class="form-control" />
-      <label for="newPassword">Password:</label>
-      <input type="password" id="newPassword" class="form-control" />
+      <label for="addUserPassword">Password:</label>
+      <input type="password" id="addUserPassword" class="form-control" />
       <div id="adminCheckboxContainer">
         <input type="checkbox" id="isAdmin" />
         <label for="isAdmin">Grant Admin Access</label>
@@ -329,8 +364,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Remove User Modal -->
   <div id="removeUserModal" class="modal">
     <div class="modal-content">
       <h3>Remove User</h3>
@@ -342,8 +375,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Rename File Modal -->
   <div id="renameFileModal" class="modal">
     <div class="modal-content">
       <h4>Rename File</h4>
@@ -355,8 +386,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Custom Confirm Modal -->
   <div id="customConfirmModal" class="modal" style="display:none;">
     <div class="modal-content">
       <p id="confirmMessage"></p>
@@ -366,8 +395,6 @@
       </div>
     </div>
   </div>
-
-  <!-- JavaScript Files -->
   <script type="module" src="main.js"></script>
 </body>
 

login_basic.php

@@ -0,0 +1,106 @@
+<?php
+require_once 'config.php';
+
+$usersFile = USERS_DIR . USERS_FILE;  // Make sure the users file path is defined
+
+// Reuse the same authentication function
+function authenticate($username, $password)
+{
+    global $usersFile;
+    if (!file_exists($usersFile)) {
+        error_log("authenticate(): users file not found");
+        return false;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        list($storedUser, $storedPass, $storedRole) = explode(':', trim($line), 3);
+        if ($username === $storedUser && password_verify($password, $storedPass)) {
+            return $storedRole; // Return the user's role
+        }
+    }
+    error_log("authenticate(): authentication failed for '$username'");
+    return false;
+}
+
+// Define helper function to get a user's role from users.txt
+function getUserRole($username) {
+    global $usersFile;
+    if (file_exists($usersFile)) {
+        $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+        foreach ($lines as $line) {
+            $parts = explode(":", trim($line));
+            if (count($parts) >= 3 && $parts[0] === $username) {
+                return trim($parts[2]);
+            }
+        }
+    }
+    return null;
+}
+
+// Add the loadFolderPermission function here:
+function loadFolderPermission($username) {
+    global $encryptionKey;
+    $permissionsFile = USERS_DIR . 'userPermissions.json';
+    if (file_exists($permissionsFile)) {
+        $content = file_get_contents($permissionsFile);
+        // Try to decrypt the content.
+        $decryptedContent = decryptData($content, $encryptionKey);
+        if ($decryptedContent !== false) {
+            $permissions = json_decode($decryptedContent, true);
+        } else {
+            $permissions = json_decode($content, true);
+        }
+        if (is_array($permissions)) {
+            // Use case-insensitive comparison.
+            foreach ($permissions as $storedUsername => $data) {
+                if (strcasecmp($storedUsername, $username) === 0 && isset($data['folderOnly'])) {
+                    return (bool)$data['folderOnly'];
+                }
+            }
+        }
+    }
+    return false; // Default if not set.
+}
+
+// Check if the user has sent HTTP Basic auth credentials.
+if (!isset($_SERVER['PHP_AUTH_USER'])) {
+    header('WWW-Authenticate: Basic realm="FileRise Login"');
+    header('HTTP/1.0 401 Unauthorized');
+    echo 'Authorization Required';
+    exit;
+} else {
+    $username = trim($_SERVER['PHP_AUTH_USER']);
+    $password = trim($_SERVER['PHP_AUTH_PW']);
+
+    // Validate username format (optional)
+    if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
+        header('WWW-Authenticate: Basic realm="FileRise Login"');
+        header('HTTP/1.0 401 Unauthorized');
+        echo 'Invalid username format';
+        exit;
+    }
+
+    // Attempt authentication
+    $roleFromAuth = authenticate($username, $password);
+    if ($roleFromAuth !== false) {
+        // Use getUserRole() to determine the user's role from the file
+        $actualRole = getUserRole($username);
+        session_regenerate_id(true);
+        $_SESSION["authenticated"] = true;
+        $_SESSION["username"] = $username;
+        $_SESSION["isAdmin"] = ($actualRole === "1");
+        // Set the folderOnly flag based on userPermissions.json.
+        $_SESSION["folderOnly"] = loadFolderPermission($username);
+
+        // Redirect to the main page (or output JSON for testing)
+        header("Location: index.html");
+        exit;
+    } else {
+        // Invalid credentials; prompt again
+        header('WWW-Authenticate: Basic realm="FileRise Login"');
+        header('HTTP/1.0 401 Unauthorized');
+        echo 'Invalid credentials';
+        exit;
+    }
+}
+?>

logout.php

@@ -1,19 +1,37 @@
 <?php
-session_start();
+require_once 'config.php';
+
+// Retrieve headers and check CSRF token.
 $headers = array_change_key_case(getallheaders(), CASE_LOWER);
 $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
 
-// Fallback: If a CSRF token exists in the session and doesn't match the one provided,
-// log the mismatch but proceed with logout.
+// If there's a mismatch, log it but continue with logout.
 if (isset($_SESSION['csrf_token']) && $receivedToken !== $_SESSION['csrf_token']) {
-    // Optionally log this event:
     error_log("CSRF token mismatch on logout. Proceeding with logout.");
 }
 
-$_SESSION = []; // Clear session data
-session_destroy(); // Destroy session
+// If the remember me token is set, remove it from the persistent tokens file.
+if (isset($_COOKIE['remember_me_token'])) {
+    $token = $_COOKIE['remember_me_token'];
+    $persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
+    if (file_exists($persistentTokensFile)) {
+        $encryptedContent = file_get_contents($persistentTokensFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        $persistentTokens = json_decode($decryptedContent, true);
+        if (is_array($persistentTokens) && isset($persistentTokens[$token])) {
+            unset($persistentTokens[$token]);
+            $newEncryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);
+            file_put_contents($persistentTokensFile, $newEncryptedContent, LOCK_EX);
+        }
+    }
+    // Clear the cookie.
+    setcookie('remember_me_token', '', time() - 3600, '/', '', $secure, true);
+}
 
-header('Content-Type: application/json');
-echo json_encode(["success" => "Logged out"]);
+// Clear session data and destroy the session.
+$_SESSION = [];
+session_destroy();
+
+header("Location: index.html");
 exit;
 ?>

main.js

@@ -17,10 +17,17 @@ import { loadFolderTree } from './folderManager.js';
 import { initUpload } from './upload.js';
 import { initAuth, checkAuthentication } from './auth.js';
 import { setupTrashRestoreDelete } from './trashRestoreDelete.js';
+import { initDragAndDrop, loadSidebarOrder, loadHeaderOrder } from './dragAndDrop.js';
+import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js';
 
-function loadCsrfToken() {
-  fetch('token.php', { credentials: 'include' })
-    .then(response => response.json())
+function loadCsrfTokenWithRetry(retries = 3, delay = 1000) {
+  return fetch('token.php', { credentials: 'include' })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("Token fetch failed with status: " + response.status);
+      }
+      return response.json();
+    })
     .then(data => {
       // Set global variables.
       window.csrfToken = data.csrf_token;
@@ -43,11 +50,19 @@ function loadCsrfToken() {
         document.head.appendChild(metaShare);
       }
       metaShare.setAttribute('content', data.share_url);
-    })
-    .catch(error => console.error("Error loading CSRF token and share URL:", error));
-}
 
-document.addEventListener("DOMContentLoaded", loadCsrfToken);
+      return data;
+    })
+    .catch(error => {
+      if (retries > 0) {
+        console.warn(`CSRF token load failed. Retrying in ${delay}ms... (${retries} retries left)`, error);
+        return new Promise(resolve => setTimeout(resolve, delay))
+          .then(() => loadCsrfTokenWithRetry(retries - 1, delay * 2));
+      }
+      console.error("Failed to load CSRF token after retries.", error);
+      throw error;
+    });
+}
 
 // Expose functions for inline handlers.
 window.sendRequest = sendRequest;
@@ -61,83 +76,104 @@ window.renameFile = renameFile;
 window.currentFolder = "root";
 
 document.addEventListener("DOMContentLoaded", function () {
-  // Call initAuth synchronously.
-  initAuth();
+  // First, load the CSRF token (with retry).
+  loadCsrfTokenWithRetry().then(() => {
+    // Once CSRF token is loaded, initialize authentication.
+    initAuth();
 
-  // --- Dark Mode Persistence ---
-  const darkModeToggle = document.getElementById("darkModeToggle");
-  const storedDarkMode = localStorage.getItem("darkMode");
+    // Continue with initializations that rely on a valid CSRF token:
+    checkAuthentication().then(authenticated => {
+      if (authenticated) {
+        window.currentFolder = "root";
+        initTagSearch();
+        loadFileList(window.currentFolder);
+        initDragAndDrop();
+        loadSidebarOrder();
+        loadHeaderOrder();
+        initFileActions();
+        initUpload();
+        loadFolderTree();
+        setupTrashRestoreDelete();
 
-  if (storedDarkMode === "true") {
-    document.body.classList.add("dark-mode");
-  } else if (storedDarkMode === "false") {
-    document.body.classList.remove("dark-mode");
-  } else {
-    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      document.body.classList.add("dark-mode");
-    } else {
-      document.body.classList.remove("dark-mode");
-    }
-  }
-
-  if (darkModeToggle) {
-    darkModeToggle.textContent = document.body.classList.contains("dark-mode")
-      ? "Light Mode"
-      : "Dark Mode";
-
-    darkModeToggle.addEventListener("click", function () {
-      if (document.body.classList.contains("dark-mode")) {
-        document.body.classList.remove("dark-mode");
-        localStorage.setItem("darkMode", "false");
-        darkModeToggle.textContent = "Dark Mode";
+        const helpBtn = document.getElementById("folderHelpBtn");
+        const helpTooltip = document.getElementById("folderHelpTooltip");
+        helpBtn.addEventListener("click", function () {
+          // Toggle display of the tooltip.
+          if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
+            helpTooltip.style.display = "block";
+          } else {
+            helpTooltip.style.display = "none";
+          }
+        });
       } else {
-        document.body.classList.add("dark-mode");
-        localStorage.setItem("darkMode", "true");
-        darkModeToggle.textContent = "Light Mode";
+        console.warn("User not authenticated. Data loading deferred.");
       }
     });
-  }
 
-  if (localStorage.getItem("darkMode") === null && window.matchMedia) {
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-      if (event.matches) {
-        document.body.classList.add("dark-mode");
-        if (darkModeToggle) darkModeToggle.textContent = "Light Mode";
-      } else {
-        document.body.classList.remove("dark-mode");
-        if (darkModeToggle) darkModeToggle.textContent = "Dark Mode";
-      }
-    });
-  }
-  // --- End Dark Mode Persistence ---
-
-  const message = sessionStorage.getItem("welcomeMessage");
-  if (message) {
-    showToast(message);
-    sessionStorage.removeItem("welcomeMessage");
-  }
-
-  checkAuthentication().then(authenticated => {
-    if (authenticated) {
-      window.currentFolder = "root";
-      loadFileList(window.currentFolder);
-      initFileActions();
-      initUpload();
-      loadFolderTree();
-      setupTrashRestoreDelete();
-      const helpBtn = document.getElementById("folderHelpBtn");
-      const helpTooltip = document.getElementById("folderHelpTooltip");
-      helpBtn.addEventListener("click", function () {
-        // Toggle display of the tooltip.
-        if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
-          helpTooltip.style.display = "block";
-        } else {
-          helpTooltip.style.display = "none";
-        }
+    // Other DOM initialization that can happen after CSRF is ready.
+    const newPasswordInput = document.getElementById("newPassword");
+    if (newPasswordInput) {
+      newPasswordInput.addEventListener("input", function() {
+        console.log("newPassword input event:", this.value);
       });
     } else {
-      console.warn("User not authenticated. Data loading deferred.");
+      console.error("newPassword input not found!");
     }
+
+    // --- Dark Mode Persistence ---
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const storedDarkMode = localStorage.getItem("darkMode");
+
+    if (storedDarkMode === "true") {
+      document.body.classList.add("dark-mode");
+    } else if (storedDarkMode === "false") {
+      document.body.classList.remove("dark-mode");
+    } else {
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.body.classList.add("dark-mode");
+      } else {
+        document.body.classList.remove("dark-mode");
+      }
+    }
+
+    if (darkModeToggle) {
+      darkModeToggle.textContent = document.body.classList.contains("dark-mode")
+        ? "Light Mode"
+        : "Dark Mode";
+
+      darkModeToggle.addEventListener("click", function () {
+        if (document.body.classList.contains("dark-mode")) {
+          document.body.classList.remove("dark-mode");
+          localStorage.setItem("darkMode", "false");
+          darkModeToggle.textContent = "Dark Mode";
+        } else {
+          document.body.classList.add("dark-mode");
+          localStorage.setItem("darkMode", "true");
+          darkModeToggle.textContent = "Light Mode";
+        }
+      });
+    }
+
+    if (localStorage.getItem("darkMode") === null && window.matchMedia) {
+      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+        if (event.matches) {
+          document.body.classList.add("dark-mode");
+          if (darkModeToggle) darkModeToggle.textContent = "Light Mode";
+        } else {
+          document.body.classList.remove("dark-mode");
+          if (darkModeToggle) darkModeToggle.textContent = "Dark Mode";
+        }
+      });
+    }
+    // --- End Dark Mode Persistence ---
+
+    const message = sessionStorage.getItem("welcomeMessage");
+    if (message) {
+      showToast(message);
+      sessionStorage.removeItem("welcomeMessage");
+    }
+  }).catch(error => {
+    console.error("Initialization halted due to CSRF token load failure.", error);
   });
 
   // --- Auto-scroll During Drag ---

moveFiles.php

@@ -20,6 +20,15 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to move files."]);
+        exit();
+    }
+}
 
 $data = json_decode(file_get_contents("php://input"), true);
 if (

networkUtils.js

@@ -1,32 +1,31 @@
-// networkUtils.js
-export function sendRequest(url, method = "GET", data = null) {
-  console.log("Sending request to:", url, "with method:", method);
+export function sendRequest(url, method = "GET", data = null, customHeaders = {}) {
   const options = {
     method,
-    credentials: 'include', // include cookies in requests
+    credentials: 'include',
     headers: {}
   };
 
+  // Merge custom headers
+  Object.assign(options.headers, customHeaders);
+
   // If data is provided and is not FormData, assume JSON.
   if (data && !(data instanceof FormData)) {
-    options.headers["Content-Type"] = "application/json";
+    if (!options.headers["Content-Type"]) {
+      options.headers["Content-Type"] = "application/json";
+    }
     options.body = JSON.stringify(data);
   } else if (data instanceof FormData) {
-    // For FormData, don't set the Content-Type header; the browser will handle it.
     options.body = data;
   }
 
   return fetch(url, options)
     .then(response => {
-      console.log("Response status:", response.status);
       if (!response.ok) {
         return response.text().then(text => {
           throw new Error(`HTTP error ${response.status}: ${text}`);
         });
       }
-      return response.json().catch(() => {
-        console.warn("Response is not JSON, returning as text");
-        return response.text();
-      });
+      const clonedResponse = response.clone();
+      return response.json().catch(() => clonedResponse.text());
     });
 }

removeChunks.php

@@ -0,0 +1,64 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Validate CSRF token from POST
+$receivedToken = isset($_POST['csrf_token']) ? trim($_POST['csrf_token']) : '';
+if ($receivedToken !== $_SESSION['csrf_token']) {
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    http_response_code(403);
+    exit;
+}
+
+// Ensure a folder parameter is provided
+if (!isset($_POST['folder'])) {
+    echo json_encode(["error" => "No folder specified"]);
+    http_response_code(400);
+    exit;
+}
+
+$folder = $_POST['folder'];
+// Validate the folder name (only alphanumerics, dashes allowed)
+if (!preg_match('/^resumable_[A-Za-z0-9\-]+$/', $folder)) {
+    echo json_encode(["error" => "Invalid folder name"]);
+    http_response_code(400);
+    exit;
+}
+
+$tempDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder;
+
+// If the folder doesn't exist, simply return success.
+if (!is_dir($tempDir)) {
+    echo json_encode(["success" => true, "message" => "Temporary folder already removed."]);
+    exit;
+}
+
+// Recursively delete directory using RecursiveDirectoryIterator
+function rrmdir($dir) {
+    if (!is_dir($dir)) {
+        return;
+    }
+    $it = new RecursiveIteratorIterator(
+        new RecursiveDirectoryIterator($dir, FilesystemIterator::SKIP_DOTS),
+        RecursiveIteratorIterator::CHILD_FIRST
+    );
+    foreach ($it as $file) {
+        if ($file->isDir()){
+            rmdir($file->getRealPath());
+        } else {
+            unlink($file->getRealPath());
+        }
+    }
+    rmdir($dir);
+}
+
+rrmdir($tempDir);
+
+// Verify removal
+if (!is_dir($tempDir)) {
+    echo json_encode(["success" => true, "message" => "Temporary folder removed."]);
+} else {
+    echo json_encode(["error" => "Failed to remove temporary folder."]);
+    http_response_code(500);
+}
+?>

removeUser.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 $usersFile = USERS_DIR . USERS_FILE;
@@ -72,5 +72,17 @@ if (!$userFound) {
 
 // Write the updated list back to users.txt
 file_put_contents($usersFile, implode(PHP_EOL, $newUsers) . PHP_EOL);
+
+// Also update the userPermissions.json file
+$permissionsFile = USERS_DIR . "userPermissions.json";
+if (file_exists($permissionsFile)) {
+    $permissionsJson = file_get_contents($permissionsFile);
+    $permissionsArray = json_decode($permissionsJson, true);
+    if (is_array($permissionsArray) && isset($permissionsArray[$usernameToRemove])) {
+        unset($permissionsArray[$usernameToRemove]);
+        file_put_contents($permissionsFile, json_encode($permissionsArray, JSON_PRETTY_PRINT));
+    }
+}
+
 echo json_encode(["success" => "User removed successfully"]);
 ?>

renameFile.php

@@ -22,6 +22,16 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to rename files."]);
+        exit();
+    }
+}
+
 $data = json_decode(file_get_contents("php://input"), true);
 if (!$data || !isset($data['folder']) || !isset($data['oldName']) || !isset($data['newName'])) {
     echo json_encode(["error" => "Invalid input"]);

renameFolder.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 header("Cache-Control: no-cache, no-store, must-revalidate");
 header("Pragma: no-cache");
@@ -27,6 +27,15 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     http_response_code(403);
     exit;
 }
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to rename folders."]);
+        exit();
+    }
+}
 
 // Get the JSON input and decode it
 $input = json_decode(file_get_contents('php://input'), true);

saveFile.php

@@ -18,6 +18,15 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to save files."]);
+        exit();
+    }
+}
 
 $data = json_decode(file_get_contents("php://input"), true);
 

saveFileTag.php

@@ -0,0 +1,138 @@
+<?php
+require_once 'config.php';
+header("Cache-Control: no-cache, no-store, must-revalidate");
+header("Pragma: no-cache");
+header("Expires: 0");
+header('Content-Type: application/json');
+
+// Check authentication.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    http_response_code(401);
+    exit;
+}
+
+// CSRF Protection: validate token from header.
+$headers = getallheaders();
+if (!isset($headers['X-CSRF-Token']) || $headers['X-CSRF-Token'] !== $_SESSION['csrf_token']) {
+    echo json_encode(["error" => "Invalid CSRF token."]);
+    http_response_code(403);
+    exit;
+}
+
+// Retrieve and sanitize input.
+$data = json_decode(file_get_contents('php://input'), true);
+$file = isset($data['file']) ? trim($data['file']) : '';
+$folder = isset($data['folder']) ? trim($data['folder']) : 'root';
+$tags = isset($data['tags']) ? $data['tags'] : [];
+
+// Basic validation.
+if ($file === '') {
+    echo json_encode(["error" => "No file specified."]);
+    exit;
+}
+
+$globalTagsFile = META_DIR . "createdTags.json";
+
+// If file is "global", update the global tags only.
+if ($file === "global") {
+    if (!file_exists($globalTagsFile)) {
+        if (file_put_contents($globalTagsFile, json_encode([], JSON_PRETTY_PRINT)) === false) {
+            echo json_encode(["error" => "Failed to create global tags file."]);
+            exit;
+        }
+    }
+    $globalTags = json_decode(file_get_contents($globalTagsFile), true);
+    if (!is_array($globalTags)) {
+        $globalTags = [];
+    }
+    // If deleteGlobal flag is set and tagToDelete is provided, remove it.
+    if (isset($data['deleteGlobal']) && $data['deleteGlobal'] === true && isset($data['tagToDelete'])) {
+        $tagToDelete = strtolower($data['tagToDelete']);
+        $globalTags = array_values(array_filter($globalTags, function($globalTag) use ($tagToDelete) {
+            return strtolower($globalTag['name']) !== $tagToDelete;
+        }));
+    } else {
+        // Otherwise, merge new tags.
+        foreach ($tags as $tag) {
+            $found = false;
+            foreach ($globalTags as &$globalTag) {
+                if (strtolower($globalTag['name']) === strtolower($tag['name'])) {
+                    $globalTag['color'] = $tag['color'];
+                    $found = true;
+                    break;
+                }
+            }
+            if (!$found) {
+                $globalTags[] = $tag;
+            }
+        }
+    }
+    if (file_put_contents($globalTagsFile, json_encode($globalTags, JSON_PRETTY_PRINT)) === false) {
+        echo json_encode(["error" => "Failed to save global tags."]);
+        exit;
+    }
+    echo json_encode(["success" => "Global tags updated successfully.", "globalTags" => $globalTags]);
+    exit;
+}
+
+// Validate folder name.
+if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
+    echo json_encode(["error" => "Invalid folder name."]);
+    exit;
+}
+
+function getMetadataFilePath($folder) {
+    if (strtolower($folder) === 'root' || $folder === '') {
+        return META_DIR . "root_metadata.json";
+    }
+    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
+}
+
+$metadataFile = getMetadataFilePath($folder);
+$metadata = file_exists($metadataFile) ? json_decode(file_get_contents($metadataFile), true) : [];
+
+if (!isset($metadata[$file])) {
+    $metadata[$file] = [];
+}
+$metadata[$file]['tags'] = $tags;
+
+if (file_put_contents($metadataFile, json_encode($metadata, JSON_PRETTY_PRINT)) === false) {
+    echo json_encode(["error" => "Failed to save tag data."]);
+    exit;
+}
+
+// Now update the global tags file as well.
+if (!file_exists($globalTagsFile)) {
+    if (file_put_contents($globalTagsFile, json_encode([], JSON_PRETTY_PRINT)) === false) {
+        echo json_encode(["error" => "Failed to create global tags file."]);
+        exit;
+    }
+}
+
+$globalTags = json_decode(file_get_contents($globalTagsFile), true);
+if (!is_array($globalTags)) {
+    $globalTags = [];
+}
+
+foreach ($tags as $tag) {
+    $found = false;
+    foreach ($globalTags as &$globalTag) {
+        if (strtolower($globalTag['name']) === strtolower($tag['name'])) {
+            $globalTag['color'] = $tag['color'];
+            $found = true;
+            break;
+        }
+    }
+    if (!$found) {
+        $globalTags[] = $tag;
+    }
+}
+
+if (file_put_contents($globalTagsFile, json_encode($globalTags, JSON_PRETTY_PRINT)) === false) {
+    echo json_encode(["error" => "Failed to save global tags."]);
+    exit;
+}
+
+echo json_encode(["success" => "Tag data saved successfully.", "tags" => $tags, "globalTags" => $globalTags]);
+?>

styles.css

@@ -12,31 +12,28 @@ body {
 
 body {
   letter-spacing: 0.2px;
+  overflow-x: hidden;
+}
+
+.custom-dash {
+  display: inline-block;
+  transform: scaleX(1.5);
+  padding-left: 2px !important;
+  padding-right: 2px !important;
 }
 
 /* CONTAINER */
-.container {
-  margin-top: 20px;
-}
-
+.container,
 .container-fluid {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-  margin-top: 20px;
+  margin-top: 10px;
+  padding-right: 4px !important;
+  padding-left: 4px !important;
 }
 
-/* Increase left/right padding for larger screens */
-@media (min-width: 768px) {
+@media (min-width: 1300px) {
   .container-fluid {
-    padding-left: 50px !important;
-    padding-right: 50px !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container-fluid {
-    padding-left: 100px !important;
-    padding-right: 100px !important;
+    padding-left: 40px !important;
+    padding-right: 40px !important;
   }
 }
 
@@ -47,9 +44,6 @@ body {
 /************************************************************/
 /* FLEXBOX HEADER: LOGO, TITLE, BUTTONS FIXED               */
 /************************************************************/
-#uploadCard, #folderManagementCard {
-  min-height: 342px;
-}
 
 .btn-login {
   margin-top: 10px;
@@ -142,14 +136,14 @@ body.dark-mode header {
   justify-content: flex-end;
   flex: 1;
   min-width: 150px;
-  gap: 10px;
+  gap: 0px;
 }
 
 .header-buttons button {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 10px;
+  padding: 9px;
   border-radius: 50%;
   color: #fff;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
@@ -229,17 +223,19 @@ body.dark-mode .folder-help-tooltip {
 #folderHelpBtn i.material-icons.folder-help-icon {
   -webkit-text-fill-color: orange !important;
   color: inherit !important;
+  padding-right: 10px !important;
 }
 
 body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
   -webkit-text-fill-color: #ffa500 !important;
+  padding-right: 10px !important;
 }
 
 /************************************************************/
 /* RESPONSIVE HEADER FIXES                                 */
 /************************************************************/
 
-@media (max-width: 970px) {
+@media (max-width: 790px) {
   .header-container {
     flex-wrap: wrap;
     height: auto;
@@ -279,7 +275,7 @@ body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
     flex-direction: row;
     justify-content: center;
     gap: 5px;
-    margin-top: 10px;
+    margin-top: 5px;
   }
 }
 
@@ -292,12 +288,14 @@ body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
   color: white;
 }
 
-.material-icons.folder-icon {
+.material-icons.folder-icon,
+.material-icons.gallery-icon {
   color: black;
   margin-right: 5px;
 }
 
-body.dark-mode .material-icons.folder-icon {
+body.dark-mode .material-icons.folder-icon,
+body.dark-mode .material-icons.gallery-icon {
   color: white;
   margin-right: 5px;
 }
@@ -311,7 +309,7 @@ body.dark-mode .material-icons.folder-icon {
   border: none;
   color: red;
   cursor: pointer;
-  margin-right: 8px;
+  margin-right: 0px;
   padding: 0;
   border-radius: 50%;
   transition: background-color 0.3s;
@@ -325,6 +323,10 @@ body.dark-mode .material-icons.folder-icon {
 /* ===========================================================
    FORMS & LOGIN
    =========================================================== */
+.remember-me-container {
+  margin-top: 20px !important;
+}
+
 #loginForm {
   margin: 0 auto;
   max-width: 400px;
@@ -366,21 +368,6 @@ body.dark-mode #loginForm button:hover {
    CARDS & MODALS
    =========================================================== */
 
-.card {
-  background-color: #fff;
-  color: #000;
-  border: 1px solid #ddd;
-  max-width: 900px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-body.dark-mode .card {
-  background-color: #2c2c2c;
-  color: #e0e0e0;
-  border: 1px solid #444;
-}
-
 #restoreFilesModal .modal-content {
   position: fixed !important;
   top: 50% !important;
@@ -521,17 +508,6 @@ body.dark-mode .modal .modal-content {
   border-color: #444;
 }
 
-.editor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 10px;
-}
-
-body.dark-mode .editor-header {
-  background-color: #2c2c2c;
-}
-
 .editor-close-btn {
   position: absolute;
   top: 10px;
@@ -574,12 +550,12 @@ body.dark-mode .editor-close-btn:hover {
 /* Editor Modal */
 .editor-modal {
   position: fixed;
-  top: 5%;
+  top: 2%;
   left: 5%;
   width: 90vw;
   height: 90vh;
   background-color: #fff;
-  padding: 20px;
+  padding: 10px 20px 20px 20px;
   border: 1px solid #ccc;
   border-radius: 4px !important;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
@@ -616,15 +592,25 @@ body.dark-mode .editor-modal {
   }
 }
 
-.editor-title {
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  font-size: 1.5rem;
-  max-width: 95%;
-  display: block;
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 33px;
+  padding: 0 10px;
+  margin-bottom: 7px;
 }
 
+.editor-title {
+  margin: 0;
+  line-height: 33px;
+}
+
+body.dark-mode .editor-header {
+  background-color: #2c2c2c;
+}
+
+
 @media (max-width: 600px) {
   .editor-title {
     font-size: 1.2rem;
@@ -634,6 +620,7 @@ body.dark-mode .editor-modal {
 
 .editor-controls {
   text-align: right;
+  margin-right: 30px;
   margin-bottom: 5px;
 }
 
@@ -690,6 +677,37 @@ body.dark-mode .editor-modal {
 /* ===========================================================
    UPLOAD PROGRESS STYLES
    =========================================================== */
+.pause-resume-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+  margin-right: 5px;
+}
+
+.material-icons.pauseResumeBtn {
+  color: black !important;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+body.dark-mode .material-icons.pauseResumeBtn {
+  color: white !important;
+}
+
+body.dark-mode .material-icons.pauseResumeBtn:hover {
+  background-color: rgba(255, 215, 0, 0.3);
+  color: #fff;
+}
+
+body:not(.dark-mode) .material-icons.pauseResumeBtn:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #000;
+}
+
 #uploadProgressContainer ul {
   list-style: none;
   padding: 0;
@@ -899,6 +917,7 @@ body.dark-mode #fileList table tr {
   word-break: break-word !important;
   text-align: left !important;
   line-height: 1.2 !important;
+  vertical-align: middle !important;
   padding: 8px 10px !important;
   max-width: 250px !important;
   min-width: 120px !important;
@@ -978,29 +997,6 @@ label {
   display: none;
 }
 
-#uploadFolderRow {
-  margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
-  #uploadFolderRow .col-md-6 {
-    margin-bottom: 15px;
-  }
-
-  #uploadFolderRow .col-md-6:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.card-header {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-
-.card-body .form-group {
-  margin-bottom: 5px !important;
-}
-
 #createFolderBtn {
   margin-top: 0px !important;
   height: 40px !important;
@@ -1055,37 +1051,9 @@ body.dark-mode .custom-prev-next-btn:hover:not(:disabled) {
   background-color: #555;
 }
 
-.folder-option:hover {
-  background-color: #f0f0f0;
-  padding: 2px 4px;
-}
-
-.folder-option.selected {
-  background-color: #d0d0d0;
-  border-radius: 4px;
-  padding: 2px 4px;
-}
-
-body.dark-mode .folder-option.selected {
-  background-color: #444;
-  color: #fff;
-  border-radius: 4px;
-  padding: 2px 4px;
-}
-
-body.dark-mode .folder-option:hover {
-  background-color: #333;
-  color: #fff;
-  padding: 2px 4px;
-}
-
-.custom-folder-card-body {
-  padding-top: 5px !important;
-}
-
 #customToast {
   position: fixed;
-  top: 20px;
+  bottom: 20px;
   right: 20px;
   background: #333;
   color: #fff;
@@ -1100,7 +1068,7 @@ body.dark-mode .folder-option:hover {
 }
 
 #customToast.show {
-  opacity: 1;
+  opacity: 0.9;
 }
 
 .button-wrap {
@@ -1129,9 +1097,17 @@ body.dark-mode .folder-option:hover {
 }
 
 #fileListContainer {
-  padding: 10px;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  max-width: 100%;
+  padding-bottom: 10px !important;
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+  margin: 0 auto 20px;
+}
+
+@media (max-width: 750px) {
+  #fileListContainer {
+    width: 99%;
+  }
 }
 
 body.dark-mode #fileListContainer {
@@ -1139,9 +1115,6 @@ body.dark-mode #fileListContainer {
   color: #e0e0e0;
   border: 1px solid #444;
   border-radius: 8px;
-  padding: 10px;
-  margin-top: 20px;
-
 }
 
 #fileListContainer>h2,
@@ -1160,7 +1133,7 @@ body.dark-mode #fileListContainer {
 }
 
 .col-12.col-md-4.text-left {
-  margin-left: -15px;
+  margin-left: -17px;
 }
 
 @media (max-width: 600px) {
@@ -1171,6 +1144,7 @@ body.dark-mode #fileListContainer {
 
 #fileListTitle {
   font-size: 1.8em;
+  margin-top: 10px;
   margin-bottom: 15px;
 }
 
@@ -1231,6 +1205,24 @@ body.dark-mode #fileListContainer {
 /* ===========================================================
    FOLDER TREE STYLES
    =========================================================== */
+/* Make breadcrumb links look clickable */
+.breadcrumb-link {
+  cursor: pointer;
+  color: #007bff;
+  text-decoration: underline;
+}
+
+.breadcrumb-link:hover {
+  color: #0056b3;
+}
+
+.breadcrumb-link.selected {
+  background-color: #e9ecef;
+  font-weight: bold;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
 .folder-tree {
   list-style-type: none;
   padding-left: 10px;
@@ -1263,15 +1255,38 @@ body.dark-mode #fileListContainer {
   width: 30px;
 }
 
-.folder-option {
-  cursor: pointer;
-
-}
-
 #folderTreeContainer {
   display: block;
 }
 
+.folder-option {
+  cursor: pointer;
+}
+
+.folder-option:hover {
+  background-color: #f0f0f0;
+  padding: 2px 4px;
+}
+
+.folder-option.selected {
+  background-color: #d0d0d0;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+body.dark-mode .folder-option.selected {
+  background-color: #444;
+  color: #fff;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+body.dark-mode .folder-option:hover {
+  background-color: #333;
+  color: #fff;
+  padding: 2px 4px;
+}
+
 /* ===========================================================
    FILE MANAGER INLINE STYLE REMOVAL - New Classes
    =========================================================== */
@@ -1280,12 +1295,13 @@ body.dark-mode #fileListContainer {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: nowrap;
-  text-align: center;
-  min-height: 30px;
-  margin: 0 auto 10px;
-  padding: 10px;
-  width: 90% !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 25px;
+  padding: 5px;
+  margin-bottom: 10px;
+  max-width: 90%;
 }
 
 .image-preview-modal-content {
@@ -1329,7 +1345,6 @@ body.dark-mode .image-preview-modal-content {
 }
 
 .share-btn {
-  /* Your custom styles here */
   border: none;
   color: white;
   padding: 8px 12px;
@@ -1567,7 +1582,7 @@ body.dark-mode .btn-secondary {
 
 #toggleViewBtn {
   margin-bottom: 20px;
-  margin-left: 15px;
+  margin-left: 14px;
   padding: 10px 20px;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
@@ -1579,9 +1594,15 @@ body.dark-mode .btn-secondary {
   transition: background 0.3s ease, box-shadow 0.3s ease;
 }
 
+@media (max-width: 768px) {
+  #toggleViewBtn {
+    margin-left: 0 !important;
+  }
+}
+
 @media (max-width: 600px) {
   #toggleViewBtn {
-    margin-left: auto !important;
+    margin-left: 0 !important;
     margin-right: auto !important;
     display: block !important;
   }
@@ -1701,7 +1722,7 @@ body.dark-mode .folder-help-summary {
 body.dark-mode .folder-help-icon {
   color: #f6a72c;
   font-size: 20px;
-  
+
 }
 
 body.dark-mode #searchIcon {
@@ -1796,4 +1817,306 @@ body.dark-mode .drop-hover {
 
 #restoreFilesList li label {
   margin-left: 8px !important;
+}
+
+body.dark-mode #fileContextMenu {
+  background-color: #2c2c2c !important;
+  border: 1px solid #555 !important;
+  color: #e0e0e0 !important;
+}
+body.dark-mode #fileContextMenu div {
+  color: #e0e0e0 !important;
+}
+
+#folderContextMenu {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+}
+body.dark-mode #folderContextMenu {
+  background-color: #2c2c2c;
+  border-color: #555;
+  color: #e0e0e0;
+}
+
+.main-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.drop-target-sidebar {
+  display: none;
+  width: 50px;
+  transition: width 0.3s ease;
+  background-color: #f8f9fa;
+  border-right: 2px dashed #1565C0;
+  padding: 10px;
+}
+@media (min-width: 769px) {
+  .drop-target-sidebar {
+    display: block;
+  }
+}
+.drop-target-sidebar.active {
+  width: 350px;
+}
+
+.main-column {
+  flex: 1;
+  transition: margin-left 0.3s ease;
+}
+
+#uploadFolderRow {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1rem;
+}
+@media (max-width: 768px) {
+  #uploadFolderRow {
+    gap: 0px;
+  }
+}
+#leftCol,
+#rightCol {
+  display: flex;
+  justify-content: center;
+  min-width: 370px;
+  align-self: flex-start;
+}
+
+#leftCol {
+  flex: 0 1 60%;
+}
+#rightCol {
+  flex: 0 1 40%;
+
+}
+
+@media (max-width: 768px) {
+  .main-wrapper {
+    flex-direction: column;
+  }
+  .drop-target-sidebar {
+    display: none !important;
+  }
+  #uploadFolderRow {
+    flex-wrap: wrap;
+  }
+  #leftCol, #rightCol {
+    flex: 0 1 100% !important;
+  }
+  #rightCol {
+    margin-bottom: 0;
+  }
+}
+
+#sidebarDropArea.highlight,
+#uploadFolderRow.highlight {
+  border: 2px dashed #1565C0;
+  background-color: #eef;
+}
+
+.drag-header {
+  cursor: grab;
+  user-select: none;
+  position: relative;
+}
+
+.drag-header::after {
+  content: '⋮⋮';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: #1565C0;
+  pointer-events: none;
+}
+
+.dragging {
+  transform: scale(1.05);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  z-index: 10000;
+}
+
+#uploadCard,
+#folderManagementCard {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  width: 100%;
+  margin-bottom: 20px;
+  min-height: 353px;
+}
+
+
+#uploadFolderRow.highlight {
+  min-height: 353px;
+  margin-bottom: 20px;
+}
+
+#sidebarDropArea,
+#uploadFolderRow {
+  background-color: transparent;
+}
+#sidebarDropArea {
+  display: none;
+}
+
+body.dark-mode #sidebarDropArea,
+body.dark-mode #uploadFolderRow {
+  background-color: transparent;
+}
+
+body.dark-mode #sidebarDropArea.highlight,
+body.dark-mode #uploadFolderRow.highlight { 
+  background-color: #333; 
+  border: 2px dashed #555; 
+  color: #fff;
+}
+
+.drop-target-sidebar.highlight {
+  margin-top: 10px;
+}
+
+.drop-target-sidebar:not(.highlight) {
+  border: none !important;
+}
+
+.dragging:focus {
+  outline: none;
+}
+
+#sidebarDropArea > .card {
+  margin-bottom: 1rem;
+}
+
+.card {
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #ddd;
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+body.dark-mode .card {
+  background-color: #2c2c2c;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+
+.card-header {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.custom-folder-card-body {
+  padding-top: 5px !important;
+  padding-right: 0 !important;
+}
+
+#addUserModal,
+#removeUserModal {
+  z-index: 5000 !important;
+}
+
+#customConfirmModal {
+  z-index: 6000 !important;  
+}
+
+.admin-panel-content {
+  background: #fff;
+  color: #000;
+}
+
+body.dark-mode .admin-panel-content {
+  background: #2c2c2c;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+
+body.dark-mode .admin-panel-content input,
+body.dark-mode .admin-panel-content select,
+body.dark-mode .admin-panel-content textarea {
+  background: #3a3a3a;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+body.dark-mode .admin-panel-content label {
+  color: #e0e0e0;
+}
+
+#openChangePasswordModalBtn {
+  width: auto;
+  padding: 5px 10px;
+  font-size: 14px;
+  margin-right: 300px;
+}
+
+#changePasswordModal {
+  z-index: 9999;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+.rise-effect {
+  transform: translateY(-20px);
+  transition: transform 0.3s ease;
+}
+
+.toggle-modal-btn,
+.collapse-btn {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 8px;
+  font-size: 24px;
+  color: #616161;
+  border-radius: 50%;
+  transition: background 0.3s ease;
+}
+
+.toggle-modal-btn:hover,
+.collapse-btn:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.toggle-modal-btn:focus,
+.collapse-btn:focus {
+  outline: none;
+}
+
+.header-drop-zone {
+  width: 66px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  display: inline-flex;
+}
+
+.header-drop-zone.drag-active {
+  border: 2px dashed #1565C0;
+  background-color: #eef;
+  background-color: transparent;
+  transition: width 0.3s ease;
+  box-sizing: border-box;
+}
+body.dark-mode .header-drop-zone.drag-active { 
+  background-color: #333; 
+  border: 2px dashed #555; 
+  color: #fff;
+}
+
+.header-drop-zone.drag-active:empty::before {
+  content: "Drop";
+  font-size: 10px;
+  color: #aaa;
 }

token.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 echo json_encode([
     "csrf_token" => $_SESSION['csrf_token'],

totp_disable.php

@@ -0,0 +1,74 @@
+<?php
+// disableTOTP.php
+
+require_once 'vendor/autoload.php';
+require_once 'config.php';
+
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(403);
+    echo json_encode(["error" => "Not authenticated"]);
+    exit;
+}
+
+// Verify CSRF token from request headers.
+$csrfHeader = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
+if (!isset($_SESSION['csrf_token']) || $csrfHeader !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+header('Content-Type: application/json');
+
+$username = $_SESSION['username'] ?? '';
+if (empty($username)) {
+    http_response_code(400);
+    echo json_encode(["error" => "Username not found in session"]);
+    exit;
+}
+
+/**
+ * Removes the TOTP secret for the given user in users.txt.
+ *
+ * @param string $username
+ * @return bool True on success, false otherwise.
+ */
+function removeUserTOTPSecret($username) {
+    global $encryptionKey;
+    $usersFile = USERS_DIR . USERS_FILE;
+    if (!file_exists($usersFile)) {
+        return false;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $modified = false;
+    $newLines = [];
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) < 3) {
+            $newLines[] = $line;
+            continue;
+        }
+        if ($parts[0] === $username) {
+            // Remove the TOTP secret by setting it to an empty string.
+            if (count($parts) >= 4) {
+                $parts[3] = "";
+            }
+            $modified = true;
+            $newLines[] = implode(":", $parts);
+        } else {
+            $newLines[] = $line;
+        }
+    }
+    if ($modified) {
+        file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL, LOCK_EX);
+    }
+    return $modified;
+}
+
+if (removeUserTOTPSecret($username)) {
+    echo json_encode(["success" => true, "message" => "TOTP disabled successfully."]);
+} else {
+    http_response_code(500);
+    echo json_encode(["error" => "Failed to disable TOTP."]);
+}
+?>

totp_setup.php

@@ -0,0 +1,148 @@
+<?php
+// totp_setup.php
+
+require_once 'vendor/autoload.php';
+require_once 'config.php';
+
+use Endroid\QrCode\Builder\Builder;
+use Endroid\QrCode\Writer\PngWriter;
+use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelHigh;
+
+// For debugging purposes, you might enable error reporting temporarily:
+// ini_set('display_errors', 1);
+// error_reporting(E_ALL);
+
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(403);
+    exit;
+}
+
+// Verify CSRF token provided as a GET parameter.
+if (!isset($_GET['csrf']) || $_GET['csrf'] !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+if (!$username) {
+    http_response_code(400);
+    exit;
+}
+
+// Set header to output a PNG image.
+header("Content-Type: image/png");
+
+// Define the path to your users.txt file.
+$usersFile = USERS_DIR . USERS_FILE;
+
+/**
+ * Updates the TOTP secret for the given user in users.txt.
+ *
+ * @param string $username
+ * @param string $encryptedSecret The encrypted TOTP secret.
+ */
+function updateUserTOTPSecret($username, $encryptedSecret) {
+    global $usersFile;
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $newLines = [];
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) < 3) {
+            $newLines[] = $line;
+            continue;
+        }
+        if ($parts[0] === $username) {
+            // If a fourth field exists, update it; otherwise, append it.
+            if (count($parts) >= 4) {
+                $parts[3] = $encryptedSecret;
+            } else {
+                $parts[] = $encryptedSecret;
+            }
+            $newLines[] = implode(':', $parts);
+        } else {
+            $newLines[] = $line;
+        }
+    }
+    file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL, LOCK_EX);
+}
+
+/**
+ * Retrieves the current user's TOTP secret from users.txt (if present).
+ *
+ * @param string $username
+ * @return string|null The decrypted TOTP secret or null if not found.
+ */
+function getUserTOTPSecret($username) {
+    global $usersFile, $encryptionKey;
+    if (!file_exists($usersFile)) {
+        return null;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
+            return decryptData($parts[3], $encryptionKey);
+        }
+    }
+    return null;
+}
+
+/**
+ * Retrieves the global OTPAuth URL from admin configuration.
+ *
+ * @return string Global OTPAuth URL template or an empty string if not set.
+ */
+function getGlobalOtpauthUrl() {
+    global $encryptionKey;
+    $adminConfigFile = USERS_DIR . 'adminConfig.json';
+    if (file_exists($adminConfigFile)) {
+        $encryptedContent = file_get_contents($adminConfigFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        if ($decryptedContent !== false) {
+            $config = json_decode($decryptedContent, true);
+            if (isset($config['globalOtpauthUrl']) && !empty($config['globalOtpauthUrl'])) {
+                return $config['globalOtpauthUrl'];
+            }
+        }
+    }
+    return "";
+}
+
+$tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
+
+// Retrieve the current TOTP secret for the user.
+$totpSecret = getUserTOTPSecret($username);
+if (!$totpSecret) {
+    // If no TOTP secret exists, generate a new one.
+    $totpSecret = $tfa->createSecret();
+    $encryptedSecret = encryptData($totpSecret, $encryptionKey);
+    updateUserTOTPSecret($username, $encryptedSecret);
+}
+
+// Determine the otpauth URL to use.
+// If a global OTPAuth URL template is defined, replace placeholders {label} and {secret}.
+// Otherwise, use the default method.
+$globalOtpauthUrl = getGlobalOtpauthUrl();
+if (!empty($globalOtpauthUrl)) {
+    $label = "FileRise:" . $username;
+    $otpauthUrl = str_replace(
+        ["{label}", "{secret}"],
+        [urlencode($label), $totpSecret],
+        $globalOtpauthUrl
+    );
+} else {
+    $label = urlencode("FileRise:" . $username);
+    $issuer = urlencode("FileRise");
+    $otpauthUrl = "otpauth://totp/{$label}?secret={$totpSecret}&issuer={$issuer}";
+}
+
+// Build the QR code using Endroid QR Code.
+$result = Builder::create()
+    ->writer(new PngWriter())
+    ->data($otpauthUrl)
+    ->errorCorrectionLevel(new ErrorCorrectionLevelHigh())
+    ->build();
+
+header('Content-Type: ' . $result->getMimeType());
+echo $result->getString();
+?>

totp_verify.php

@@ -0,0 +1,84 @@
+<?php
+// verifyTOTPSetup.php
+
+require_once 'vendor/autoload.php';
+require_once 'config.php';
+
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(403);
+    echo json_encode(["error" => "Not authenticated"]);
+    exit;
+}
+
+// Verify CSRF token from request headers.
+$csrfHeader = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
+if (!isset($_SESSION['csrf_token']) || $csrfHeader !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+// Ensure Content-Type is JSON.
+header('Content-Type: application/json');
+
+// Read and decode the JSON request body.
+$input = json_decode(file_get_contents("php://input"), true);
+if (!isset($input['totp_code']) || strlen(trim($input['totp_code'])) !== 6 || !ctype_digit(trim($input['totp_code']))) {
+    http_response_code(400);
+    echo json_encode(["error" => "A valid 6-digit TOTP code is required"]);
+    exit;
+}
+
+$totpCode = trim($input['totp_code']);
+$username = $_SESSION['username'] ?? '';
+if (empty($username)) {
+    http_response_code(400);
+    echo json_encode(["error" => "Username not found in session"]);
+    exit;
+}
+
+/**
+ * Retrieves the current user's TOTP secret from users.txt.
+ *
+ * @param string $username
+ * @return string|null The decrypted TOTP secret or null if not found.
+ */
+function getUserTOTPSecret($username) {
+    global $encryptionKey;
+    // Define the path to your users file.
+    $usersFile = USERS_DIR . USERS_FILE;
+    if (!file_exists($usersFile)) {
+        return null;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        // Assuming format: username:hashedPassword:role:encryptedTOTPSecret
+        if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
+            return decryptData($parts[3], $encryptionKey);
+        }
+    }
+    return null;
+}
+
+// Retrieve the user's TOTP secret.
+$totpSecret = getUserTOTPSecret($username);
+if (!$totpSecret) {
+    http_response_code(500);
+    echo json_encode(["error" => "TOTP secret not found. Please try setting up TOTP again."]);
+    exit;
+}
+
+// Verify the provided TOTP code.
+$tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
+if (!$tfa->verifyCode($totpSecret, $totpCode)) {
+    http_response_code(400);
+    echo json_encode(["error" => "Invalid TOTP code."]);
+    exit;
+}
+
+// If needed, you could update a flag or store the confirmation in the user record here.
+
+// Return a successful response.
+echo json_encode(["success" => true, "message" => "TOTP successfully verified."]);
+?>

trashRestoreDelete.js

@@ -4,20 +4,13 @@ import { toggleVisibility, showToast } from './domUtils.js';
 import { loadFileList } from './fileManager.js';
 import { loadFolderTree } from './folderManager.js';
 
-/**
- * Displays a custom confirmation modal with the given message.
- * Calls onConfirm() if the user confirms.
- */
 function showConfirm(message, onConfirm) {
-    // Assume your custom confirm modal exists with id "customConfirmModal"
-    // and has elements "confirmMessage", "confirmYesBtn", and "confirmNoBtn".
     const modal = document.getElementById("customConfirmModal");
     const messageElem = document.getElementById("confirmMessage");
     const yesBtn = document.getElementById("confirmYesBtn");
     const noBtn = document.getElementById("confirmNoBtn");
 
     if (!modal || !messageElem || !yesBtn || !noBtn) {
-        // Fallback to browser confirm if custom modal is not found.
         if (confirm(message)) {
             onConfirm();
         }
@@ -42,12 +35,7 @@ function showConfirm(message, onConfirm) {
     });
 }
 
-/**
- * Sets up event listeners for trash restore and delete operations.
- * This function should be called from main.js after authentication.
- */
 export function setupTrashRestoreDelete() {
-    console.log("Setting up trash restore/delete listeners.");
 
     // --- Attach listener to the restore button (created in auth.js) to open the modal.
     const restoreBtn = document.getElementById("restoreFilesBtn");
@@ -57,7 +45,6 @@ export function setupTrashRestoreDelete() {
             loadTrashItems();
         });
     } else {
-        console.warn("restoreFilesBtn not found. It may not be available for the current user.");
         setTimeout(() => {
             const retryBtn = document.getElementById("restoreFilesBtn");
             if (retryBtn) {

updateConfig.php

@@ -0,0 +1,100 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Verify that the user is authenticated and is an admin.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true || 
+    !isset($_SESSION['isAdmin']) || !$_SESSION['isAdmin']) {
+    http_response_code(403);
+    echo json_encode(['error' => 'Unauthorized access.']);
+    exit;
+}
+
+// Validate CSRF token.
+$receivedToken = '';
+if (isset($_SERVER['HTTP_X_CSRF_TOKEN'])) {
+    $receivedToken = trim($_SERVER['HTTP_X_CSRF_TOKEN']);
+} else {
+    $headers = array_change_key_case(getallheaders(), CASE_LOWER);
+    $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+}
+if (!isset($_SESSION['csrf_token']) || $receivedToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(['error' => 'Invalid CSRF token.']);
+    exit;
+}
+
+// Retrieve and decode JSON input.
+$input = file_get_contents('php://input');
+$data = json_decode($input, true);
+if (!is_array($data)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Invalid input.']);
+    exit;
+}
+
+// Validate and sanitize OIDC configuration.
+$oidc = isset($data['oidc']) ? $data['oidc'] : [];
+$oidcProviderUrl = isset($oidc['providerUrl']) ? filter_var($oidc['providerUrl'], FILTER_SANITIZE_URL) : '';
+$oidcClientId    = isset($oidc['clientId']) ? trim($oidc['clientId']) : '';
+$oidcClientSecret = isset($oidc['clientSecret']) ? trim($oidc['clientSecret']) : '';
+$oidcRedirectUri = isset($oidc['redirectUri']) ? filter_var($oidc['redirectUri'], FILTER_SANITIZE_URL) : '';
+
+if (!$oidcProviderUrl || !$oidcClientId || !$oidcClientSecret || !$oidcRedirectUri) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Incomplete OIDC configuration.']);
+    exit;
+}
+
+// Validate login option booleans.
+$disableFormLogin = isset($data['disableFormLogin']) ? filter_var($data['disableFormLogin'], FILTER_VALIDATE_BOOLEAN) : false;
+$disableBasicAuth = isset($data['disableBasicAuth']) ? filter_var($data['disableBasicAuth'], FILTER_VALIDATE_BOOLEAN) : false;
+$disableOIDCLogin = isset($data['disableOIDCLogin']) ? filter_var($data['disableOIDCLogin'], FILTER_VALIDATE_BOOLEAN) : false;
+
+// Retrieve the global OTPAuth URL (new field). If not provided, default to an empty string.
+$globalOtpauthUrl = isset($data['globalOtpauthUrl']) ? trim($data['globalOtpauthUrl']) : "";
+
+// Prepare configuration array.
+$configUpdate = [
+    'oidc' => [
+        'providerUrl'  => $oidcProviderUrl,
+        'clientId'     => $oidcClientId,
+        'clientSecret' => $oidcClientSecret,
+        'redirectUri'  => $oidcRedirectUri,
+    ],
+    'loginOptions' => [
+        'disableFormLogin' => $disableFormLogin,
+        'disableBasicAuth' => $disableBasicAuth,
+        'disableOIDCLogin' => $disableOIDCLogin,
+    ],
+    'globalOtpauthUrl' => $globalOtpauthUrl
+];
+
+// Define the configuration file path.
+$configFile = USERS_DIR . 'adminConfig.json';
+
+// Convert and encrypt configuration.
+$plainTextConfig = json_encode($configUpdate, JSON_PRETTY_PRINT);
+$encryptedContent = encryptData($plainTextConfig, $encryptionKey);
+
+// Attempt to write the new configuration.
+if (file_put_contents($configFile, $encryptedContent, LOCK_EX) === false) {
+    // Log the error.
+    error_log("updateConfig.php: Initial write failed, attempting to delete the old configuration file.");
+    
+    // Delete the old file.
+    if (file_exists($configFile)) {
+        unlink($configFile);
+    }
+    
+    // Try writing again.
+    if (file_put_contents($configFile, $encryptedContent, LOCK_EX) === false) {
+        error_log("updateConfig.php: Failed to write configuration even after deletion.");
+        http_response_code(500);
+        echo json_encode(['error' => 'Failed to update configuration even after cleanup.']);
+        exit;
+    }
+}
+
+echo json_encode(['success' => 'Configuration updated successfully.']);
+?>

updateUserPanel.php

@@ -0,0 +1,80 @@
+<?php
+// updateUserPanel.php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Ensure the user is authenticated.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(403);
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+// Verify the CSRF token from headers.
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$csrfToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if (!isset($_SESSION['csrf_token']) || $csrfToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+$data = json_decode(file_get_contents("php://input"), true);
+if (!is_array($data)) {
+    http_response_code(400);
+    echo json_encode(["error" => "Invalid input"]);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+if (!$username) {
+    http_response_code(400);
+    echo json_encode(["error" => "No username in session"]);
+    exit;
+}
+
+$totp_enabled = isset($data['totp_enabled']) ? filter_var($data['totp_enabled'], FILTER_VALIDATE_BOOLEAN) : false;
+$usersFile = USERS_DIR . USERS_FILE;
+
+/**
+ * Clears the TOTP secret for a given user by removing or emptying the fourth field.
+ *
+ * @param string $username
+ */
+function disableUserTOTP($username) {
+    global $usersFile;
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $newLines = [];
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        // If the line doesn't have at least three parts, leave it alone.
+        if (count($parts) < 3) {
+            $newLines[] = $line;
+            continue;
+        }
+        if ($parts[0] === $username) {
+            // If a fourth field exists, clear it; otherwise, append an empty field.
+            if (count($parts) >= 4) {
+                $parts[3] = "";
+            } else {
+                $parts[] = "";
+            }
+            $newLines[] = implode(':', $parts);
+        } else {
+            $newLines[] = $line;
+        }
+    }
+    file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL, LOCK_EX);
+}
+
+// If TOTP is disabled, clear the user's TOTP secret.
+if (!$totp_enabled) {
+    disableUserTOTP($username);
+    echo json_encode(["success" => "User panel updated: TOTP disabled"]);
+    exit;
+} else {
+    // If TOTP is enabled, do not change the stored secret.
+    echo json_encode(["success" => "User panel updated: TOTP remains enabled"]);
+    exit;
+}
+?>

updateUserPermissions.php

@@ -0,0 +1,71 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Only admins should update user permissions.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true ||
+    !isset($_SESSION['isAdmin']) || $_SESSION['isAdmin'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+// Verify the CSRF token from headers.
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$csrfToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if (!isset($_SESSION['csrf_token']) || $csrfToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+// Read the POST input.
+$input = json_decode(file_get_contents("php://input"), true);
+if (!isset($input['permissions']) || !is_array($input['permissions'])) {
+    echo json_encode(["error" => "Invalid input"]);
+    exit;
+}
+
+$permissions = $input['permissions'];
+$permissionsFile = USERS_DIR . "userPermissions.json";
+
+// Load existing permissions if available and decrypt.
+if (file_exists($permissionsFile)) {
+    $encryptedContent = file_get_contents($permissionsFile);
+    $json = decryptData($encryptedContent, $encryptionKey);
+    $existingPermissions = json_decode($json, true);
+    if (!is_array($existingPermissions)) {
+        $existingPermissions = [];
+    }
+} else {
+    $existingPermissions = [];
+}
+
+// Loop through each permission update.
+foreach ($permissions as $perm) {
+    // Ensure username is provided.
+    if (!isset($perm['username'])) continue;
+    $username = $perm['username'];
+    // Skip updating permissions for admin users.
+    if (strtolower($username) === "admin") continue;
+    
+    // Update permissions: default any missing value to false.
+    $existingPermissions[$username] = [
+        'folderOnly'    => isset($perm['folderOnly']) ? (bool)$perm['folderOnly'] : false,
+        'readOnly'      => isset($perm['readOnly']) ? (bool)$perm['readOnly'] : false,
+        'disableUpload' => isset($perm['disableUpload']) ? (bool)$perm['disableUpload'] : false
+    ];
+}
+
+// Convert the permissions array to JSON.
+$plainText = json_encode($existingPermissions, JSON_PRETTY_PRINT);
+// Encrypt the JSON data.
+$encryptedData = encryptData($plainText, $encryptionKey);
+// Save encrypted permissions back to the JSON file.
+$result = file_put_contents($permissionsFile, $encryptedData);
+if ($result === false) {
+    echo json_encode(["error" => "Failed to save user permissions."]);
+    exit;
+}
+
+echo json_encode(["success" => "User permissions updated successfully."]);
+?>

upload.js

@@ -2,11 +2,15 @@ import { loadFileList, displayFilePreview, initFileActions } from './fileManager
 import { showToast, escapeHTML } from './domUtils.js';
 import { loadFolderTree } from './folderManager.js';
 
-// Helper: Recursively traverse a dropped folder.
+/* -----------------------------------------------------
+   Helpers for Drag–and–Drop Folder Uploads (Original Code)
+----------------------------------------------------- */
+// Recursively traverse a dropped folder.
 function traverseFileTreePromise(item, path = "") {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     if (item.isFile) {
       item.file(file => {
+        // Store relative path for folder uploads.
         Object.defineProperty(file, 'customRelativePath', {
           value: path + file.name,
           writable: true,
@@ -29,7 +33,7 @@ function traverseFileTreePromise(item, path = "") {
   });
 }
 
-// Helper: Given DataTransfer items, recursively retrieve files.
+// Recursively retrieve files from DataTransfer items.
 function getFilesFromDataTransferItems(items) {
   const promises = [];
   for (let i = 0; i < items.length; i++) {
@@ -41,25 +45,27 @@ function getFilesFromDataTransferItems(items) {
   return Promise.all(promises).then(results => results.flat());
 }
 
-// Helper: Set default drop area content.
+/* -----------------------------------------------------
+   UI Helpers (Mostly unchanged from your original code)
+----------------------------------------------------- */
 function setDropAreaDefault() {
   const dropArea = document.getElementById("uploadDropArea");
   if (dropArea) {
     dropArea.innerHTML = `
-          <div id="uploadInstruction" class="upload-instruction">
-            Drop files/folders here or click 'Choose files'
-          </div>
-          <div id="uploadFileRow" class="upload-file-row">
-            <button id="customChooseBtn" type="button">
-              Choose files
-            </button>
-          </div>
-          <div id="fileInfoWrapper" class="file-info-wrapper">
-            <div id="fileInfoContainer" class="file-info-container">
-              <span id="fileInfoDefault">No files selected</span>
-            </div>
-          </div>
-        `;
+      <div id="uploadInstruction" class="upload-instruction">
+        Drop files/folders here or click 'Choose files'
+      </div>
+      <div id="uploadFileRow" class="upload-file-row">
+        <button id="customChooseBtn" type="button">Choose files</button>
+      </div>
+      <div id="fileInfoWrapper" class="file-info-wrapper">
+        <div id="fileInfoContainer" class="file-info-container">
+          <span id="fileInfoDefault">No files selected</span>
+        </div>
+      </div>
+      <!-- File input for file picker (files only) -->
+      <input type="file" id="file" name="file[]" class="form-control-file" multiple style="opacity:0; position:absolute; width:1px; height:1px;" />
+    `;
   }
 }
 
@@ -82,7 +88,6 @@ function adjustFolderHelpExpansionClosed() {
   }
 }
 
-// Helper: Update file info container count/preview.
 function updateFileInfoCount() {
   const fileInfoContainer = document.getElementById("fileInfoContainer");
   if (fileInfoContainer && window.selectedFiles) {
@@ -90,64 +95,180 @@ function updateFileInfoCount() {
       fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
     } else if (window.selectedFiles.length === 1) {
       fileInfoContainer.innerHTML = `
-        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
-        <span id="fileNameDisplay" class="file-name-display">${escapeHTML(window.selectedFiles[0].name)}</span>
+        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+          <span class="material-icons file-icon">insert_drive_file</span>
+        </div>
+        <span id="fileNameDisplay" class="file-name-display">${escapeHTML(window.selectedFiles[0].name || window.selectedFiles[0].fileName || "Unnamed File")}</span>
       `;
     } else {
       fileInfoContainer.innerHTML = `
-        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
+        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+          <span class="material-icons file-icon">insert_drive_file</span>
+        </div>
         <span id="fileCountDisplay" class="file-name-display">${window.selectedFiles.length} files selected</span>
       `;
     }
     const previewContainer = document.getElementById("filePreviewContainer");
     if (previewContainer && window.selectedFiles.length > 0) {
       previewContainer.innerHTML = "";
-      displayFilePreview(window.selectedFiles[0], previewContainer);
+      // For image files, try to show a preview (if available from the file object).
+      displayFilePreview(window.selectedFiles[0].file || window.selectedFiles[0], previewContainer);
     }
   }
 }
 
-// Helper: Create a file entry element with a remove button.
+// Helper function to repeatedly call removeChunks.php
+function removeChunkFolderRepeatedly(identifier, csrfToken, maxAttempts = 3, interval = 1000) {
+  let attempt = 0;
+  const removalInterval = setInterval(() => {
+    attempt++;
+    const params = new URLSearchParams();
+    // Prefix with "resumable_" to match your PHP regex.
+    params.append('folder', 'resumable_' + identifier);
+    params.append('csrf_token', csrfToken);
+    fetch('removeChunks.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: params.toString()
+    })
+      .then(response => response.json())
+      .then(data => {
+        console.log(`Chunk folder removal attempt ${attempt}:`, data);
+      })
+      .catch(err => {
+        console.error(`Error on removal attempt ${attempt}:`, err);
+      });
+    if (attempt >= maxAttempts) {
+      clearInterval(removalInterval);
+    }
+  }, interval);
+}
+
+/* -----------------------------------------------------
+   File Entry Creation (with Pause/Resume and Restart)
+----------------------------------------------------- */
+// Create a file entry element with a remove button and a pause/resume button.
 function createFileEntry(file) {
   const li = document.createElement("li");
   li.classList.add("upload-progress-item");
   li.style.display = "flex";
   li.dataset.uploadIndex = file.uploadIndex;
 
+  // Remove button (always added)
   const removeBtn = document.createElement("button");
   removeBtn.classList.add("remove-file-btn");
   removeBtn.textContent = "×";
-  removeBtn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    const uploadIndex = file.uploadIndex;
-    window.selectedFiles = window.selectedFiles.filter(f => f.uploadIndex !== uploadIndex);
-    li.remove();
-    updateFileInfoCount();
-  });
+// In your remove button event listener, replace the fetch call with:
+removeBtn.addEventListener("click", function (e) {
+  e.stopPropagation();
+  const uploadIndex = file.uploadIndex;
+  window.selectedFiles = window.selectedFiles.filter(f => f.uploadIndex !== uploadIndex);
+  
+  // Cancel the file upload if possible.
+  if (typeof file.cancel === "function") {
+    file.cancel();
+    console.log("Canceled file upload:", file.fileName);
+  }
+  
+  // Remove file from the resumable queue.
+  if (resumableInstance && typeof resumableInstance.removeFile === "function") {
+    resumableInstance.removeFile(file);
+  }
+  
+  // Call our helper repeatedly to remove the chunk folder.
+  if (file.uniqueIdentifier) {
+    removeChunkFolderRepeatedly(file.uniqueIdentifier, window.csrfToken, 3, 1000);
+  }
+  
+  li.remove();
+  updateFileInfoCount();
+});
   li.removeBtn = removeBtn;
+  li.appendChild(removeBtn);
 
+  // Add pause/resume/restart button if the file supports pause/resume.
+// Conditionally add the pause/resume button only if file.pause is available
+// Pause/Resume button (for resumable file–picker uploads)
+if (typeof file.pause === "function") {
+  const pauseResumeBtn = document.createElement("button");
+  pauseResumeBtn.setAttribute("type", "button"); // not a submit button
+  pauseResumeBtn.classList.add("pause-resume-btn");
+  // Start with pause icon and disable button until upload starts
+  pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+  pauseResumeBtn.disabled = true; 
+  pauseResumeBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    if (file.isError) {
+      // If the file previously failed, try restarting upload.
+      if (typeof file.retry === "function") {
+        file.retry();
+        file.isError = false;
+        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+      }
+    } else if (!file.paused) {
+      // Pause the upload (if possible)
+      if (typeof file.pause === "function") {
+        file.pause();
+        file.paused = true;
+        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">play_circle_outline</span>';
+      } else {
+      }
+    } else if (file.paused) {
+      // Resume sequence: first call to resume (or upload() fallback)
+      if (typeof file.resume === "function") {
+        file.resume();
+      } else {
+        resumableInstance.upload();
+      }
+      // After a short delay, pause again then resume
+      setTimeout(() => {
+        if (typeof file.pause === "function") {
+          file.pause();
+        } else {
+          resumableInstance.upload();
+        }
+        setTimeout(() => {
+          if (typeof file.resume === "function") {
+            file.resume();
+          } else {
+            resumableInstance.upload();
+          }
+        }, 100);
+      }, 100);
+      file.paused = false;
+      pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+    } else {
+      console.error("Pause/resume function not available for file", file);
+    }
+  });
+  li.appendChild(pauseResumeBtn);
+}
+
+  // Preview element
   const preview = document.createElement("div");
   preview.className = "file-preview";
   displayFilePreview(file, preview);
+  li.appendChild(preview);
 
+  // File name display
   const nameDiv = document.createElement("div");
   nameDiv.classList.add("upload-file-name");
-  nameDiv.textContent = file.name;
+  nameDiv.textContent = file.name || file.fileName || "Unnamed File";
+  li.appendChild(nameDiv);
 
+  // Progress bar container
   const progDiv = document.createElement("div");
   progDiv.classList.add("progress", "upload-progress-div");
   progDiv.style.flex = "0 0 250px";
   progDiv.style.marginLeft = "5px";
-
   const progBar = document.createElement("div");
   progBar.classList.add("progress-bar");
   progBar.style.width = "0%";
   progBar.innerText = "0%";
-
   progDiv.appendChild(progBar);
-  li.appendChild(removeBtn);
-  li.appendChild(preview);
-  li.appendChild(nameDiv);
   li.appendChild(progDiv);
 
   li.progressBar = progBar;
@@ -155,7 +276,11 @@ function createFileEntry(file) {
   return li;
 }
 
-// Process selected files: Build preview/progress list and store files for later submission.
+/* -----------------------------------------------------
+   Processing Files
+   - For drag–and–drop, use original processing (supports folders).
+   - For file picker, if using Resumable, those files use resumable.
+----------------------------------------------------- */
 function processFiles(filesInput) {
   const fileInfoContainer = document.getElementById("fileInfoContainer");
   const files = Array.from(filesInput);
@@ -164,12 +289,16 @@ function processFiles(filesInput) {
     if (files.length > 0) {
       if (files.length === 1) {
         fileInfoContainer.innerHTML = `
-          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
-          <span id="fileNameDisplay" class="file-name-display">${escapeHTML(files[0].name)}</span>
+          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+            <span class="material-icons file-icon">insert_drive_file</span>
+          </div>
+          <span id="fileNameDisplay" class="file-name-display">${escapeHTML(files[0].name || files[0].fileName || "Unnamed File")}</span>
         `;
       } else {
         fileInfoContainer.innerHTML = `
-          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
+          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+            <span class="material-icons file-icon">insert_drive_file</span>
+          </div>
           <span id="fileCountDisplay" class="file-name-display">${files.length} files selected</span>
         `;
       }
@@ -195,12 +324,14 @@ function processFiles(filesInput) {
     const list = document.createElement("ul");
     list.classList.add("upload-progress-list");
 
+    // Check for relative paths (for folder uploads).
     const hasRelativePaths = files.some(file => {
       const rel = file.webkitRelativePath || file.customRelativePath || "";
       return rel.trim() !== "";
     });
 
     if (hasRelativePaths) {
+      // Group files by folder.
       const fileGroups = {};
       files.forEach(file => {
         let folderName = "Root";
@@ -218,11 +349,13 @@ function processFiles(filesInput) {
       });
 
       Object.keys(fileGroups).forEach(folderName => {
-        const folderLi = document.createElement("li");
-        folderLi.classList.add("upload-folder-group");
-        folderLi.innerHTML = `<i class="material-icons folder-icon" style="vertical-align:middle; margin-right:8px;">folder</i> ${folderName}:`;
-        list.appendChild(folderLi);
-
+        // Only show folder grouping if folderName is not "Root"
+        if (folderName !== "Root") {
+          const folderLi = document.createElement("li");
+          folderLi.classList.add("upload-folder-group");
+          folderLi.innerHTML = `<i class="material-icons folder-icon" style="vertical-align:middle; margin-right:8px;">folder</i> ${folderName}:`;
+          list.appendChild(folderLi);
+        }
         const nestedUl = document.createElement("ul");
         nestedUl.classList.add("upload-folder-group-list");
         fileGroups[folderName]
@@ -234,6 +367,7 @@ function processFiles(filesInput) {
         list.appendChild(nestedUl);
       });
     } else {
+      // No relative paths – list files directly.
       files.forEach((file, index) => {
         const li = createFileEntry(file);
         li.style.display = (index < maxDisplay) ? "flex" : "none";
@@ -263,7 +397,167 @@ function processFiles(filesInput) {
   updateFileInfoCount();
 }
 
-// Function to handle file uploads; triggered when the user clicks the "Upload" button.
+/* -----------------------------------------------------
+   Resumable.js Integration for File Picker Uploads
+   (Only files chosen via file input use Resumable; folder uploads use original code.)
+----------------------------------------------------- */
+const useResumable = true; // Enable resumable for file picker uploads
+let resumableInstance;
+function initResumableUpload() {
+  resumableInstance = new Resumable({
+    target: "upload.php",
+    query: { folder: window.currentFolder || "root", upload_token: window.csrfToken },
+    chunkSize: 1.5 * 1024 * 1024, // 1.5 MB chunks
+    simultaneousUploads: 3,
+    testChunks: false,
+    throttleProgressCallbacks: 1,
+    headers: { "X-CSRF-Token": window.csrfToken }
+  });
+
+  const fileInput = document.getElementById("file");
+  if (fileInput) {
+    // Assign Resumable to file input for file picker uploads.
+    resumableInstance.assignBrowse(fileInput);
+    fileInput.addEventListener("change", function () {
+      for (let i = 0; i < fileInput.files.length; i++) {
+        resumableInstance.addFile(fileInput.files[i]);
+      }
+    });
+  }
+
+  resumableInstance.on("fileAdded", function (file) {
+    // Initialize custom paused flag
+    file.paused = false;
+    file.uploadIndex = file.uniqueIdentifier;
+    if (!window.selectedFiles) {
+      window.selectedFiles = [];
+    }
+    window.selectedFiles.push(file);
+    const progressContainer = document.getElementById("uploadProgressContainer");
+
+    // Check if a wrapper already exists; if not, create one with a UL inside.
+    let listWrapper = progressContainer.querySelector(".upload-progress-wrapper");
+    let list;
+    if (!listWrapper) {
+      listWrapper = document.createElement("div");
+      listWrapper.classList.add("upload-progress-wrapper");
+      listWrapper.style.maxHeight = "300px";
+      listWrapper.style.overflowY = "auto";
+      list = document.createElement("ul");
+      list.classList.add("upload-progress-list");
+      listWrapper.appendChild(list);
+      progressContainer.appendChild(listWrapper);
+    } else {
+      list = listWrapper.querySelector("ul.upload-progress-list");
+    }
+
+    const li = createFileEntry(file);
+    li.dataset.uploadIndex = file.uniqueIdentifier;
+    list.appendChild(li);
+    updateFileInfoCount();
+  });
+
+  resumableInstance.on("fileProgress", function(file) {
+    const progress = file.progress(); // value between 0 and 1
+    const percent = Math.floor(progress * 100);
+    const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
+    if (li && li.progressBar) {
+      if (percent < 99) {
+        li.progressBar.style.width = percent + "%";
+        
+        // Calculate elapsed time and speed.
+        const elapsed = (Date.now() - li.startTime) / 1000;
+        let speed = "";
+        if (elapsed > 0) {
+          const bytesUploaded = progress * file.size;
+          const spd = bytesUploaded / elapsed;
+          if (spd < 1024) {
+            speed = spd.toFixed(0) + " B/s";
+          } else if (spd < 1048576) {
+            speed = (spd / 1024).toFixed(1) + " KB/s";
+          } else {
+            speed = (spd / 1048576).toFixed(1) + " MB/s";
+          }
+        }
+        li.progressBar.innerText = percent + "% (" + speed + ")";
+      } else {
+        // When progress reaches 99% or higher, show only a spinner icon.
+        li.progressBar.style.width = "100%";
+        li.progressBar.innerHTML = '<i class="material-icons spinning" style="vertical-align: middle;">autorenew</i>';
+      }
+      
+      // Enable the pause/resume button once progress starts.
+      const pauseResumeBtn = li.querySelector(".pause-resume-btn");
+      if (pauseResumeBtn) {
+        pauseResumeBtn.disabled = false;
+      }
+    }
+  });
+  
+  resumableInstance.on("fileSuccess", function(file, message) {
+    const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
+    if (li && li.progressBar) {
+      // Clear any merging indicators.
+      li.progressBar.style.width = "100%";
+      li.progressBar.innerText = "Done";
+      
+      // Optionally hide the pause/resume and remove buttons.
+      const pauseResumeBtn = li.querySelector(".pause-resume-btn");
+      if (pauseResumeBtn) {
+        pauseResumeBtn.style.display = "none";
+      }
+      const removeBtn = li.querySelector(".remove-file-btn");
+      if (removeBtn) {
+        removeBtn.style.display = "none";
+      }
+    }
+    loadFileList(window.currentFolder);
+  });
+
+  resumableInstance.on("fileError", function (file, message) {
+    const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
+    if (li && li.progressBar) {
+      li.progressBar.innerText = "Error";
+    }
+    // Mark file as errored so that the pause/resume button acts as a restart button.
+    file.isError = true;
+    // Change the pause/resume button to show a restart icon.
+    const pauseResumeBtn = li ? li.querySelector(".pause-resume-btn") : null;
+    if (pauseResumeBtn) {
+      pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">replay</span>';
+      pauseResumeBtn.disabled = false;
+    }
+    showToast("Error uploading file: " + file.fileName);
+  });
+
+  resumableInstance.on("complete", function () {
+    // Check if any file in the current selection is marked with an error.
+    const hasError = window.selectedFiles.some(f => f.isError);
+    if (!hasError) {
+      // All files succeeded; clear the file list after 5 seconds.
+      setTimeout(() => {
+        if (fileInput) fileInput.value = "";
+        const progressContainer = document.getElementById("uploadProgressContainer");
+        progressContainer.innerHTML = "";
+        window.selectedFiles = [];
+        adjustFolderHelpExpansionClosed();
+        window.addEventListener("resize", adjustFolderHelpExpansionClosed);
+        const fileInfoContainer = document.getElementById("fileInfoContainer");
+        if (fileInfoContainer) {
+          fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+        }
+        const dropArea = document.getElementById("uploadDropArea");
+        if (dropArea) setDropAreaDefault();
+      }, 5000);
+    } else {
+      showToast("Some files failed to upload. Please check the list.");
+    }
+  });
+}
+
+/* -----------------------------------------------------
+   XHR-based submitFiles for Drag–and–Drop (Folder) Uploads
+----------------------------------------------------- */
 function submitFiles(allFiles) {
   const folderToUse = window.currentFolder || "root";
   const progressContainer = document.getElementById("uploadProgressContainer");
@@ -323,9 +617,7 @@ function submitFiles(allFiles) {
         if (li) {
           li.progressBar.style.width = "100%";
           li.progressBar.innerText = "Done";
-          if (li.removeBtn) {
-            li.removeBtn.style.display = "none";
-          }
+          if (li.removeBtn) li.removeBtn.style.display = "none";
         }
         uploadResults[file.uploadIndex] = true;
       } else {
@@ -367,7 +659,6 @@ function submitFiles(allFiles) {
     });
 
     xhr.open("POST", "upload.php", true);
-    // Set the CSRF token header to match the folderManager approach.
     xhr.setRequestHeader("X-CSRF-Token", window.csrfToken);
     xhr.send(formData);
   });
@@ -377,35 +668,40 @@ function submitFiles(allFiles) {
       .then(serverFiles => {
         initFileActions();
         serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
+        let allSucceeded = true;
         allFiles.forEach(file => {
-          if ((file.webkitRelativePath || file.customRelativePath || "").trim() !== "") {
-            return;
-          }
-          const clientFileName = file.name.trim().toLowerCase();
-          if (!uploadResults[file.uploadIndex] || !serverFiles.includes(clientFileName)) {
-            const li = progressElements[file.uploadIndex];
-            if (li) {
-              li.progressBar.innerText = "Error";
+          // For files without a relative path
+          if ((file.webkitRelativePath || file.customRelativePath || "").trim() === "") {
+            const clientFileName = file.name.trim().toLowerCase();
+            if (!uploadResults[file.uploadIndex] || !serverFiles.includes(clientFileName)) {
+              const li = progressElements[file.uploadIndex];
+              if (li) {
+                li.progressBar.innerText = "Error";
+              }
+              allSucceeded = false;
             }
-            allSucceeded = false;
           }
         });
-        setTimeout(() => {
-          if (fileInput) fileInput.value = "";
-          const removeBtns = progressContainer.querySelectorAll("button.remove-file-btn");
-          removeBtns.forEach(btn => btn.style.display = "none");
-          progressContainer.innerHTML = "";
-          window.selectedFiles = [];
-          adjustFolderHelpExpansionClosed();
-          window.addEventListener("resize", adjustFolderHelpExpansionClosed);
-          const fileInfoContainer = document.getElementById("fileInfoContainer");
-          if (fileInfoContainer) {
-            fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
-          }
-          const dropArea = document.getElementById("uploadDropArea");
-          if (dropArea) setDropAreaDefault();
-        }, 5000);
-        if (!allSucceeded) {
+        
+        if (allSucceeded) {
+          // All files succeeded—clear the list after 5 seconds.
+          setTimeout(() => {
+            if (fileInput) fileInput.value = "";
+            const removeBtns = progressContainer.querySelectorAll("button.remove-file-btn");
+            removeBtns.forEach(btn => btn.style.display = "none");
+            progressContainer.innerHTML = "";
+            window.selectedFiles = [];
+            adjustFolderHelpExpansionClosed();
+            window.addEventListener("resize", adjustFolderHelpExpansionClosed);
+            const fileInfoContainer = document.getElementById("fileInfoContainer");
+            if (fileInfoContainer) {
+              fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+            }
+            const dropArea = document.getElementById("uploadDropArea");
+            if (dropArea) setDropAreaDefault();
+          }, 5000);
+        } else {
+          // Some files failed—keep the list visible and show a toast.
           showToast("Some files failed to upload. Please check the list.");
         }
       })
@@ -419,12 +715,15 @@ function submitFiles(allFiles) {
   }
 }
 
-// Main initUpload: sets up file input, drop area, and form submission.
+/* -----------------------------------------------------
+   Main initUpload: Sets up file input, drop area, and form submission.
+----------------------------------------------------- */
 function initUpload() {
   const fileInput = document.getElementById("file");
   const dropArea = document.getElementById("uploadDropArea");
   const uploadForm = document.getElementById("uploadFileForm");
 
+  // For file picker, remove directory attributes so only files can be chosen.
   if (fileInput) {
     fileInput.removeAttribute("webkitdirectory");
     fileInput.removeAttribute("mozdirectory");
@@ -434,6 +733,7 @@ function initUpload() {
 
   setDropAreaDefault();
 
+  // Drag–and–drop events (for folder uploads) use original processing.
   if (dropArea) {
     dropArea.classList.add("upload-drop-area");
     dropArea.addEventListener("dragover", function (e) {
@@ -458,6 +758,7 @@ function initUpload() {
         processFiles(dt.files);
       }
     });
+    // Clicking drop area triggers file input.
     dropArea.addEventListener("click", function () {
       if (fileInput) fileInput.click();
     });
@@ -465,7 +766,14 @@ function initUpload() {
 
   if (fileInput) {
     fileInput.addEventListener("change", function () {
-      processFiles(fileInput.files);
+      if (useResumable) {
+        // For file picker, if resumable is enabled, let it handle the files.
+        for (let i = 0; i < fileInput.files.length; i++) {
+          resumableInstance.addFile(fileInput.files[i]);
+        }
+      } else {
+        processFiles(fileInput.files);
+      }
     });
   }
 
@@ -477,9 +785,21 @@ function initUpload() {
         showToast("No files selected.");
         return;
       }
-      submitFiles(files);
+      // If files come from file picker (no relative path), use Resumable.
+      if (useResumable && (!files[0].customRelativePath || files[0].customRelativePath === "")) {
+        // Ensure current folder is updated.
+        resumableInstance.opts.query.folder = window.currentFolder || "root";
+        resumableInstance.upload();
+        showToast("Resumable upload started...");
+      } else {
+        submitFiles(files);
+      }
     });
   }
+
+  if (useResumable) {
+    initResumableUpload();
+  }
 }
 
 export { initUpload };

upload.php

@@ -12,122 +12,260 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     exit;
 }
 
-// Ensure user is authenticated
+// Ensure user is authenticated.
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     echo json_encode(["error" => "Unauthorized"]);
     http_response_code(401);
     exit;
 }
 
-// Validate folder name input.
-$folder = isset($_POST['folder']) ? trim($_POST['folder']) : 'root';
-if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
-    echo json_encode(["error" => "Invalid folder name"]);
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['disableUpload']) && $userPermissions['disableUpload'] === true) {
+        echo json_encode(["error" => "Disabled upload users are not allowed to upload."]);
+        exit();
+    }
+}
+
+/*
+ * Handle test chunk requests.
+ * When testChunks is enabled in Resumable.js, the client sends GET requests with a "resumableTest" parameter.
+ */
+if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['resumableTest'])) {
+    $chunkNumber = intval($_GET['resumableChunkNumber']);
+    $resumableIdentifier = $_GET['resumableIdentifier'];
+    $folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
+    // Determine the base upload directory.
+    $baseUploadDir = UPLOAD_DIR;
+    if ($folder !== 'root') {
+        $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
+    }
+    $tempDir = $baseUploadDir . 'resumable_' . $resumableIdentifier . DIRECTORY_SEPARATOR;
+    $chunkFile = $tempDir . $chunkNumber;
+    if (file_exists($chunkFile)) {
+        http_response_code(200);
+    } else {
+        http_response_code(404);
+    }
     exit;
 }
 
-// Determine the base upload directory.
-$baseUploadDir = UPLOAD_DIR;
-if ($folder !== 'root') {
-    $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
-    if (!is_dir($baseUploadDir)) {
-        mkdir($baseUploadDir, 0775, true);
-    }
-} else {
-    if (!is_dir($baseUploadDir)) {
-        mkdir($baseUploadDir, 0775, true);
-    }
-}
-
-// Prepare a collection to hold metadata for each folder.
-$metadataCollection = []; // key: folder path, value: metadata array
-$metadataChanged = [];    // key: folder path, value: boolean
-
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($_FILES["file"]["name"] as $index => $fileName) {
-    $safeFileName = basename($fileName);
-    if (!preg_match($safeFileNamePattern, $safeFileName)) {
-        echo json_encode(["error" => "Invalid file name: " . $fileName]);
+// ---------------------
+// Chunked upload handling (POST requests)
+// ---------------------
+if (isset($_POST['resumableChunkNumber'])) {
+    // ------------- Chunked Upload Handling -------------
+    $chunkNumber         = intval($_POST['resumableChunkNumber']); // current chunk (1-indexed)
+    $totalChunks         = intval($_POST['resumableTotalChunks']);
+    $chunkSize           = intval($_POST['resumableChunkSize']);
+    $totalSize           = intval($_POST['resumableTotalSize']);
+    $resumableIdentifier = $_POST['resumableIdentifier'];           // unique file identifier
+    $resumableFilename   = $_POST['resumableFilename'];
+    $folder = isset($_POST['folder']) ? trim($_POST['folder']) : 'root';
+    if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
+        echo json_encode(["error" => "Invalid folder name"]);
         exit;
     }
-    
-    // --- Minimal Folder/Subfolder Logic ---
-    $relativePath = '';
-    if (isset($_POST['relativePath'])) {
-        if (is_array($_POST['relativePath'])) {
-            $relativePath = $_POST['relativePath'][$index] ?? '';
-        } else {
-            $relativePath = $_POST['relativePath'];
-        }
-    }
-    
-    // Determine the complete folder path for upload and for metadata.
-    $folderPath = $folder; // Base folder as provided ("root" or a subfolder)
-    $uploadDir = $baseUploadDir; // Start with the base upload directory
-    if (!empty($relativePath)) {
-        $subDir = dirname($relativePath);
-        if ($subDir !== '.' && $subDir !== '') {
-            // If base folder is 'root', then folderPath is just the subDir
-            // Otherwise, append the subdirectory to the base folder
-            $folderPath = ($folder === 'root') ? $subDir : $folder . "/" . $subDir;
-            // Update the upload directory accordingly.
-            $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR 
-                        . str_replace('/', DIRECTORY_SEPARATOR, $folderPath) . DIRECTORY_SEPARATOR;
-        }
-        // Ensure the file name is taken from the relative path.
-        $safeFileName = basename($relativePath);
-    }
-    // --- End Minimal Folder/Subfolder Logic ---
-
-    // Make sure the final upload directory exists.
-    if (!is_dir($uploadDir)) {
-        mkdir($uploadDir, 0775, true);
-    }
-    
-    $targetPath = $uploadDir . $safeFileName;
-    
-    if (move_uploaded_file($_FILES["file"]["tmp_name"][$index], $targetPath)) {
-        // Generate a unique metadata file name based on the folder path.
-        // Replace slashes, backslashes, and spaces with dashes.
-        $metadataKey = ($folderPath === '' || $folderPath === 'root') ? "root" : $folderPath;
-        $metadataFileName = str_replace(['/', '\\', ' '], '-', $metadataKey) . '_metadata.json';
-        $metadataFile = META_DIR . $metadataFileName;
-        
-        // Load metadata for this folder if not already loaded.
-        if (!isset($metadataCollection[$metadataKey])) {
-            if (file_exists($metadataFile)) {
-                $metadataCollection[$metadataKey] = json_decode(file_get_contents($metadataFile), true);
-            } else {
-                $metadataCollection[$metadataKey] = [];
-            }
-            $metadataChanged[$metadataKey] = false;
-        }
-        
-        // Add metadata for this file if not already present.
-        if (!isset($metadataCollection[$metadataKey][$safeFileName])) {
-            $uploadedDate = date(DATE_TIME_FORMAT);
-            $uploader = $_SESSION['username'] ?? "Unknown";
-            $metadataCollection[$metadataKey][$safeFileName] = [
-                "uploaded" => $uploadedDate,
-                "uploader" => $uploader
-            ];
-            $metadataChanged[$metadataKey] = true;
+    // Determine the base upload directory.
+    $baseUploadDir = UPLOAD_DIR;
+    if ($folder !== 'root') {
+        $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
         }
     } else {
-        echo json_encode(["error" => "Error uploading file"]);
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
+        }
+    }
+    
+    // Use a temporary directory for the chunks.
+    $tempDir = $baseUploadDir . 'resumable_' . $resumableIdentifier . DIRECTORY_SEPARATOR;
+    if (!is_dir($tempDir)) {
+        mkdir($tempDir, 0775, true);
+    }
+    
+    // Save the current chunk.
+    $chunkFile = $tempDir . $chunkNumber; // store chunk using its number as filename
+    if (!move_uploaded_file($_FILES["file"]["tmp_name"], $chunkFile)) {
+        echo json_encode(["error" => "Failed to move uploaded chunk"]);
         exit;
     }
-}
-
-// After processing all files, write out metadata files for folders that changed.
-foreach ($metadataCollection as $folderKey => $data) {
-    if ($metadataChanged[$folderKey]) {
-        $metadataFileName = str_replace(['/', '\\', ' '], '-', $folderKey) . '_metadata.json';
-        $metadataFile = META_DIR . $metadataFileName;
-        file_put_contents($metadataFile, json_encode($data, JSON_PRETTY_PRINT));
+    
+    // Check if all chunks have been uploaded.
+    $uploadedChunks = glob($tempDir . "*");
+    if (count($uploadedChunks) < $totalChunks) {
+        // More chunks remain – respond and let the client continue.
+        echo json_encode(["status" => "chunk uploaded"]);
+        exit;
     }
+    
+    // All chunks are present. Merge chunks.
+    $targetPath = $baseUploadDir . $resumableFilename;
+    if (!$out = fopen($targetPath, "wb")) {
+        echo json_encode(["error" => "Failed to open target file for writing"]);
+        exit;
+    }
+    // Concatenate each chunk in order.
+    for ($i = 1; $i <= $totalChunks; $i++) {
+        $chunkPath = $tempDir . $i;
+        if (!$in = fopen($chunkPath, "rb")) {
+            fclose($out);
+            echo json_encode(["error" => "Failed to open chunk $i"]);
+            exit;
+        }
+        while ($buff = fread($in, 4096)) {
+            fwrite($out, $buff);
+        }
+        fclose($in);
+    }
+    fclose($out);
+    
+    // --- Metadata Update for Chunked Upload ---
+    // For chunked uploads, assume no relativePath; so folderPath is simply $folder.
+    $folderPath = $folder;
+    $metadataKey = ($folderPath === '' || $folderPath === 'root') ? "root" : $folderPath;
+    // Generate a metadata file name based on the folder path.
+    $metadataFileName = str_replace(['/', '\\', ' '], '-', $metadataKey) . '_metadata.json';
+    $metadataFile = META_DIR . $metadataFileName;
+    
+    $uploadedDate = date(DATE_TIME_FORMAT);
+    $uploader = $_SESSION['username'] ?? "Unknown";
+    
+    // Load existing metadata, if any.
+    if (file_exists($metadataFile)) {
+        $metadataCollection = json_decode(file_get_contents($metadataFile), true);
+        if (!is_array($metadataCollection)) {
+            $metadataCollection = [];
+        }
+    } else {
+        $metadataCollection = [];
+    }
+    
+    // Add metadata for this file if not already present.
+    if (!isset($metadataCollection[$resumableFilename])) {
+        $metadataCollection[$resumableFilename] = [
+            "uploaded" => $uploadedDate,
+            "uploader" => $uploader
+        ];
+        file_put_contents($metadataFile, json_encode($metadataCollection, JSON_PRETTY_PRINT));
+    }
+    // --- End Metadata Update ---
+    
+    // Cleanup: remove the temporary directory and its chunks.
+    array_map('unlink', glob("$tempDir*"));
+    rmdir($tempDir);
+    
+    echo json_encode(["success" => "File uploaded successfully"]);
+    exit;
+    
+} else {
+    // ------------- Full Upload (Non-chunked) -------------
+    // Validate folder name input.
+    $folder = isset($_POST['folder']) ? trim($_POST['folder']) : 'root';
+    if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
+        echo json_encode(["error" => "Invalid folder name"]);
+        exit;
+    }
+    
+    // Determine the base upload directory.
+    $baseUploadDir = UPLOAD_DIR;
+    if ($folder !== 'root') {
+        $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
+        }
+    } else {
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
+        }
+    }
+    
+    // Prepare a collection to hold metadata for each folder.
+    $metadataCollection = []; // key: folder path, value: metadata array
+    $metadataChanged = [];    // key: folder path, value: boolean
+    
+    $safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
+    
+    foreach ($_FILES["file"]["name"] as $index => $fileName) {
+        $safeFileName = basename($fileName);
+        if (!preg_match($safeFileNamePattern, $safeFileName)) {
+            echo json_encode(["error" => "Invalid file name: " . $fileName]);
+            exit;
+        }
+        
+        // --- Minimal Folder/Subfolder Logic ---
+        $relativePath = '';
+        if (isset($_POST['relativePath'])) {
+            if (is_array($_POST['relativePath'])) {
+                $relativePath = $_POST['relativePath'][$index] ?? '';
+            } else {
+                $relativePath = $_POST['relativePath'];
+            }
+        }
+        
+        // Determine the complete folder path for upload and for metadata.
+        $folderPath = $folder; // Base folder as provided ("root" or a subfolder)
+        $uploadDir = $baseUploadDir; // Start with the base upload directory
+        if (!empty($relativePath)) {
+            $subDir = dirname($relativePath);
+            if ($subDir !== '.' && $subDir !== '') {
+                $folderPath = ($folder === 'root') ? $subDir : $folder . "/" . $subDir;
+                $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR 
+                            . str_replace('/', DIRECTORY_SEPARATOR, $folderPath) . DIRECTORY_SEPARATOR;
+            }
+            $safeFileName = basename($relativePath);
+        }
+        // --- End Minimal Folder/Subfolder Logic ---
+        
+        // Make sure the final upload directory exists.
+        if (!is_dir($uploadDir)) {
+            mkdir($uploadDir, 0775, true);
+        }
+        
+        $targetPath = $uploadDir . $safeFileName;
+        
+        if (move_uploaded_file($_FILES["file"]["tmp_name"][$index], $targetPath)) {
+            // Generate a unique metadata file name based on the folder path.
+            $metadataKey = ($folderPath === '' || $folderPath === 'root') ? "root" : $folderPath;
+            $metadataFileName = str_replace(['/', '\\', ' '], '-', $metadataKey) . '_metadata.json';
+            $metadataFile = META_DIR . $metadataFileName;
+            
+            if (!isset($metadataCollection[$metadataKey])) {
+                if (file_exists($metadataFile)) {
+                    $metadataCollection[$metadataKey] = json_decode(file_get_contents($metadataFile), true);
+                } else {
+                    $metadataCollection[$metadataKey] = [];
+                }
+                $metadataChanged[$metadataKey] = false;
+            }
+            
+            if (!isset($metadataCollection[$metadataKey][$safeFileName])) {
+                $uploadedDate = date(DATE_TIME_FORMAT);
+                $uploader = $_SESSION['username'] ?? "Unknown";
+                $metadataCollection[$metadataKey][$safeFileName] = [
+                    "uploaded" => $uploadedDate,
+                    "uploader" => $uploader
+                ];
+                $metadataChanged[$metadataKey] = true;
+            }
+        } else {
+            echo json_encode(["error" => "Error uploading file"]);
+            exit;
+        }
+    }
+    
+    // After processing all files, write out metadata files for folders that changed.
+    foreach ($metadataCollection as $folderKey => $data) {
+        if ($metadataChanged[$folderKey]) {
+            $metadataFileName = str_replace(['/', '\\', ' '], '-', $folderKey) . '_metadata.json';
+            $metadataFile = META_DIR . $metadataFileName;
+            file_put_contents($metadataFile, json_encode($data, JSON_PRETTY_PRINT));
+        }
+    }
+    
+    echo json_encode(["success" => "Files uploaded successfully"]);
 }
-
-echo json_encode(["success" => "Files uploaded successfully"]);
 ?>

uploads/.htaccess

@@ -1 +1,7 @@
+<IfModule mod_php7.c>
+  php_flag engine off
+</IfModule>
+<IfModule mod_php.c>
+  php_flag engine off
+</IfModule>
 Options -Indexes