diff --git a/README.md b/README.md index 90870fa..a8bd499 100644 --- a/README.md +++ b/README.md @@ -15,10 +15,13 @@ MFE - Multi File Upload Editor is a lightweight, secure, self-hosted web applica ## Features -- **Multiple File/Folder Uploads with Progress:** - - Users can select and upload multiple files & folders at once. - - Each file upload displays an individual progress bar with percentage and upload speed. - - Image files show a small thumbnail preview (with default Material icons for other file types). +- **Multiple File/Folder Uploads with Progress (Resumable.js Integration):** + - 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. + - **Chunked Uploads:** Files are uploaded in configurable chunks (default set as 3 MB) to efficiently handle large files. + - **Pause, Resume, and Retry:** Uploads can be paused and resumed at any time, with support for retrying failed chunks. + - **Real-Time Progress:** Each file shows an individual progress bar that displays percentage complete and upload speed. + - **File & Folder Grouping:** When many files are dropped, files are automatically grouped into a scrollable wrapper, ensuring the interface remains clean. + - **Secure Uploads:** All uploads integrate CSRF token validation and other security checks. - **Built-in File Editing & Renaming:** - Text-based files (e.g., .txt, .html, .js) can be opened and edited in a modal window using CodeMirror for: - Syntax highlighting @@ -40,11 +43,12 @@ MFE - Multi File Upload Editor is a lightweight, secure, self-hosted web applica - **Copy Files:** Copy selected files to another folder with a unique-naming feature to prevent overwrites. - **Move Files:** Move selected files to a different folder, automatically generating a unique filename if needed to avoid data loss. - **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. - - **Drag & Drop:** Easily move files by selecting them from the file list and simply dragging them onto your desired folder in the folder tree. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action. + - **Drag & 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. - **Folder Management:** - Organize files into folders and subfolders with the ability to create, rename, and delete folders. - A dynamic folder tree in the UI allows users to navigate directories easily, and any changes are immediately reflected in real time. - **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. + - **Intuitive Breadcrumb Navigation:** Clickable breadcrumbs enable users to quickly jump to any parent folder, streamlining navigation across subfolders. Supports drag & drop to move files. - **Sorting & Pagination:** - The file list can be sorted by name, modified date, upload date, file size, or uploader. - Pagination controls let users navigate through files with selectable page sizes (10, 20, 50, or 100 items per page) and “Prev”/“Next” navigation buttons. diff --git a/fileManager.js b/fileManager.js index e08be2f..5ebdfb6 100644 --- a/fileManager.js +++ b/fileManager.js @@ -172,7 +172,7 @@ function enhancedPreviewFile(fileUrl, fileName) { modal.innerHTML = `
× -

+

`; document.body.appendChild(modal); @@ -1007,7 +1007,7 @@ function adjustEditorSize() { if (modal && window.currentEditor) { // Calculate available height for the editor. // If you have a header or footer inside the modal, subtract their heights. - const headerHeight = 60; + const headerHeight = 60; // adjust this value as needed const availableHeight = modal.clientHeight - headerHeight; window.currentEditor.setSize("100%", availableHeight + "px"); } @@ -1054,12 +1054,12 @@ export function editFile(fileName, folder) { modal.innerHTML = `

Editing: ${fileName}

