Changes 3/3/2025: folder management added some refactoring
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'spassword_hash()andpassword_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 ascheckUploadLimit.js,checkUploadLimit.php, andgetUploadSize.phpare 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
fork of: https://github.com/sensboston/uploader
File Uploader
A simple file uploader web app that allows authenticated users to upload, list, and delete files. The application uses PHP, running on Apache2, Ubuntu (but definitely should work everywhere).
Prerequisites
- Apache2, configured, up and running
- PHP 8.1 or higher
- Required PHP extensions:
php-json,php-curl
...........