adjusted
This commit is contained in:
Ryan
181
README.md
181
README.md
@@ -1,122 +1,161 @@
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/main-screen.png" alt="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
|
||||
|
||||
|
||||
|
||||
changelogs available here: <https://github.com/error311/multi-file-upload-editor-docker/>
|
||||
|
||||
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.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/edit-larger-window.png" alt="edit larger window" width="600">
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/edit-small-window.png" alt="edit smaller window" width="600">
|
||||
|
||||
|
||||
- **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.
|
||||
|
||||
|
||||
|
||||
|
||||
- **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.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/create-user.png" alt="new user" width="600">
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/remove-user.png" alt="remove user" width="600">
|
||||
- **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.
|
||||
|
||||
|
||||
|
||||
|
||||
- **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.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/progress-bar.png" alt="progress bar" width="600">
|
||||
- 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**
|
||||
|
||||
<img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/login-page.png" alt="login page" width="600">
|
||||
|
||||
|
||||
based off of:
|
||||
https://github.com/sensboston/uploader
|
||||
<https://github.com/sensboston/uploader>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
Reference in New Issue
Block a user