{"id":26681426,"url":"https://github.com/error311/multi-file-upload-editor","last_synced_at":"2025-03-26T07:15:52.013Z","repository":{"id":278839768,"uuid":"936511251","full_name":"error311/multi-file-upload-editor","owner":"error311","description":"🗂️ A lightweight web-based file upload \u0026 management tool (PHP/JS) with multi-file support, editing \u0026 batch operations","archived":false,"fork":false,"pushed_at":"2025-03-18T15:46:25.000Z","size":12515,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T16:43:08.651Z","etag":null,"topics":["file-folder-management","file-manager","file-upload","folder-management","javascript","multi-file-uploader","php","self-hosted","self-hosted-file-manager","upload-tool","uploader","web-application","web-based","web-based-file-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"sensboston/uploader","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/error311.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-21T08:02:37.000Z","updated_at":"2025-03-18T15:46:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"de05dbb0-216e-4d2e-8e76-d124df52c633","html_url":"https://github.com/error311/multi-file-upload-editor","commit_stats":null,"previous_names":["error311/uploader","error311/uploader-and-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/error311%2Fmulti-file-upload-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/error311%2Fmulti-file-upload-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/error311%2Fmulti-file-upload-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/error311%2Fmulti-file-upload-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/error311","download_url":"https://codeload.github.com/error311/multi-file-upload-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245605702,"owners_count":20643030,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-folder-management","file-manager","file-upload","folder-management","javascript","multi-file-uploader","php","self-hosted","self-hosted-file-manager","upload-tool","uploader","web-application","web-based","web-based-file-editor"],"created_at":"2025-03-26T07:15:51.392Z","updated_at":"2025-03-26T07:15:51.985Z","avatar_url":"https://github.com/error311.png","language":"JavaScript","readme":"# MFE - Lightweight Multi File Upload Editor\n\n**Video demo:**\n\nhttps://github.com/user-attachments/assets/179e6940-5798-4482-9a69-696f806c37de\n\n**Dark mode:**\n![Dark Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-mode.png)\n\nchangelogs available here: \u003chttps://github.com/error311/multi-file-upload-editor-docker/\u003e\n\nMFE - Multi File Upload Editor is a lightweight, secure, self-hosted web application for uploading, syntax highlight editing, drag \u0026 drop and managing files. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive, dynamic file management interface. It serves as an alternative to solutions like FileGator TinyFileManager or ProjectSend, providing an easy-to-setup experience ideal for document management, image galleries, firmware file hosting, and more.\n\n---\n\n## Features\n\n- **Multiple File/Folder Uploads with Progress (Resumable.js Integration):**\n  - Users can effortlessly upload multiple files and folders simultaneously by either selecting them through the file picker or dragging and dropping them directly into the interface.\n  - **Chunked Uploads:** Files are uploaded in configurable chunks (default set as 3 MB) to efficiently handle large files.\n  - **Pause, Resume, and Retry:** Uploads can be paused and resumed at any time, with support for retrying failed chunks.\n  - **Real-Time Progress:** Each file shows an individual progress bar that displays percentage complete and upload speed.\n  - **File \u0026 Folder Grouping:** When many files are dropped, files are automatically grouped into a scrollable wrapper, ensuring the interface remains clean.\n  - **Secure Uploads:** All uploads integrate CSRF token validation and other security checks.\n\n- **Built-in File Editing \u0026 Renaming:**\n  - Text-based files (e.g., .txt, .html, .js) can be opened and edited in a modal window using CodeMirror for:\n    - Syntax highlighting\n    - Line numbering\n    - Adjustable font sizes\n  - Files can be renamed directly through the interface.\n  - The renaming functionality now supports names with parentheses and checks for duplicate names, automatically generating a unique name (e.g., appending “ (1)”) when needed.\n  - Folder-specific metadata is updated accordingly.\n  - **Enhanced File Editing Check:** Files with a Content-Length of 0 KB are now allowed to be edited.\n\n- **Built-in File Preview:**\n  - Users can quickly preview images, videos, and PDFs directly in modal popups without leaving the page.\n  - The preview modal supports inline display of images (with proper scaling) and videos with playback controls.\n  - Navigation (prev/next) within image previews is supported for a seamless browsing experience.\n\n- **Gallery (Grid) View:**\n  - In addition to the traditional table view, users can toggle to a gallery view that arranges image thumbnails in a grid layout.\n  - The gallery view offers multiple column options (e.g., 3, 4, or 5 columns) so that users can choose the layout that best fits their screen.\n  - Action buttons (Download, Edit, Rename, Share) appear beneath each thumbnail for quick access.\n\n- **Batch Operations (Delete/Copy/Move/Download/Extract Zip):**\n  - **Delete Files:** Delete multiple files at once.\n  - **Copy Files:** Copy selected files to another folder with a unique-naming feature to prevent overwrites.\n  - **Move Files:** Move selected files to a different folder, automatically generating a unique filename if needed to avoid data loss.\n  - **Download Files as ZIP:** Download selected files as a ZIP archive. Users can specify a custom name for the ZIP file via a modal dialog.\n  - **Extract Zip:** When one or more ZIP files are selected, users can extract the archive(s) directly into the current folder.\n  - **Drag \u0026 Drop:** Easily move files by selecting them from the file list and simply dragging them onto your desired folder in the folder tree or breadcrumb. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.\n  - **Enhanced Context Menu \u0026 Keyboard Shortcuts:**\n    - **Right-Click Context Menu:**  \n      - A custom context menu appears on right-clicking within the file list.  \n      - For multiple selections, options include Delete Selected, Copy Selected, Move Selected, Download Zip, and (if applicable) Extract Zip.  \n      - When exactly one file is selected, additional options (Preview, Edit [if editable], and Rename) are available.\n    - **Keyboard Shortcut for Deletion:**  \n      - A global keydown listener detects Delete/Backspace key presses (when no input is focused) to trigger the delete operation.\n\n- **Folder Management:**\n  - Organize files into folders and subfolders with the ability to create, rename, and delete folders.\n  - A dynamic folder tree in the UI allows users to navigate directories easily, and any changes are immediately reflected in real time.\n  - **Per-Folder Metadata Storage:** Each folder has its own metadata JSON file (e.g., `root_metadata.json`, `FolderName_metadata.json`), and operations (copy/move/rename) update these metadata files accordingly.\n  - **Intuitive Breadcrumb Navigation:** Clickable breadcrumbs enable users to quickly jump to any parent folder, streamlining navigation across subfolders. Supports drag \u0026 drop to move files.\n  - **Folder Manager Context Menu:**  \n    - Right-clicking on a folder (in the folder tree or breadcrumb) brings up a custom context menu with options for creating, renaming, and deleting folders.\n  - **Keyboard Shortcut for Folder Deletion:**  \n    - A global key listener (Delete/Backspace) is provided to trigger folder deletion (with safeguards to prevent deleting the root folder).\n\n- **Sorting \u0026 Pagination:**\n  - The file list can be sorted by name, modified date, upload date, file size, or uploader.\n  - Pagination controls let users navigate through files with selectable page sizes (10, 20, 50, or 100 items per page) and “Prev”/“Next” navigation buttons.\n\n- **Share Link Functionality:**\n  - Generate shareable links for files with configurable expiration times (e.g., 30, 60, 120, 180, 240 minutes, and a 1-day option) and optional password protection.\n  - Share links are stored in a JSON file with details including the folder, file, expiration timestamp, and hashed password.\n  - The share endpoint (`share.php`) validates tokens, expiration, and password before serving files (or forcing downloads).\n  - The share URL is configurable via environment variables or auto-detected from the server.\n\n- **User Authentication \u0026 Management:**\n  - Secure, session-based authentication protects the file manager.\n  - Admin users can add or remove users through the interface.\n  - Passwords are hashed using PHP’s `password_hash()` for security.\n  - All state-changing endpoints include CSRF token validation.\n  - Change password supported for all users.\n  - **Persistent Login (Remember Me) with Encrypted Tokens:**\n    - Users can remain logged in across sessions securely.\n    - Persistent tokens are encrypted using AES‑256‑CBC before being stored in a JSON file.\n    - On auto-login, the tokens are decrypted on the server to re-establish user sessions without requiring re-authentication.\n\n- **Responsive, Dynamic \u0026 Persistent UI:**\n  - The interface is mobile-friendly and adapts to various screen sizes by hiding non-critical columns on small devices.\n  - Asynchronous updates (via Fetch API and XMLHttpRequest) keep the UI responsive without full page reloads.\n  - Persistent settings (such as items per page, dark/light mode preference, folder tree state, and the last open folder) ensure a smooth and customized user experience.\n\n- **Dark Mode/Light Mode:**\n  - The application automatically adapts to the operating system’s theme preference by default and offers a manual toggle.\n  - The dark mode provides a darker background with lighter text and adjusts UI elements (including the CodeMirror editor) for optimal readability in low-light conditions.\n  - The light mode maintains a bright interface for well-lit environments.\n\n- **Server \u0026 Security Enhancements:**\n  - The Apache configuration (or .htaccess files) is set to disable directory indexing (e.g., using `Options -Indexes` in the uploads directory), preventing unauthorized users from viewing directory contents.\n  - Direct access to sensitive files (e.g., `users.txt`) is restricted through .htaccess rules.\n  - A proxy download mechanism has been implemented (via endpoints like `download.php` and `downloadZip.php`) so that every file download request goes through a PHP script. This script validates the session and CSRF token before streaming the file, ensuring that even if a file URL is guessed, only authenticated users can access it.\n  - Administrators are advised to deploy the app on a secure internal network or use the proxy download mechanism for public deployments to further protect file content.\n\n- **Trash Management with Restore \u0026 Delete:**\n  - **Trash Storage \u0026 Metadata:**\n    - Deleted files are moved to a designated “Trash” folder rather than being immediately removed.\n    - Metadata is stored in a JSON file (`trash.json`) that records:\n      - Original folder and file name\n      - Timestamp when the file was trashed\n      - Uploader information (and optionally who deleted it)\n      - Additional metadata (e.g., file type)\n  - **Restore Functionality:**\n    - Admins can view trashed files in a modal.\n    - They can restore individual files (with conflict checks) or restore all files back to their original location.\n  - **Delete Functionality:**\n    - Users can permanently delete trashed files via:\n      - **Delete Selected:** Remove specific files from the Trash and update `trash.json`.\n      - **Delete All:** Permanently remove every file from the Trash after confirmation.\n  - **Auto-Purge Mechanism:**\n    - The system automatically purges (permanently deletes) any files in the Trash older than three days, helping manage storage and prevent the accumulation of outdated files.\n  - **User Interface:**\n    - The trash modal displays details such as file name, uploader/deleter, and the trashed date/time.\n    - Material icons with tooltips visually represent the restore and delete actions.\n\n---\n\n## Screenshots\n\n**Light mode:**\n![Light Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-mode.png)\n\n**Dark editor:**\n![dark-editor](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-editor.png)\n\n**Dark preview**\n![dark-preview](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-preview.png)\n\n**Restore or Delete Trash:**\n![restore-delete](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/restore-delete.png)\n\n**Login page:**\n![Login](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/login-page.png)\n\n  **iphone screenshots:**  \n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-iphone.png\" width=\"45%\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-preview-iphone.png\" width=\"45%\"\u003e\n\u003c/p\u003e\n\n---\n\n## Installation \u0026 Setup\n\n### Manual Installation\n\n1. **Clone or Download the Repository:**\n   - **Clone:**  \n\n     ```bash\n     git clone https://github.com/error311/multi-file-upload-editor.git\n     ```\n\n   - **Download:**  \n     Download the latest release from the GitHub releases page and extract it into your desired directory.\n\n2. **Deploy to Your Web Server:**\n   - Place the project files in your Apache web directory (e.g., `/var/www/html`).\n   - Ensure PHP 8.1+ is installed along with the required extensions (php-json, php-curl, php-zip, etc.).\n\n3. **Directory Setup \u0026 Permissions:**\n   - Create the following directories if they do not exist, and set appropriate permissions:\n     - `uploads/` – for file storage.\n     - `users/` – to store `users.txt` (user authentication data).\n     - `metadata/` – for storing `file_metadata.json` and other metadata.\n   - Example commands:\n\n     ```bash\n     mkdir -p /var/www/uploads /var/www/users /var/www/metadata\n     chmod -R 775 /var/www/uploads /var/www/users /var/www/metadata\n     ```\n\n4. **Configure Apache:**\n   - Ensure that directory indexing is disabled (using `Options -Indexes` in your `.htaccess` or Apache configuration).\n   - Make sure the Apache configuration allows URL rewriting if needed.\n\n5. **Configuration File:**\n   - Open `config.php` and adjust the following constants as necessary:\n     - `BASE_URL`: Set this to your web app’s base URL.\n     - `UPLOAD_DIR`: Adjust the directory path for uploads.\n     - `TIMEZONE`: Set to your preferred timezone.\n     - `TOTAL_UPLOAD_SIZE`: Ensure it matches PHP’s `upload_max_filesize` and `post_max_size` settings in your `php.ini`.\n\n### Initial Setup Instructions\n\n- **First Launch Admin Setup:**  \n  On first launch, if no users exist, the application will enter a setup mode. You will be prompted to create an admin user. This is handled automatically by the application (e.g., via a “Create Admin” form).  \n  **Note:** No default credentials are provided. You must create the first admin account to log in and manage additional users.\n\n---\n\n## Docker Usage\n\nFor users who prefer containerization, a Docker image is available\n\n### Quickstart\n\n1. **Pull the Docker Image:**\n\n   ```bash\n   docker pull error311/multi-file-upload-editor-docker:latest\n   ```\n\n2. **Run the Container:**\n\n   ```bash\n   docker run -d \\\n   -p 80:80 \\\n   -e TIMEZONE=\"America/New_York\" \\\n   -e TOTAL_UPLOAD_SIZE=\"5G\" \\\n   -e SECURE=\"false\" \\\n   -v /path/to/your/uploads:/var/www/uploads \\\n   -v /path/to/your/users:/var/www/users \\\n   -v /path/to/your/metadata:/var/www/metadata \\\n   --name multi-file-upload-editor \\\n   error311/multi-file-upload-editor-docker:latest\n   ```\n\n3. **Using Docker Compose:**\n\n   Create a docker-compose.yml file with the following content:\n\n   ```yaml\n   version: \"3.8\"\n   services:\n   web:\n     image: error311/multi-file-upload-editor-docker:latest\n     ports:\n       - \"80:80\"\n     environment:\n       TIMEZONE: \"America/New_York\"\n       TOTAL_UPLOAD_SIZE: \"5G\"\n       SECURE: \"false\"\n       PERSISTENT_TOKENS_KEY: \"default_please_change_this_key\"\n     volumes:\n       - /path/to/your/uploads:/var/www/uploads\n       - /path/to/your/users:/var/www/users\n       - /path/to/your/metadata:/var/www/metadata\n   ```\n\n**Then start the container with:**\n\n   ```bash\n   docker-compose up -d\n   ```\n\n---\n\n## Configuration Guidance\n\nThe `config.php` file contains several key constants that may need adjustment for your deployment:\n\n- **BASE_URL:**  \n  Set to the URL where your application is hosted (e.g., `http://yourdomain.com/uploads/`).\n\n- **UPLOAD_DIR, USERS_DIR, META_DIR:**  \n  Define the directories for uploads, user data, and metadata. Adjust these to match your server environment or Docker volume mounts.\n\n- **TIMEZONE \u0026 DATE_TIME_FORMAT:**  \n  Set according to your regional settings.\n\n- **TOTAL_UPLOAD_SIZE:**  \n  Defines the maximum upload size (default is `5G`). Ensure that PHP’s `upload_max_filesize` and `post_max_size` in your `php.ini` are consistent with this setting. The startup script (`start.sh`) updates PHP limits at runtime based on this value.\n\n- **Environment Variables (Docker):**  \n  The Docker image supports overriding configuration via environment variables. For example, you can set `SECURE`, `SHARE_URL`, `PERSISTENT_TOKENS_KEY` and port settings via the container’s environment.\n\n---\n\n## Additional Information\n\n- **Security:**  \n  All state-changing endpoints use CSRF token validation. Ensure that sessions and tokens are correctly configured as per your deployment environment.\n\n- **Permissions:**  \n  Both manual and Docker installations include steps to ensure that file and directory permissions are set correctly for the web server to read and write as needed.\n\n- **Logging \u0026 Troubleshooting:**  \n  Check Apache logs (located in `/var/log/apache2/`) for troubleshooting any issues during deployment or operation.\n\nEnjoy using the Multi File Upload Editor! For any issues or contributions, please refer to the [GitHub repository](https://github.com/error311/multi-file-upload-editor).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferror311%2Fmulti-file-upload-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferror311%2Fmulti-file-upload-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferror311%2Fmulti-file-upload-editor/lists"}