From 8d7187d5389aeb59074a1d1f7691eb722d093c8e Mon Sep 17 00:00:00 2001 From: Ryan Date: Mon, 31 Mar 2025 04:41:55 -0400 Subject: [PATCH] File Tagging and Global Tag Management added --- README.md | 87 +++++---- domUtils.js | 4 +- fileManager.js | 107 +++++++---- fileTags.js | 460 ++++++++++++++++++++++++++++++++++++++++++++++++ getFileList.php | 9 +- main.js | 2 + saveFileTag.php | 138 +++++++++++++++ 7 files changed, 733 insertions(+), 74 deletions(-) create mode 100644 fileTags.js create mode 100644 saveFileTag.php diff --git a/README.md b/README.md index 17e048e..0678eba 100644 --- a/README.md +++ b/README.md @@ -51,31 +51,45 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy - **Extract Zip:** When one or more ZIP files are selected, users can extract the archive(s) directly into the current folder. - **Drag & Drop (File Movement):** Easily move files by selecting them from the file list and 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. - **Enhanced Context Menu & Keyboard Shortcuts:** - - **Right-Click Context Menu:** - - A custom context menu appears on right-clicking within the file list. - - For multiple selections, options include Delete Selected, Copy Selected, Move Selected, Download Zip, and (if applicable) Extract Zip. - - When exactly one file is selected, additional options (Preview, Edit [if editable], and Rename) are available. - - **Keyboard Shortcut for Deletion:** + - **Right-Click Context Menu:** + - A custom context menu appears on right-clicking within the file list. + - For multiple selections, options include Delete Selected, Copy Selected, Move Selected, Download Zip, and (if applicable) Extract Zip. + - When exactly one file is selected, additional options (Preview, Edit [if editable], Rename, and Tag File) are available. + - **Keyboard Shortcut for Deletion:** - A global keydown listener detects Delete/Backspace key presses (when no input is focused) to trigger the delete operation. +- **File Tagging and Global Tag Management:** + - **Context Menu Tagging:** + - Single-file tagging: “Tag File” option in the right-click menu opens a modal to add a tag (with name and color) to the file. + - Multi-file tagging: When multiple files are selected, a “Tag Selected” option opens a multi‑file tagging modal to apply the same tag to all selected files. + - **Tagging Modals & Custom Dropdown:** + - Dedicated modals provide an interface for adding and updating tags. + - A custom dropdown in each modal displays available global tags with a colored preview and a remove icon. + - **Global Tag Store:** + - Tags are stored globally (persisted in a JSON file) for reuse across files and sessions. + - New tags added to any file are automatically added to the global store. + - Users can remove a global tag directly from the dropdown, which removes it from the available tag list for all files. + - **Unified Search Filtering:** + - The single search box now filters files based on both file names and tag names (case‑insensitive). + - **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. - - **Folder Manager Context Menu:** - - 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. - - **Keyboard Shortcut for Folder Deletion:** - - A global key listener (Delete/Backspace) is provided to trigger folder deletion (with safeguards to prevent deleting the root folder). + - A dynamic folder tree in the UI allows users to navigate directories easily, with real-time updates. + - **Per-Folder Metadata Storage:** Each folder has its own metadata JSON file (e.g., `root_metadata.json`, `FolderName_metadata.json`), updated with operations like copy/move/rename. + - **Intuitive Breadcrumb Navigation:** Clickable breadcrumbs enable users to quickly jump to any parent folder; supports drag & drop for moving files. + - **Folder Manager Context Menu:** + - Right-clicking on a folder brings up a custom context menu with options for creating, renaming, and deleting folders. + - **Keyboard Shortcut for Folder Deletion:** + - A global key listener (Delete/Backspace) triggers folder deletion with safeguards to prevent deletion of the root folder. - **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. + - Files 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” buttons. - **Share Link Functionality:** - - 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. - - Share links are stored in a JSON file with details including the folder, file, expiration timestamp, and hashed password. - - The share endpoint (`share.php`) validates tokens, expiration, and password before serving files (or forcing downloads). + - Generate shareable links for files with configurable expiration times (e.g., 30, 60, 120, 180, 240 minutes, and 1 day) and optional password protection. + - Share links are stored in a JSON file with details including folder, file, expiration timestamp, and hashed password. + - The share endpoint validates tokens, expiration, and password before serving files (or forcing downloads). - The share URL is configurable via environment variables or auto-detected from the server. - **User Authentication & Management:** @@ -83,28 +97,28 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy - Admin users can add or remove users through the interface. - Passwords are hashed using PHP’s `password_hash()` for security. - All state-changing endpoints include CSRF token validation. - - Change password supported for all users. - - Basic Auth supported for login. + - Password change functionality is supported for all users. + - Basic Auth is available for login. - **Persistent Login (Remember Me) with Encrypted Tokens:** - Users can remain logged in across sessions securely. - Persistent tokens are encrypted using AES‑256‑CBC before being stored in a JSON file. - - On auto-login, the tokens are decrypted on the server to re-establish user sessions without requiring re-authentication. + - On auto-login, tokens are decrypted on the server to re-establish user sessions without re-authentication. - **Responsive, Dynamic & Persistent UI:** - The interface is mobile-friendly and adapts to various screen sizes by hiding non-critical columns on small devices. - Asynchronous updates (via Fetch API and XMLHttpRequest) keep the UI responsive without full page reloads. - - 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. + - Persistent settings (such as items per page, dark/light mode preference, folder tree state, and the last open folder) ensure a smooth, customized user experience. - **Dark Mode/Light Mode:** - - The application automatically adapts to the operating system’s theme preference by default and offers a manual toggle. - - 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. - - The light mode maintains a bright interface for well-lit environments. + - The application automatically adapts to the operating system’s theme preference by default, with a manual toggle available. + - Dark mode provides a darker background with lighter text, and UI elements (including the CodeMirror editor) are adjusted for optimal readability in low-light conditions. + - Light mode maintains a bright interface suitable for well-lit environments. - **Server & Security Enhancements:** - - 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. - - Direct access to sensitive files (e.g., `users.txt`) is restricted through .htaccess rules. - - 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. - - 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. + - Apache (or .htaccess) configurations disable directory indexing (e.g., using `Options -Indexes` in the uploads directory), preventing unauthorized file browsing. + - Direct access to sensitive files (e.g., `users.txt`) is restricted via .htaccess rules. + - A proxy download mechanism (via endpoints like `download.php` and `downloadZip.php`) routes all file downloads through PHP, ensuring session and CSRF token validation before file access. + - Administrators are advised to deploy the app on a secure internal network or use the proxy download mechanism for public deployments. - **Trash Management with Restore & Delete:** - **Trash Storage & Metadata:** @@ -115,29 +129,28 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy - Uploader information (and optionally who deleted it) - Additional metadata (e.g., file type) - **Restore Functionality:** - - Admins can view trashed files in a modal. - - They can restore individual files (with conflict checks) or restore all files back to their original location. + - Admins can view trashed files in a modal and restore individual or all files back to their original location (with conflict checks). - **Delete Functionality:** - Users can permanently delete trashed files via: - **Delete Selected:** Remove specific files from the Trash and update `trash.json`. - **Delete All:** Permanently remove every file from the Trash after confirmation. - **Auto-Purge Mechanism:** - - 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. - - **User Interface:** - - The trash modal displays details such as file name, uploader/deleter, and the trashed date/time. - - Material icons with tooltips visually represent the restore and delete actions. + - The system automatically purges files in the Trash older than three days, managing storage and preventing accumulation of outdated files. + - **Trash UI:** + - The trash modal displays file name, uploader/deleter, and trashed date/time. + - Material icons with tooltips represent restore and delete actions. - **Drag & Drop Cards with Dedicated Drop Zones:** - **Sidebar Drop Zone:** - - Cards (such as the upload card or folder management card) can be dragged into a dedicated sidebar drop zone for quick access to frequently used operations. + - Cards (e.g., upload or folder management) can be dragged into a dedicated sidebar drop zone for quick access to frequently used operations. - The sidebar drop zone expands dynamically to accept drops anywhere within its visual area. - **Top Bar Drop Zone:** - A top drop zone is available for reordering or managing cards quickly. - Dragging a card to the top drop zone provides immediate visual feedback, ensuring a fluid and customizable workflow. - **Seamless Interaction:** - - Both drop zones support smooth drag and drop interactions with animations and pointer event adjustments to prevent interference, ensuring that cards can be dropped reliably regardless of screen position. + - Both drop zones support smooth drag-and-drop interactions with animations and pointer event adjustments, ensuring reliable card placement regardless of screen position. -# 🔒 Admin Panel, TOTP & OpenID Connect (OIDC) Integration +## 🔒 Admin Panel, TOTP & OpenID Connect (OIDC) Integration - **Flexible Authentication:** - Supports multiple authentication methods including Form-based Login, Basic Auth, OpenID Connect (OIDC), and TOTP-based Two-Factor Authentication. diff --git a/domUtils.js b/domUtils.js index dc4a277..4925e3a 100644 --- a/domUtils.js +++ b/domUtils.js @@ -97,7 +97,7 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear search - +
@@ -157,7 +157,7 @@ export function buildFileTableRow(file, folderPath) { - ${safeFileName} + ${safeFileName} ${safeModified} ${safeUploaded} ${safeSize} diff --git a/fileManager.js b/fileManager.js index 0e4b516..a1c9bee 100644 --- a/fileManager.js +++ b/fileManager.js @@ -15,6 +15,8 @@ import { export let fileData = []; export let sortOrder = { column: "uploaded", ascending: true }; +import { initTagSearch, openTagModal, openMultiTagModal } from './fileTags.js'; + window.itemsPerPage = window.itemsPerPage || 10; window.currentPage = window.currentPage || 1; window.viewMode = localStorage.getItem("viewMode") || "table"; // "table" or "gallery" @@ -258,7 +260,7 @@ function previewFile(fileUrl, fileName) { embed.style.height = "80vh"; embed.style.border = "none"; container.appendChild(embed); - } else if (/\.(mp4|webm|mov)$/i.test(fileName)) { + } else if (/\.(mp4|webm|mov|ogg)$/i.test(fileName)) { const video = document.createElement("video"); video.src = fileUrl; video.controls = true; @@ -419,17 +421,19 @@ function fileDragStartHandler(event) { // export function renderFileTable(folder) { const fileListContainer = document.getElementById("fileList"); - const searchTerm = window.currentSearchTerm || ""; + const searchTerm = (window.currentSearchTerm || "").toLowerCase(); const itemsPerPageSetting = parseInt(localStorage.getItem("itemsPerPage") || "10", 10); let currentPage = window.currentPage || 1; - const filteredFiles = fileData.filter(file => - file.name.toLowerCase().includes(searchTerm.toLowerCase()) - ); + // Filter files: include a file if its name OR any of its tags include the search term. + const filteredFiles = fileData.filter(file => { + const nameMatch = file.name.toLowerCase().includes(searchTerm); + const tagMatch = file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm)); + return nameMatch || tagMatch; + }); const totalFiles = filteredFiles.length; const totalPages = Math.ceil(totalFiles / itemsPerPageSetting); - if (currentPage > totalPages) { currentPage = totalPages > 0 ? totalPages : 1; window.currentPage = currentPage; @@ -442,19 +446,40 @@ export function renderFileTable(folder) { const topControlsHTML = buildSearchAndPaginationControls({ currentPage, totalPages, - searchTerm + searchTerm: window.currentSearchTerm || "" }); let headerHTML = buildFileTableHeader(sortOrder); const startIndex = (currentPage - 1) * itemsPerPageSetting; const endIndex = Math.min(startIndex + itemsPerPageSetting, totalFiles); let rowsHTML = ""; + if (totalFiles > 0) { - filteredFiles.slice(startIndex, endIndex).forEach(file => { + filteredFiles.slice(startIndex, endIndex).forEach((file, idx) => { + // Build the table row HTML. let rowHTML = buildFileTableRow(file, folderPath); + // Add a unique id attribute so that tag updates can target this row. + rowHTML = rowHTML.replace(" 0) { + tagBadgesHTML = '
'; + file.tags.forEach(tag => { + tagBadgesHTML += `${escapeHTML(tag.name)}`; + }); + tagBadgesHTML += "
"; + } + + // Insert tag badges into the file name cell. + rowHTML = rowHTML.replace(/()(.*?)(<\/td>)/, (match, p1, p2, p3) => { + return p1 + p2 + tagBadgesHTML + p3; + }); + // Insert share button into the actions cell. rowHTML = rowHTML.replace(/(<\/div>\s*<\/td>\s*<\/tr>)/, `$1`); + rowsHTML += rowHTML; }); } else { @@ -472,12 +497,10 @@ export function renderFileTable(folder) { window.currentSearchTerm = newSearchInput.value; window.currentPage = 1; renderFileTable(folder); - // After re‑render, re-select the input element and set focus. setTimeout(() => { const freshInput = document.getElementById("searchInput"); if (freshInput) { freshInput.focus(); - // Place the caret at the end of the text. const len = freshInput.value.length; freshInput.setSelectionRange(len, len); } @@ -519,17 +542,22 @@ export function renderFileTable(folder) { }); } -// -// --- RENDER GALLERY VIEW --- -// export function renderGalleryView(folder) { const fileListContainer = document.getElementById("fileList"); + const searchTerm = (window.currentSearchTerm || "").toLowerCase(); + // Filter files using the same logic as table view. + const filteredFiles = fileData.filter(file => { + return file.name.toLowerCase().includes(searchTerm) || + (file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm))); + }); + const folderPath = folder === "root" ? "uploads/" : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/"; const gridStyle = "display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px;"; let galleryHTML = `
`; - fileData.forEach((file) => { + + filteredFiles.forEach((file) => { let thumbnail; if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) { thumbnail = `${escapeHTML(file.name)}`; @@ -538,12 +566,24 @@ export function renderGalleryView(folder) { } else { thumbnail = `insert_drive_file`; } + + // Build tag badges HTML for the gallery view. + let tagBadgesHTML = ""; + if (file.tags && file.tags.length > 0) { + tagBadgesHTML = `
`; + file.tags.forEach(tag => { + tagBadgesHTML += `${escapeHTML(tag.name)}`; + }); + tagBadgesHTML += `
`; + } + galleryHTML += `
${thumbnail}
${escapeHTML(file.name)} + ${tagBadgesHTML}
file_download ${file.editable ? ` - ` : ""} @@ -565,22 +605,10 @@ export function renderGalleryView(folder) {
`; }); + galleryHTML += "
"; fileListContainer.innerHTML = galleryHTML; - // Re-bind share button events if necessary. - document.querySelectorAll(".gallery-share-btn").forEach(btn => { - btn.addEventListener("click", function (e) { - e.stopPropagation(); - const fileName = this.getAttribute("data-file"); - const folder = this.getAttribute("data-folder"); - const file = fileData.find(f => f.name === fileName); - if (file) { - openShareModal(file, folder); - } - }); - }); - createViewToggleButton(); updateFileActionButtons(); } @@ -1454,6 +1482,7 @@ function hideFileContextMenu() { // Context menu handler for the file list. function fileListContextMenuHandler(e) { e.preventDefault(); + // If no file is selected, try to select the row that was right-clicked. let row = e.target.closest("tr"); if (row) { @@ -1483,11 +1512,20 @@ function fileListContextMenuHandler(e) { }); } - if (selected.length === 1) { - // Look up the file object. + // If multiple files are selected, add a "Tag Selected" option. + if (selected.length > 1) { + menuItems.push({ + label: "Tag Selected", + action: () => { + const files = fileData.filter(f => selected.includes(f.name)); + openMultiTagModal(files); + } + }); + } + // If exactly one file is selected, add options specific to that file. + else if (selected.length === 1) { const file = fileData.find(f => f.name === selected[0]); - // Add Preview option. menuItems.push({ label: "Preview", action: () => { @@ -1499,7 +1537,6 @@ function fileListContextMenuHandler(e) { } }); - // Only show Edit option if file is editable. if (canEditFile(file.name)) { menuItems.push({ label: "Edit", @@ -1507,11 +1544,15 @@ function fileListContextMenuHandler(e) { }); } - // Add Rename option. menuItems.push({ label: "Rename", action: () => { renameFile(selected[0], window.currentFolder); } }); + + menuItems.push({ + label: "Tag File", + action: () => { openTagModal(file); } + }); } showFileContextMenu(e.clientX, e.clientY, menuItems); diff --git a/fileTags.js b/fileTags.js new file mode 100644 index 0000000..f8544fa --- /dev/null +++ b/fileTags.js @@ -0,0 +1,460 @@ +// fileTags.js +// This module provides functions for opening the tag modal, +// adding tags to files (with a global tag store for reuse), +// updating the file row display with tag badges, +// filtering the file list by tag, and persisting tag data. +import { escapeHTML } from './domUtils.js'; + +export function openTagModal(file) { + // Create the modal element. + let modal = document.createElement('div'); + modal.id = 'tagModal'; + modal.className = 'modal'; + modal.innerHTML = ` +
+
+

Tag File: ${file.name}

+ × +
+
+ + +

+ + +

+
+ +
+
+
+ +
+
+ +
+
+
+ `; + document.body.appendChild(modal); + modal.style.display = 'block'; + + updateCustomTagDropdown(); + + document.getElementById('closeTagModal').addEventListener('click', () => { + modal.remove(); + }); + + updateTagModalDisplay(file); + + document.getElementById('tagNameInput').addEventListener('input', (e) => { + updateCustomTagDropdown(e.target.value); + }); + + document.getElementById('saveTagBtn').addEventListener('click', () => { + const tagName = document.getElementById('tagNameInput').value.trim(); + const tagColor = document.getElementById('tagColorInput').value; + if (!tagName) { + alert('Please enter a tag name.'); + return; + } + addTagToFile(file, { name: tagName, color: tagColor }); + updateTagModalDisplay(file); + updateFileRowTagDisplay(file); + saveFileTags(file); + document.getElementById('tagNameInput').value = ''; + updateCustomTagDropdown(); + }); +} + +/** + * Open a modal to tag multiple files. + * @param {Array} files - Array of file objects to tag. + */ +export function openMultiTagModal(files) { + let modal = document.createElement('div'); + modal.id = 'multiTagModal'; + modal.className = 'modal'; + modal.innerHTML = ` +
+
+

Tag Selected Files (${files.length})

+ × +
+
+ + +

+ + +

+
+ +
+
+
+ +
+
+
+ `; + document.body.appendChild(modal); + modal.style.display = 'block'; + + updateMultiCustomTagDropdown(); + + document.getElementById('closeMultiTagModal').addEventListener('click', () => { + modal.remove(); + }); + + document.getElementById('multiTagNameInput').addEventListener('input', (e) => { + updateMultiCustomTagDropdown(e.target.value); + }); + + document.getElementById('saveMultiTagBtn').addEventListener('click', () => { + const tagName = document.getElementById('multiTagNameInput').value.trim(); + const tagColor = document.getElementById('multiTagColorInput').value; + if (!tagName) { + alert('Please enter a tag name.'); + return; + } + files.forEach(file => { + addTagToFile(file, { name: tagName, color: tagColor }); + updateFileRowTagDisplay(file); + saveFileTags(file); + }); + modal.remove(); + }); +} + +/** + * Update the custom dropdown for multi-tag modal. + * Similar to updateCustomTagDropdown but includes a remove icon. + */ +function updateMultiCustomTagDropdown(filterText = "") { + const dropdown = document.getElementById("multiCustomTagDropdown"); + if (!dropdown) return; + dropdown.innerHTML = ""; + let tags = window.globalTags || []; + if (filterText) { + tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase())); + } + if (tags.length > 0) { + tags.forEach(tag => { + const item = document.createElement("div"); + item.style.cursor = "pointer"; + item.style.padding = "5px"; + item.style.borderBottom = "1px solid #eee"; + // Display colored square and tag name with remove icon. + item.innerHTML = ` + + ${escapeHTML(tag.name)} + × + `; + item.addEventListener("click", function(e) { + if (e.target.classList.contains("global-remove")) return; + document.getElementById("multiTagNameInput").value = tag.name; + document.getElementById("multiTagColorInput").value = tag.color; + }); + item.querySelector('.global-remove').addEventListener("click", function(e){ + e.stopPropagation(); + removeGlobalTag(tag.name); + }); + dropdown.appendChild(item); + }); + } else { + dropdown.innerHTML = "
No tags available
"; + } +} + +function updateCustomTagDropdown(filterText = "") { + const dropdown = document.getElementById("customTagDropdown"); + if (!dropdown) return; + dropdown.innerHTML = ""; + let tags = window.globalTags || []; + if (filterText) { + tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase())); + } + if (tags.length > 0) { + tags.forEach(tag => { + const item = document.createElement("div"); + item.style.cursor = "pointer"; + item.style.padding = "5px"; + item.style.borderBottom = "1px solid #eee"; + item.innerHTML = ` + + ${escapeHTML(tag.name)} + × + `; + item.addEventListener("click", function(e){ + if (e.target.classList.contains('global-remove')) return; + document.getElementById("tagNameInput").value = tag.name; + document.getElementById("tagColorInput").value = tag.color; + }); + item.querySelector('.global-remove').addEventListener("click", function(e){ + e.stopPropagation(); + removeGlobalTag(tag.name); + }); + dropdown.appendChild(item); + }); + } else { + dropdown.innerHTML = "
No tags available
"; + } +} + +// Update the modal display to show current tags on the file. +function updateTagModalDisplay(file) { + const container = document.getElementById('currentTags'); + if (!container) return; + container.innerHTML = 'Current Tags: '; + if (file.tags && file.tags.length > 0) { + file.tags.forEach(tag => { + const tagElem = document.createElement('span'); + tagElem.textContent = tag.name; + tagElem.style.backgroundColor = tag.color; + tagElem.style.color = '#fff'; + tagElem.style.padding = '2px 6px'; + tagElem.style.marginRight = '5px'; + tagElem.style.borderRadius = '3px'; + tagElem.style.display = 'inline-block'; + tagElem.style.position = 'relative'; + + const removeIcon = document.createElement('span'); + removeIcon.textContent = ' ✕'; + removeIcon.style.fontWeight = 'bold'; + removeIcon.style.marginLeft = '3px'; + removeIcon.style.cursor = 'pointer'; + + removeIcon.addEventListener('click', (e) => { + e.stopPropagation(); + removeTagFromFile(file, tag.name); + }); + + tagElem.appendChild(removeIcon); + container.appendChild(tagElem); + }); + } else { + container.innerHTML += 'None'; + } +} + +function removeTagFromFile(file, tagName) { + file.tags = file.tags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase()); + updateTagModalDisplay(file); + updateFileRowTagDisplay(file); + saveFileTags(file); +} + +/** + * Remove a tag from the global tag store. + * This function updates window.globalTags and calls the backend endpoint + * to remove the tag from the persistent store. + */ +function removeGlobalTag(tagName) { + window.globalTags = window.globalTags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase()); + localStorage.setItem('globalTags', JSON.stringify(window.globalTags)); + updateCustomTagDropdown(); + updateMultiCustomTagDropdown(); + saveGlobalTagRemoval(tagName); +} + +// NEW: Save global tag removal to the server. +function saveGlobalTagRemoval(tagName) { + fetch("saveFileTag.php", { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json", + "X-CSRF-Token": window.csrfToken + }, + body: JSON.stringify({ + folder: "root", + file: "global", + deleteGlobal: true, + tagToDelete: tagName, + tags: [] + }) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + console.log("Global tag removed:", tagName); + if (data.globalTags) { + window.globalTags = data.globalTags; + localStorage.setItem('globalTags', JSON.stringify(window.globalTags)); + updateCustomTagDropdown(); + updateMultiCustomTagDropdown(); + } + } else { + console.error("Error removing global tag:", data.error); + } + }) + .catch(err => { + console.error("Error removing global tag:", err); + }); +} + +// Global store for reusable tags. +window.globalTags = window.globalTags || []; +if (localStorage.getItem('globalTags')) { + try { + window.globalTags = JSON.parse(localStorage.getItem('globalTags')); + } catch (e) { } +} + +// New function to load global tags from the server's persistent JSON. +export function loadGlobalTags() { + fetch("metadata/createdTags.json", { credentials: "include" }) + .then(response => response.json()) + .then(data => { + window.globalTags = data; + localStorage.setItem('globalTags', JSON.stringify(window.globalTags)); + updateCustomTagDropdown(); + updateMultiCustomTagDropdown(); + }) + .catch(err => { + console.error("Error loading global tags:", err); + window.globalTags = []; + updateCustomTagDropdown(); + updateMultiCustomTagDropdown(); + }); +} + +loadGlobalTags(); + +// Add (or update) a tag in the file object. +export function addTagToFile(file, tag) { + if (!file.tags) { + file.tags = []; + } + const exists = file.tags.find(t => t.name.toLowerCase() === tag.name.toLowerCase()); + if (exists) { + exists.color = tag.color; + } else { + file.tags.push(tag); + } + const globalExists = window.globalTags.find(t => t.name.toLowerCase() === tag.name.toLowerCase()); + if (!globalExists) { + window.globalTags.push(tag); + localStorage.setItem('globalTags', JSON.stringify(window.globalTags)); + } +} + +// Update the file row (in table view) to show tag badges. +export function updateFileRowTagDisplay(file) { + const rows = document.querySelectorAll(`[id^="file-row-${encodeURIComponent(file.name)}"]`); + console.log('Updating tags for rows:', rows); + rows.forEach(row => { + let cell = row.querySelector('.file-name-cell'); + if (cell) { + let badgeContainer = cell.querySelector('.tag-badges'); + if (!badgeContainer) { + badgeContainer = document.createElement('div'); + badgeContainer.className = 'tag-badges'; + badgeContainer.style.display = 'inline-block'; + badgeContainer.style.marginLeft = '5px'; + cell.appendChild(badgeContainer); + } + badgeContainer.innerHTML = ''; + if (file.tags && file.tags.length > 0) { + file.tags.forEach(tag => { + const badge = document.createElement('span'); + badge.textContent = tag.name; + badge.style.backgroundColor = tag.color; + badge.style.color = '#fff'; + badge.style.padding = '2px 4px'; + badge.style.marginRight = '2px'; + badge.style.borderRadius = '3px'; + badge.style.fontSize = '0.8em'; + badge.style.verticalAlign = 'middle'; + badgeContainer.appendChild(badge); + }); + } + } + }); +} + +export function initTagSearch() { + const searchInput = document.getElementById('searchInput'); + if (searchInput) { + let tagSearchInput = document.getElementById('tagSearchInput'); + if (!tagSearchInput) { + tagSearchInput = document.createElement('input'); + tagSearchInput.id = 'tagSearchInput'; + tagSearchInput.placeholder = 'Filter by tag'; + tagSearchInput.style.marginLeft = '10px'; + tagSearchInput.style.padding = '5px'; + searchInput.parentNode.insertBefore(tagSearchInput, searchInput.nextSibling); + tagSearchInput.addEventListener('input', () => { + window.currentTagFilter = tagSearchInput.value.trim().toLowerCase(); + if (window.currentFolder) { + renderFileTable(window.currentFolder); + } + }); + } + } +} + +export function filterFilesByTag(files) { + if (window.currentTagFilter && window.currentTagFilter !== '') { + return files.filter(file => { + if (file.tags && file.tags.length > 0) { + return file.tags.some(tag => tag.name.toLowerCase().includes(window.currentTagFilter)); + } + return false; + }); + } + return files; +} + +function updateGlobalTagList() { + const dataList = document.getElementById("globalTagList"); + if (dataList) { + dataList.innerHTML = ""; + window.globalTags.forEach(tag => { + const option = document.createElement("option"); + option.value = tag.name; + dataList.appendChild(option); + }); + } +} + +export function saveFileTags(file, deleteGlobal = false, tagToDelete = null) { + const folder = file.folder || "root"; + const payload = { + folder: folder, + file: file.name, + tags: file.tags + }; + if (deleteGlobal && tagToDelete) { + payload.file = "global"; + payload.deleteGlobal = true; + payload.tagToDelete = tagToDelete; + } + fetch("saveFileTag.php", { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json", + "X-CSRF-Token": window.csrfToken + }, + body: JSON.stringify(payload) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + console.log("Tags saved:", data); + if (data.globalTags) { + window.globalTags = data.globalTags; + localStorage.setItem('globalTags', JSON.stringify(window.globalTags)); + updateCustomTagDropdown(); + updateMultiCustomTagDropdown(); + } + } else { + console.error("Error saving tags:", data.error); + } + }) + .catch(err => { + console.error("Error saving tags:", err); + }); +} \ No newline at end of file diff --git a/getFileList.php b/getFileList.php index b173c6c..324d61d 100644 --- a/getFileList.php +++ b/getFileList.php @@ -93,9 +93,14 @@ foreach ($files as $file) { 'modified' => $fileDateModified, 'uploaded' => $fileUploadedDate, 'size' => $fileSizeFormatted, - 'uploader' => $fileUploader + 'uploader' => $fileUploader, + 'tags' => isset($metadata[$metaKey]['tags']) ? $metadata[$metaKey]['tags'] : [] ]; } -echo json_encode(["files" => $fileList]); +// Load global tags from createdTags.json. +$globalTagsFile = META_DIR . "createdTags.json"; +$globalTags = file_exists($globalTagsFile) ? json_decode(file_get_contents($globalTagsFile), true) : []; + +echo json_encode(["files" => $fileList, "globalTags" => $globalTags]); ?> \ No newline at end of file diff --git a/main.js b/main.js index cf20c0d..5e3f29a 100644 --- a/main.js +++ b/main.js @@ -18,6 +18,7 @@ import { initUpload } from './upload.js'; import { initAuth, checkAuthentication } from './auth.js'; import { setupTrashRestoreDelete } from './trashRestoreDelete.js'; import { initDragAndDrop, loadSidebarOrder } from './dragAndDrop.js' +import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js'; function loadCsrfToken() { fetch('token.php', { credentials: 'include' }) @@ -129,6 +130,7 @@ document.addEventListener("DOMContentLoaded", function () { checkAuthentication().then(authenticated => { if (authenticated) { window.currentFolder = "root"; + initTagSearch(); loadFileList(window.currentFolder); initDragAndDrop(); loadSidebarOrder(); diff --git a/saveFileTag.php b/saveFileTag.php new file mode 100644 index 0000000..c21be3e --- /dev/null +++ b/saveFileTag.php @@ -0,0 +1,138 @@ + "Unauthorized"]); + http_response_code(401); + exit; +} + +// CSRF Protection: validate token from header. +$headers = getallheaders(); +if (!isset($headers['X-CSRF-Token']) || $headers['X-CSRF-Token'] !== $_SESSION['csrf_token']) { + echo json_encode(["error" => "Invalid CSRF token."]); + http_response_code(403); + exit; +} + +// Retrieve and sanitize input. +$data = json_decode(file_get_contents('php://input'), true); +$file = isset($data['file']) ? trim($data['file']) : ''; +$folder = isset($data['folder']) ? trim($data['folder']) : 'root'; +$tags = isset($data['tags']) ? $data['tags'] : []; + +// Basic validation. +if ($file === '') { + echo json_encode(["error" => "No file specified."]); + exit; +} + +$globalTagsFile = META_DIR . "createdTags.json"; + +// If file is "global", update the global tags only. +if ($file === "global") { + if (!file_exists($globalTagsFile)) { + if (file_put_contents($globalTagsFile, json_encode([], JSON_PRETTY_PRINT)) === false) { + echo json_encode(["error" => "Failed to create global tags file."]); + exit; + } + } + $globalTags = json_decode(file_get_contents($globalTagsFile), true); + if (!is_array($globalTags)) { + $globalTags = []; + } + // If deleteGlobal flag is set and tagToDelete is provided, remove it. + if (isset($data['deleteGlobal']) && $data['deleteGlobal'] === true && isset($data['tagToDelete'])) { + $tagToDelete = strtolower($data['tagToDelete']); + $globalTags = array_values(array_filter($globalTags, function($globalTag) use ($tagToDelete) { + return strtolower($globalTag['name']) !== $tagToDelete; + })); + } else { + // Otherwise, merge new tags. + foreach ($tags as $tag) { + $found = false; + foreach ($globalTags as &$globalTag) { + if (strtolower($globalTag['name']) === strtolower($tag['name'])) { + $globalTag['color'] = $tag['color']; + $found = true; + break; + } + } + if (!$found) { + $globalTags[] = $tag; + } + } + } + if (file_put_contents($globalTagsFile, json_encode($globalTags, JSON_PRETTY_PRINT)) === false) { + echo json_encode(["error" => "Failed to save global tags."]); + exit; + } + echo json_encode(["success" => "Global tags updated successfully.", "globalTags" => $globalTags]); + exit; +} + +// Validate folder name. +if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) { + echo json_encode(["error" => "Invalid folder name."]); + exit; +} + +function getMetadataFilePath($folder) { + if (strtolower($folder) === 'root' || $folder === '') { + return META_DIR . "root_metadata.json"; + } + return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json'; +} + +$metadataFile = getMetadataFilePath($folder); +$metadata = file_exists($metadataFile) ? json_decode(file_get_contents($metadataFile), true) : []; + +if (!isset($metadata[$file])) { + $metadata[$file] = []; +} +$metadata[$file]['tags'] = $tags; + +if (file_put_contents($metadataFile, json_encode($metadata, JSON_PRETTY_PRINT)) === false) { + echo json_encode(["error" => "Failed to save tag data."]); + exit; +} + +// Now update the global tags file as well. +if (!file_exists($globalTagsFile)) { + if (file_put_contents($globalTagsFile, json_encode([], JSON_PRETTY_PRINT)) === false) { + echo json_encode(["error" => "Failed to create global tags file."]); + exit; + } +} + +$globalTags = json_decode(file_get_contents($globalTagsFile), true); +if (!is_array($globalTags)) { + $globalTags = []; +} + +foreach ($tags as $tag) { + $found = false; + foreach ($globalTags as &$globalTag) { + if (strtolower($globalTag['name']) === strtolower($tag['name'])) { + $globalTag['color'] = $tag['color']; + $found = true; + break; + } + } + if (!$found) { + $globalTags[] = $tag; + } +} + +if (file_put_contents($globalTagsFile, json_encode($globalTags, JSON_PRETTY_PRINT)) === false) { + echo json_encode(["error" => "Failed to save global tags."]); + exit; +} + +echo json_encode(["success" => "Tag data saved successfully.", "tags" => $tags, "globalTags" => $globalTags]); +?> \ No newline at end of file