+
+ + +
-
- - -
@@ -1157,13 +1157,17 @@ export function saveFile(fileName, folder) { } export function displayFilePreview(file, container) { + // Use the underlying File object if it exists (for resumable files) + const actualFile = file.file || file; container.style.display = "inline-block"; - if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) { + if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(actualFile.name)) { const img = document.createElement("img"); - img.src = URL.createObjectURL(file); + img.src = URL.createObjectURL(actualFile); img.classList.add("file-preview-img"); + container.innerHTML = ""; // Clear previous content container.appendChild(img); } else { + container.innerHTML = ""; // Clear previous content const iconSpan = document.createElement("span"); iconSpan.classList.add("material-icons", "file-icon"); iconSpan.textContent = "insert_drive_file"; diff --git a/folderManager.js b/folderManager.js index de9383e..b8a0127 100644 --- a/folderManager.js +++ b/folderManager.js @@ -87,9 +87,10 @@ function bindBreadcrumbEvents() { const breadcrumbLinks = document.querySelectorAll(".breadcrumb-link"); breadcrumbLinks.forEach(link => { // Click event for navigation. - link.addEventListener("click", function(e) { + link.addEventListener("click", function (e) { e.stopPropagation(); let folder = this.getAttribute("data-folder"); + console.log("Breadcrumb clicked, folder:", folder); window.currentFolder = folder; localStorage.setItem("lastOpenedFolder", folder); const titleEl = document.getElementById("fileListTitle"); @@ -113,14 +114,14 @@ function bindBreadcrumbEvents() { }); // Drag-and-drop events. - link.addEventListener("dragover", function(e) { + link.addEventListener("dragover", function (e) { e.preventDefault(); this.classList.add("drop-hover"); }); - link.addEventListener("dragleave", function(e) { + link.addEventListener("dragleave", function (e) { this.classList.remove("drop-hover"); }); - link.addEventListener("drop", function(e) { + link.addEventListener("drop", function (e) { e.preventDefault(); this.classList.remove("drop-hover"); const dropFolder = this.getAttribute("data-folder"); @@ -365,7 +366,7 @@ export async function loadFolderTree(selectedFolder) { // Event binding for folder selection in folder tree. container.querySelectorAll(".folder-option").forEach(el => { - el.addEventListener("click", function(e) { + el.addEventListener("click", function (e) { e.stopPropagation(); container.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected")); this.classList.add("selected"); @@ -387,7 +388,7 @@ export async function loadFolderTree(selectedFolder) { // Event binding for toggling folders. const rootToggle = container.querySelector("#rootRow .folder-toggle"); if (rootToggle) { - rootToggle.addEventListener("click", function(e) { + rootToggle.addEventListener("click", function (e) { e.stopPropagation(); const nestedUl = container.querySelector("#rootRow + ul"); if (nestedUl) { @@ -409,7 +410,7 @@ export async function loadFolderTree(selectedFolder) { } container.querySelectorAll(".folder-toggle").forEach(toggle => { - toggle.addEventListener("click", function(e) { + toggle.addEventListener("click", function (e) { e.stopPropagation(); const siblingUl = this.parentNode.querySelector("ul"); const folderPath = this.getAttribute("data-folder"); @@ -459,12 +460,12 @@ function openRenameFolderModal() { document.getElementById("renameFolderModal").style.display = "block"; } -document.getElementById("cancelRenameFolder").addEventListener("click", function() { +document.getElementById("cancelRenameFolder").addEventListener("click", function () { document.getElementById("renameFolderModal").style.display = "none"; document.getElementById("newRenameFolderName").value = ""; }); -document.getElementById("submitRenameFolder").addEventListener("click", function(event) { +document.getElementById("submitRenameFolder").addEventListener("click", function (event) { event.preventDefault(); const selectedFolder = window.currentFolder || "root"; const newNameBasename = document.getElementById("newRenameFolderName").value.trim(); @@ -517,11 +518,11 @@ function openDeleteFolderModal() { document.getElementById("deleteFolderModal").style.display = "block"; } -document.getElementById("cancelDeleteFolder").addEventListener("click", function() { +document.getElementById("cancelDeleteFolder").addEventListener("click", function () { document.getElementById("deleteFolderModal").style.display = "none"; }); -document.getElementById("confirmDeleteFolder").addEventListener("click", function() { +document.getElementById("confirmDeleteFolder").addEventListener("click", function () { const selectedFolder = window.currentFolder || "root"; const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); fetch("deleteFolder.php", { @@ -549,16 +550,16 @@ document.getElementById("confirmDeleteFolder").addEventListener("click", functio }); }); -document.getElementById("createFolderBtn").addEventListener("click", function() { +document.getElementById("createFolderBtn").addEventListener("click", function () { document.getElementById("createFolderModal").style.display = "block"; }); -document.getElementById("cancelCreateFolder").addEventListener("click", function() { +document.getElementById("cancelCreateFolder").addEventListener("click", function () { document.getElementById("createFolderModal").style.display = "none"; document.getElementById("newFolderName").value = ""; }); -document.getElementById("submitCreateFolder").addEventListener("click", function() { +document.getElementById("submitCreateFolder").addEventListener("click", function () { const folderInput = document.getElementById("newFolderName").value.trim(); if (!folderInput) { showToast("Please enter a folder name."); diff --git a/index.html b/index.html index cb410c4..f567e30 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ + @@ -161,15 +162,16 @@
Upload Files/Folders
+ style="height: 100%;" novalidate>
- Drop files/folders here or click 'Choose files' + style="border:2px dashed #ccc; padding:20px; cursor:pointer; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative;"> + Drop files/folders here or click 'Choose Files'
- - + + +
@@ -181,7 +183,8 @@
-
+
Folder Navigation & Management @@ -319,16 +322,17 @@
-