From 2dc72c4c87b807730d88243d27d43f6382f11e2f Mon Sep 17 00:00:00 2001 From: Ryan Date: Fri, 7 Mar 2025 03:41:06 -0500 Subject: [PATCH] adjusted --- README.md | 181 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 110 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 0998f4d..690087b 100644 --- a/README.md +++ b/README.md @@ -1,122 +1,161 @@ -main screen - -full changelog available here: https://github.com/error311/multi-file-upload-editor-docker/ -**Changes 3/7/2025:** - -- Module Separation & ES6 Conversion -- File List Rendering & Pagination in fileManager.js -- File Upload Enhancements in upload.js -- File Action Buttons & Checkbox Handling (domUtils.js and fileManager.js) -- Rename Functionality -- Responsive Behavior & Additional UI Tweaks - -**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 +![Main Screen](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/main-screen.png) + +changelogs available here: + 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 +## Functionality & Featuraes - **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. + - Users can select and upload multiple files at once. + - Each file’s upload is tracked individually with a progress bar showing percentage and upload speed (B/s, KB/s, or MB/s). + - For image files, a 32×32 pixel thumbnail preview is shown; for other files, a default file icon is displayed. - edit larger window - edit smaller window + ![Multi Upload](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/multi-upload.png) -- **Batch Deleting:** - Users can select multiple files and delete them in one action, streamlining file management. +- **File Editing & Renaming:** + - Text-based files can be edited directly in a modal window. + - Files open in a modal that can be resized for ease of editing. + - **Rename functionality:** Every file now has a “Rename” button in the Actions column (in addition to the “Edit” button for editable files) so that any file can be renamed without editing. + + ![Edit Larger Window](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/edit-larger-window.png) + ![Edit Smaller Window](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/edit-small-window.png) -- **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. +- **Batch Deleting, Copying & Moving:** + - Users can select multiple files and perform batch actions like delete, copy, or move. + - The action buttons remain visible (if files exist) and only become active when one or more files are selected. + - The folder dropdown for copy/move actions is hidden when no files are present. -- **User Management:** - Secure, session-based authentication is implemented along with admin-only controls for adding and removing users. Passwords are hashed for security. - - new user - remove user +- **Sorting & Pagination:** + - Files can be sorted by attributes such as name, date modified, upload date, size, or uploader. + - A custom date parser converts dates from the "MM/DD/YY hh:mma" format (e.g. "03/07/25 01:01AM") to timestamps for reliable sorting. + - Pagination is implemented so users can view 10, 20, 50, or 100 items per page with navigation controls ("Prev"/"Next" and page numbers). -- **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. +- **User Management & Authentication:** + - Secure, session-based authentication is implemented. + - Admin-only controls allow for adding and removing users. + - Passwords are hashed using PHP’s `password_hash()` function. + + ![Create User](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/create-user.png) + ![Remove User](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/remove-user.png) + +- **Dynamic & Responsive UI:** + - Real-time UI updates (via Fetch API and XMLHttpRequest) refresh the file list, upload progress, and folder list without a full page reload. + - On smaller screens, less critical columns (Date Modified, Upload Date, File Size, Uploader) are hidden for a cleaner mobile experience. + - A centered header with a logo and navigation buttons provides an intuitive interface. - **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. - - progress bar + - During file uploads, a progress list displays the status for each file (for the first 10 files) along with an indication if additional files are being uploaded. + - The file list refreshes immediately after uploads finish, while the progress list remains visible for a set period for user confirmation. --- ## Security - **Password Hashing:** - PHP's `password_hash()` and `password_verify()` functions are used to securely store and check user credentials. - + - Uses PHP’s `password_hash()` and `password_verify()` functions 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. - + - User state is managed via PHP sessions. - **Safe File Operations:** - Uploaded file metadata (including uploader and upload timestamp) is stored in a JSON file, minimizing exposure of sensitive data. + - Uploaded file metadata (uploader, upload timestamp) is stored securely in a JSON file. +- **No-caching:** + - Appropriate headers are set (or timestamps appended) to ensure that file and folder lists are always up-to-date. --- ## 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. + - The interface adapts to different screen sizes using media queries. + - Critical information (filename and actions) remains visible on small screens, while secondary columns are hidden. +- **Modern Look:** + - A dynamic UI with asynchronous updates ensures real-time progress display and a modern user experience. +- **Intuitive Navigation:** + - A structured header with a centered title and clearly laid out action buttons makes navigation easy. --- ## 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. + - The code is organized into separate ES6 modules: + - `networkUtils.js` – HTTP request handling. + - `domUtils.js` – DOM manipulation and UI update functions. + - `fileManager.js` – File operations, rendering, sorting, pagination, editing, and renaming. + - `folderManager.js` – Folder operations (loading, renaming, deleting). + - `upload.js` – File upload handling and progress display. + - `auth.js` – User authentication and management. +- **Improved Sorting:** + - A custom date parser converts date strings to timestamps for reliable sorting of date columns. +- **UI Updates:** + - Real-time updates and event reattachment ensure the file list and action buttons are always current. +- **Responsive & Accessible:** + - Media queries and dynamic button states improve usability across devices. +- **Clean & Extendable:** + - Legacy files have been removed and the code is structured for easy future enhancements. --- ## 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. - + - Can be deployed behind a reverse proxy with proper configuration. - **Practical Applications:** - This multi-file uploader with editing and user management is ideal for scenarios involving document management, image galleries, firmware updates, and more. + - Ideal for document management, image galleries, firmware updates, and more. +- **Security & Scalability:** + - Session-based authentication, secure file operations, and modular code design ensure the application is secure and scalable. + +--- + +## Changelog + +- **Module Refactoring:** + - Split the original `utils.js` into multiple ES6 modules for network requests, DOM utilities, file management, folder management, uploads, and authentication. + - Converted all code to ES6 modules with `import`/`export` syntax and exposed necessary functions globally. + +- **File List Rendering & Pagination:** + - Implemented pagination in `fileManager.js` to allow displaying 10, 20, 50, or 100 items per page. + - Added global functions (`changePage` and `changeItemsPerPage`) for pagination control. + - Added a pagination control section below the file list table. + +- **Date Sorting Enhancements:** + - Created a custom date parser (`parseCustomDate`) to convert date strings. + - Adjusted the parser to handle two-digit years by adding 2000. + - Integrated the parser into the sorting function to reliably sort “Date Modified” and “Upload Date” columns. + +- **File Upload Improvements:** + - Enabled multi-file uploads with individual progress tracking (visible for the first 10 files). + - Ensured that the file list refreshes immediately after uploads complete. + - Kept the upload progress list visible for a configurable delay to allow users to verify upload success. + - Reattached event listeners after the file list is re-rendered. + +- **File Action Buttons:** + - Unified button state management so that Delete, Copy, and Move buttons remain visible as long as files exist, and are only enabled when files are selected. + - Modified the logic in `updateFileActionButtons` and removed conflicting code from `initFileActions`. + - Ensured that the folder dropdown for copy/move is hidden when no files exist. + +- **Rename Functionality:** + - Added a “Rename” button to the Actions column for every file. + - Implemented a `renameFile` function that prompts for a new name, calls a backend script (`renameFile.php`) to perform the rename, updates metadata, and refreshes the file list. + +- **Responsive & UI Tweaks:** + - Applied CSS media queries to hide secondary columns on small screens. + - Adjusted file preview and icon styling for better alignment. + - Centered the header and optimized the layout for a clean, modern appearance. + +*This changelog and feature summary reflect the improvements made during the refactor from a monolithic utils file to modular ES6 components, along with enhancements in UI responsiveness, sorting, file uploads, and file management operations.* --- - **Login Page** - - login page + ![Login](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/login-page.png) based off of: -https://github.com/sensboston/uploader + ## Prerequisites