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

...........