**Changes 3/7/2025:*** - Module Separation & ES6 Conversion - networkUtils.js: For handling HTTP requests. - domUtils.js: For DOM manipulation functions (e.g. toggleVisibility, escapeHTML, toggleAllCheckboxes, and file action button updates). - fileManager.js: For file operations, rendering the file list, sorting, editing, renaming, and pagination. - folderManager.js: For folder-related operations (loading folder lists, renaming/deleting folders, etc.). - upload.js: For handling file uploads and progress display. - auth.js: For authentication and user management. - Converted all modules to ES6 - File List Rendering & Pagination in fileManager.js - Implemented Pagination - Added global settings (window.itemsPerPage and window.currentPage) with defaults (10 items per page). - Modified renderFileTable() to calculate the current slice of files and render pagination controls (with “Prev”/“Next” buttons and an items-per-page selector). - Reworked Sorting - updated sortFiles() to re-render the table on sorting. - Implemented sorting for non-date columns by converting strings to lowercase. - Date sorting improvements - File Upload Enhancements in upload.js - Maintained individual progress tracking for the first 10 files while still uploading all selected files. - Implemented logic to refresh the file list instantly after uploads finish. - Configured the progress list to remain visible for 10 seconds after the file list refresh so users can verify the upload status. - Ensured that after refreshing the file list, event listeners for actions (delete, copy, move) are reattached. - File upload error handling and display - File Action Buttons & Checkbox Handling (domUtils.js and fileManager.js) - Rewrote the updateFileActionButtons() - Removed duplicate or conflicting logic from renderFileTable() and initFileActions() that previously managed button visibility. - Adjusted toggleAllCheckboxes() and toggleDeleteButton() so they call updateFileActionButtons() to maintain a single source of truth. - Rename Functionality - Updated the Actions column in the file table to always include a “Rename” button for each file. - Implemented renameFile() - Responsive Behavior & Additional UI Tweaks - Added CSS media queries to hide less critical columns (Date Modified, Upload Date, File Size, Uploader) on smaller screens. - Adjusted margins on file preview images and file icons. - Improved header centering and button styling. **Changes 3/4/2025:** Copy & Move functionality added Header Layout Modal Popups (Edit, Add User, Remove User) changes Consolidated table styling CSS Consolidation assets folder **Changes 3/3/2025:** folder management added some refactoring config added USERS_DIR & USERS_FILE # Multi File Upload & Edit This project is a lightweight, secure web application for uploading, editing, and managing files. It’s built with Apache, PHP, and modern front-end JavaScript, and it features a responsive interface with dynamic updates. --- ## Functionality & Features - **Multi-file Upload:** Users can select and upload multiple files at once. Each file’s upload is tracked individually with a progress bar showing percentage complete and upload speed (B/s, KB/s, or MB/s). If an image is selected, a small 32×32 pixel thumbnail preview is displayed; otherwise, a default file icon is shown. - **File Editing:** Built-in editing functionality for text-based files allows quick modifications directly within the browser. Files open in a modal window with a consistent, rounded design. Edit window can be resized to allow for easier editting. - **Batch Deleting:** Users can select multiple files and delete them in one action, streamlining file management. - **Sorting & Filtering:** Files can be sorted by attributes such as name, date modified, upload date, size, or uploader, making it easier to navigate large file sets. - **User Management:** Secure, session-based authentication is implemented along with admin-only controls for adding and removing users. Passwords are hashed for security. - **Dynamic UI Updates:** The application uses asynchronous JavaScript (via the Fetch API and XMLHttpRequest) to update the file list and upload progress in real time without requiring full page reloads. - **Progress Feedback:** During uploads, each file shows a progress bar next to its name, complete with upload percentage and speed. Once all files have been uploaded, the progress list automatically clears after a short delay. --- ## Security - **Password Hashing:** PHP's `password_hash()` and `password_verify()` functions are used to securely store and check user credentials. - **Session-based Authentication:** User state is managed using PHP sessions, with proper access control for admin-specific actions. - **Safe File Operations:** Uploaded file metadata (including uploader and upload timestamp) is stored in a JSON file, minimizing exposure of sensitive data. --- ## User Experience & Interface - **Responsive Design:** The interface adapts seamlessly to different screen sizes, ensuring usability on desktops, tablets, and mobile devices. - **Modern and Dynamic:** The application uses dynamic UI updates (via the Fetch API and XMLHttpRequest) to show real-time progress for each file upload, including visual feedback with thumbnail previews and progress bars. - **Clean and Intuitive Layout:** A structured header with a logo, centered title, and action buttons (Logout, Add User, Remove User) provides an intuitive navigation experience. --- ## Extensibility & Maintainability - **Modular Code Structure:** The codebase is organized into separate files (e.g., `auth.js`, `upload.js`, `displayFileList.js`), making it easy to manage and extend. - **Removal of Legacy Files:** Files such as `checkUploadLimit.js`, `checkUploadLimit.php`, and `getUploadSize.php` are no longer used and have been removed to streamline the project. - **Customization Options:** The project is flexible and can be adapted to support additional file types, enhanced previews, or integration with other systems. --- ## Deployment & Real-world Use - **Reverse Proxy Compatibility:** With proper configuration, the application can be deployed behind a reverse proxy, providing an additional layer of security. - **Practical Applications:** This multi-file uploader with editing and user management is ideal for scenarios involving document management, image galleries, firmware updates, and more. --- - **Login Page** based off of: https://github.com/sensboston/uploader ## Prerequisites - Apache2, configured, up and running - PHP 8.1 or higher - Required PHP extensions: `php-json`, `php-curl` ...........