codemirror, pclzip, other changes
This commit is contained in:
Ryan
13
README.md
13
README.md
@@ -13,9 +13,12 @@ Multi File Upload Editor is a lightweight, secure web application for uploading,
|
||||
- **Multiple File Uploads with Progress:**
|
||||
- Users can select and upload multiple files at once. Each file upload shows an individual progress bar with percentage and upload speed, and image files display a small thumbnail preview (default icons for other file types).
|
||||
- **Built-in File Editing & Renaming:**
|
||||
- Text-based files (e.g., .txt, .html, .js) can be opened and edited in a modal window without leaving the page. The editor modal is resizable for convenience. Any file can be renamed in-place via a dedicated “Rename” action, without needing to open or re-upload it.
|
||||
- **Batch Operations (Delete/Copy/Move):**
|
||||
- Users can select one or many files and perform batch actions: delete files, copy them to another folder, or move them to a different folder. Action buttons for these operations remain visible whenever files exist and become enabled only when one or more files are selected.
|
||||
- Text-based files (e.g., .txt, .html, .js) can be opened and edited in a modal window without leaving the page. The editor modal is resizable and now uses CodeMirror for syntax highlighting, line numbering, and zoom in/out functionality—allowing users to adjust the text size for a better editing experience. Files can also be renamed via a dedicated “Rename” action without needing to re-upload them.
|
||||
- **Batch Operations (Delete/Copy/Move/Download):**
|
||||
- Delete Files: Delete multiple files at once.
|
||||
- Copy Files: Copy selected files to another folder.
|
||||
- Move Files: Move selected files to a different folder.
|
||||
- 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.
|
||||
- **Folder Management:**
|
||||
- Supports organizing files into folders and subfolders. Users can create new folders, rename existing folders, or delete folders. A dynamic folder tree in the UI allows navigation through directories and updates in real-time to reflect changes after any create, rename, or delete action.
|
||||
- **Sorting & Pagination:**
|
||||
@@ -31,9 +34,9 @@ Multi File Upload Editor is a lightweight, secure web application for uploading,
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
based off of:
|
||||
|
||||
12
auth.js
12
auth.js
@@ -17,13 +17,14 @@ export function initAuth() {
|
||||
password: document.getElementById("loginPassword").value.trim()
|
||||
};
|
||||
console.log("Sending login data:", formData);
|
||||
// sendRequest already handles credentials if configured in networkUtils.js.
|
||||
sendRequest("auth.php", "POST", formData)
|
||||
.then(data => {
|
||||
console.log("Login response:", data);
|
||||
if (data.success) {
|
||||
console.log("✅ Login successful. Reloading page.");
|
||||
window.location.reload();
|
||||
sessionStorage.setItem("welcomeMessage", "Welcome back, " + formData.username + "!");
|
||||
window.location.reload();
|
||||
} else {
|
||||
showToast("Login failed: " + (data.error || "Unknown error"));
|
||||
}
|
||||
@@ -34,7 +35,10 @@ export function initAuth() {
|
||||
|
||||
// Set up the logout button.
|
||||
document.getElementById("logoutBtn").addEventListener("click", function () {
|
||||
fetch("logout.php", { method: "POST" })
|
||||
fetch("logout.php", {
|
||||
method: "POST",
|
||||
credentials: "include" // Ensure the session cookie is sent.
|
||||
})
|
||||
.then(() => window.location.reload(true))
|
||||
.catch(error => console.error("Logout error:", error));
|
||||
});
|
||||
@@ -59,6 +63,7 @@ document.getElementById("saveUserBtn").addEventListener("click", function () {
|
||||
}
|
||||
fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
|
||||
})
|
||||
@@ -97,6 +102,7 @@ document.getElementById("deleteUserBtn").addEventListener("click", function () {
|
||||
}
|
||||
fetch("removeUser.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username: usernameToRemove })
|
||||
})
|
||||
@@ -186,7 +192,7 @@ function closeRemoveUserModal() {
|
||||
}
|
||||
|
||||
function loadUserList() {
|
||||
fetch("getUsers.php")
|
||||
fetch("getUsers.php", { credentials: "include" })
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const users = Array.isArray(data) ? data : (data.users || []);
|
||||
|
||||
@@ -35,27 +35,32 @@ export function updateFileActionButtons() {
|
||||
const copyBtn = document.getElementById("copySelectedBtn");
|
||||
const moveBtn = document.getElementById("moveSelectedBtn");
|
||||
const deleteBtn = document.getElementById("deleteSelectedBtn");
|
||||
const zipBtn = document.getElementById("downloadZipBtn");
|
||||
|
||||
// Hide the buttons and dropdown if no files exist.
|
||||
if (fileCheckboxes.length === 0) {
|
||||
copyBtn.style.display = "none";
|
||||
moveBtn.style.display = "none";
|
||||
deleteBtn.style.display = "none";
|
||||
zipBtn.style.display = "none";
|
||||
} else {
|
||||
// Otherwise, show the buttons and dropdown.
|
||||
copyBtn.style.display = "inline-block";
|
||||
moveBtn.style.display = "inline-block";
|
||||
deleteBtn.style.display = "inline-block";
|
||||
zipBtn.style.display = "inline-block";
|
||||
|
||||
// Enable the buttons if at least one file is selected; otherwise disable.
|
||||
if (selectedCheckboxes.length > 0) {
|
||||
copyBtn.disabled = false;
|
||||
moveBtn.disabled = false;
|
||||
deleteBtn.disabled = false;
|
||||
zipBtn.disabled = false;
|
||||
} else {
|
||||
copyBtn.disabled = true;
|
||||
moveBtn.disabled = true;
|
||||
deleteBtn.disabled = true;
|
||||
zipBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,4 +82,4 @@ export function showToast(message, duration = 3000) {
|
||||
toast.style.display = "none";
|
||||
}, 500); // Wait for the opacity transition to finish.
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
119
downloadZip.php
Normal file
119
downloadZip.php
Normal file
@@ -0,0 +1,119 @@
|
||||
<?php
|
||||
// downloadZip.php
|
||||
|
||||
require_once 'config.php';
|
||||
require_once 'lib/pclzip.lib.php';
|
||||
session_start();
|
||||
|
||||
// Check if the user is authenticated.
|
||||
if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
|
||||
http_response_code(401);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Unauthorized"]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Read and decode the JSON input.
|
||||
$rawData = file_get_contents("php://input");
|
||||
$data = json_decode($rawData, true);
|
||||
|
||||
if (!is_array($data) || !isset($data['folder']) || !isset($data['files']) || !is_array($data['files'])) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Invalid input."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
$folder = $data['folder'];
|
||||
$files = $data['files'];
|
||||
|
||||
// Validate folder name to allow subfolders.
|
||||
// "root" is allowed; otherwise, split by "/" and validate each segment.
|
||||
if ($folder !== "root") {
|
||||
$parts = explode('/', $folder);
|
||||
foreach ($parts as $part) {
|
||||
if (empty($part) || $part === '.' || $part === '..' || !preg_match('/^[A-Za-z0-9_\-. ]+$/', $part)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Invalid folder name."]);
|
||||
exit;
|
||||
}
|
||||
}
|
||||
$relativePath = implode(DIRECTORY_SEPARATOR, $parts) . DIRECTORY_SEPARATOR;
|
||||
} else {
|
||||
$relativePath = "";
|
||||
}
|
||||
|
||||
// Use the absolute UPLOAD_DIR from config.php.
|
||||
$baseDir = realpath(UPLOAD_DIR);
|
||||
if ($baseDir === false) {
|
||||
http_response_code(500);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Uploads directory not configured correctly."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
$folderPath = $baseDir . DIRECTORY_SEPARATOR . $relativePath;
|
||||
$folderPathReal = realpath($folderPath);
|
||||
|
||||
if ($folderPathReal === false || strpos($folderPathReal, $baseDir) !== 0) {
|
||||
http_response_code(404);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Folder not found."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
if (empty($files)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "No files specified."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
foreach ($files as $fileName) {
|
||||
if (!preg_match('/^[A-Za-z0-9_\-. ]+$/', $fileName)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Invalid file name: " . $fileName]);
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
// Build an array of files to include in the ZIP.
|
||||
$filesToZip = [];
|
||||
foreach ($files as $fileName) {
|
||||
$filePath = $folderPathReal . DIRECTORY_SEPARATOR . $fileName;
|
||||
if (file_exists($filePath)) {
|
||||
$filesToZip[] = $filePath;
|
||||
}
|
||||
}
|
||||
|
||||
if (empty($filesToZip)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "No valid files found to zip."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Create a temporary file for the ZIP archive.
|
||||
$tempZip = tempnam(sys_get_temp_dir(), 'zip') . '.zip';
|
||||
|
||||
// Create the archive using PclZip.
|
||||
$archive = new PclZip($tempZip);
|
||||
$v_list = $archive->create($filesToZip, PCLZIP_OPT_REMOVE_PATH, $folderPathReal);
|
||||
|
||||
if ($v_list === 0) {
|
||||
http_response_code(500);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Failed to create zip archive."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Serve the ZIP file.
|
||||
header('Content-Type: application/zip');
|
||||
header('Content-Disposition: attachment; filename="files.zip"');
|
||||
header('Content-Length: ' . filesize($tempZip));
|
||||
readfile($tempZip);
|
||||
unlink($tempZip);
|
||||
exit;
|
||||
?>
|
||||
425
fileManager.js
425
fileManager.js
@@ -9,61 +9,88 @@ export let sortOrder = { column: "uploaded", ascending: true };
|
||||
window.itemsPerPage = window.itemsPerPage || 10;
|
||||
window.currentPage = window.currentPage || 1;
|
||||
|
||||
// Helper to parse date strings in the "m/d/y h:iA" format into a timestamp.
|
||||
// Custom date parser (expected format: "MM/DD/YY hh:mma", e.g., "03/07/25 01:01AM")
|
||||
function parseCustomDate(dateStr) {
|
||||
// Normalize whitespace (replace one or more whitespace characters with a single space)
|
||||
dateStr = dateStr.replace(/\s+/g, " ").trim();
|
||||
// -------------------------------
|
||||
// Helper Functions
|
||||
// -------------------------------
|
||||
|
||||
// Expected format: "MM/DD/YY hh:mma" (e.g., "03/07/25 01:01AM")
|
||||
// Parse date strings in "m/d/y h:iA" format into a timestamp.
|
||||
function parseCustomDate(dateStr) {
|
||||
dateStr = dateStr.replace(/\s+/g, " ").trim();
|
||||
const parts = dateStr.split(" ");
|
||||
if (parts.length !== 2) {
|
||||
return new Date(dateStr).getTime();
|
||||
}
|
||||
const datePart = parts[0]; // e.g., "03/07/25"
|
||||
const timePart = parts[1]; // e.g., "01:01AM"
|
||||
|
||||
const datePart = parts[0];
|
||||
const timePart = parts[1];
|
||||
const dateComponents = datePart.split("/");
|
||||
if (dateComponents.length !== 3) {
|
||||
return new Date(dateStr).getTime();
|
||||
}
|
||||
|
||||
let month = parseInt(dateComponents[0], 10);
|
||||
let day = parseInt(dateComponents[1], 10);
|
||||
let year = parseInt(dateComponents[2], 10);
|
||||
if (year < 100) {
|
||||
year += 2000;
|
||||
}
|
||||
|
||||
// Expect timePart in format hh:mma, e.g., "01:01AM"
|
||||
const timeRegex = /^(\d{1,2}):(\d{2})(AM|PM)$/i;
|
||||
const match = timePart.match(timeRegex);
|
||||
if (!match) {
|
||||
return new Date(dateStr).getTime();
|
||||
}
|
||||
|
||||
let hour = parseInt(match[1], 10);
|
||||
const minute = parseInt(match[2], 10);
|
||||
const period = match[3].toUpperCase();
|
||||
|
||||
if (period === "PM" && hour !== 12) {
|
||||
hour += 12;
|
||||
}
|
||||
if (period === "AM" && hour === 12) {
|
||||
hour = 0;
|
||||
}
|
||||
|
||||
return new Date(year, month - 1, day, hour, minute).getTime();
|
||||
}
|
||||
|
||||
// Determines if a file is editable based on its extension.
|
||||
export function canEditFile(fileName) {
|
||||
const allowedExtensions = ["txt", "html", "htm", "php", "css", "js", "json", "xml", "md", "py", "ini", "csv", "log", "conf", "config", "bat", "rtf", "doc", "docx"];
|
||||
const allowedExtensions = [
|
||||
"txt", "html", "htm", "php", "css", "js", "json", "xml",
|
||||
"md", "py", "ini", "csv", "log", "conf", "config", "bat",
|
||||
"rtf", "doc", "docx"
|
||||
];
|
||||
const ext = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
|
||||
return allowedExtensions.includes(ext);
|
||||
}
|
||||
|
||||
// Load the file list for a given folder.
|
||||
// -------------------------------
|
||||
// Global Functions (attached to window)
|
||||
// -------------------------------
|
||||
|
||||
window.toggleRowSelection = function (event, fileName) {
|
||||
const targetTag = event.target.tagName.toLowerCase();
|
||||
if (targetTag === 'a' || targetTag === 'button' || targetTag === 'input') {
|
||||
return;
|
||||
}
|
||||
const row = event.currentTarget;
|
||||
const checkbox = row.querySelector('.file-checkbox');
|
||||
if (!checkbox) return;
|
||||
checkbox.checked = !checkbox.checked;
|
||||
window.updateRowHighlight(checkbox);
|
||||
updateFileActionButtons();
|
||||
};
|
||||
|
||||
window.updateRowHighlight = function (checkbox) {
|
||||
const row = checkbox.closest('tr');
|
||||
if (!row) return;
|
||||
if (checkbox.checked) {
|
||||
row.classList.add('row-selected');
|
||||
} else {
|
||||
row.classList.remove('row-selected');
|
||||
}
|
||||
};
|
||||
|
||||
// -------------------------------
|
||||
// File List Rendering
|
||||
// -------------------------------
|
||||
|
||||
export function loadFileList(folderParam) {
|
||||
const folder = folderParam || "root";
|
||||
return fetch("getFileList.php?folder=" + encodeURIComponent(folder) + "&t=" + new Date().getTime())
|
||||
@@ -90,28 +117,21 @@ export function renderFileTable(folder) {
|
||||
const fileListContainer = document.getElementById("fileList");
|
||||
const folderPath = (folder === "root")
|
||||
? "uploads/"
|
||||
: "uploads/" + encodeURIComponent(folder) + "/";
|
||||
|
||||
// Get current search term from the search input, if it exists.
|
||||
: "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
|
||||
let searchInputElement = document.getElementById("searchInput");
|
||||
const searchHadFocus = searchInputElement && (document.activeElement === searchInputElement);
|
||||
let searchTerm = searchInputElement ? searchInputElement.value : "";
|
||||
|
||||
// Filter fileData using the search term (case-insensitive).
|
||||
const filteredFiles = fileData.filter(file =>
|
||||
file.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
// Pagination variables.
|
||||
const itemsPerPage = window.itemsPerPage || 10;
|
||||
const currentPage = window.currentPage || 1;
|
||||
const totalFiles = filteredFiles.length;
|
||||
const totalPages = Math.ceil(totalFiles / itemsPerPage);
|
||||
const safeSearchTerm = escapeHTML(searchTerm);
|
||||
// 1. Top controls: Responsive row with search box on the left and Prev/Next on the right.
|
||||
|
||||
const topControlsHTML = `
|
||||
<div class="row align-items-center mb-3">
|
||||
<!-- Search box: full width on small, 8 columns on md+ -->
|
||||
<div class="col-12 col-md-8 mb-2 mb-md-0">
|
||||
<div class="input-group" style="max-width: 100%;">
|
||||
<div class="input-group-prepend">
|
||||
@@ -119,60 +139,34 @@ export function renderFileTable(folder) {
|
||||
<i class="material-icons">search</i>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
class="form-control"
|
||||
placeholder="Search files..."
|
||||
value="${safeSearchTerm}"
|
||||
aria-describedby="searchIcon"
|
||||
>
|
||||
<input type="text" id="searchInput" class="form-control" placeholder="Search files..." value="${safeSearchTerm}" aria-describedby="searchIcon">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Prev/Next buttons: full width on small, 4 columns on md+ -->
|
||||
<div class="col-12 col-md-4 text-left">
|
||||
<div class="d-flex justify-content-center justify-content-md-start align-items-center">
|
||||
<button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">
|
||||
Prev
|
||||
</button>
|
||||
<button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">Prev</button>
|
||||
<span style="margin: 0 8px; white-space: nowrap;">Page ${currentPage} of ${totalPages || 1}</span>
|
||||
<button class="custom-prev-next-btn" ${currentPage === totalPages || totalFiles === 0 ? "disabled" : ""} onclick="changePage(${currentPage + 1})">
|
||||
Next
|
||||
</button>
|
||||
<button class="custom-prev-next-btn" ${currentPage === totalPages || totalFiles === 0 ? "disabled" : ""} onclick="changePage(${currentPage + 1})">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
|
||||
// 2. Build the File Table with Bootstrap styling.
|
||||
let tableHTML = `
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40px;">
|
||||
<input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)">
|
||||
</th>
|
||||
<th data-column="name" style="cursor:pointer; white-space: nowrap;">
|
||||
File Name ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}
|
||||
</th>
|
||||
<th data-column="modified" class="hide-small" style="cursor:pointer; white-space: nowrap;">
|
||||
Date Modified ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}
|
||||
</th>
|
||||
<th data-column="uploaded" class="hide-small hide-medium" style="cursor:pointer; white-space: nowrap;">
|
||||
Upload Date ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}
|
||||
</th>
|
||||
<th data-column="size" class="hide-small" style="cursor:pointer; white-space: nowrap;">
|
||||
File Size ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}
|
||||
</th>
|
||||
<th data-column="uploader" class="hide-small hide-medium" style="cursor:pointer; white-space: nowrap;">
|
||||
Uploader ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}
|
||||
</th>
|
||||
<th style="width: 40px;"><input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)"></th>
|
||||
<th data-column="name" style="cursor:pointer; white-space: nowrap;">File Name ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
|
||||
<th data-column="modified" class="hide-small" style="cursor:pointer; white-space: nowrap;">Date Modified ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
|
||||
<th data-column="uploaded" class="hide-small hide-medium" style="cursor:pointer; white-space: nowrap;">Upload Date ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
|
||||
<th data-column="size" class="hide-small" style="cursor:pointer; white-space: nowrap;">File Size ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
|
||||
<th data-column="uploader" class="hide-small hide-medium" style="cursor:pointer; white-space: nowrap;">Uploader ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
`;
|
||||
|
||||
// Calculate slice for current page.
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = Math.min(startIndex + itemsPerPage, totalFiles);
|
||||
let tableBody = `<tbody>`;
|
||||
@@ -186,40 +180,42 @@ export function renderFileTable(folder) {
|
||||
const safeSize = escapeHTML(file.size);
|
||||
const safeUploader = escapeHTML(file.uploader || "Unknown");
|
||||
|
||||
// Check if the file is an image using a regex
|
||||
const isImage = /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name);
|
||||
|
||||
// Build the preview button HTML string using the file's properties directly.
|
||||
const previewButton = isImage
|
||||
? `<button class="btn btn-sm btn-info ml-2" onclick="previewImage('${folderPath + encodeURIComponent(file.name)}', '${safeFileName}')">
|
||||
<i class="material-icons">image</i>
|
||||
</button>`
|
||||
: "";
|
||||
|
||||
tableBody += `
|
||||
<tr onclick="toggleRowSelection(event, '${safeFileName}')" style="cursor:pointer;">
|
||||
<td>
|
||||
<input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
|
||||
</td>
|
||||
<td>${safeFileName}</td>
|
||||
<td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
|
||||
<td class="hide-small hide-medium" style="white-space: nowrap;">${safeUploaded}</td>
|
||||
<td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
|
||||
<td class="hide-small hide-medium" style="white-space: nowrap;">${safeUploader}</td>
|
||||
<td>
|
||||
<div class="button-wrap">
|
||||
<a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>
|
||||
Download
|
||||
</a>
|
||||
${isEditable ? `
|
||||
<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
|
||||
Edit
|
||||
</button>
|
||||
` : ""}
|
||||
<button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>
|
||||
Rename
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
<tr onclick="toggleRowSelection(event, '${safeFileName}')" style="cursor:pointer;">
|
||||
<td>
|
||||
<input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
|
||||
</td>
|
||||
<td>${safeFileName}</td>
|
||||
<td class="hide-small" style="white-space: nowrap;">${safeModified}</td>
|
||||
<td class="hide-small hide-medium" style="white-space: nowrap;">${safeUploaded}</td>
|
||||
<td class="hide-small" style="white-space: nowrap;">${safeSize}</td>
|
||||
<td class="hide-small hide-medium" style="white-space: nowrap;">${safeUploader}</td>
|
||||
<td>
|
||||
<div class="button-wrap">
|
||||
<a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>Download</a>
|
||||
${isEditable ? `<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Edit</button>` : ""}
|
||||
<button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Rename</button>
|
||||
${previewButton}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
tableBody += `<tr><td colspan="7">No files found.</td></tr>`;
|
||||
}
|
||||
tableBody += `</tbody></table>`;
|
||||
|
||||
// 3. Bottom controls: "Show [dropdown] items per page" with consistent 16px font.
|
||||
const bottomControlsHTML = `
|
||||
<div class="d-flex align-items-center mt-3" style="font-size:16px; line-height:1.5;">
|
||||
<label class="mr-2 mb-0" style="font-size:16px; line-height:1.5;">Show</label>
|
||||
@@ -230,23 +226,17 @@ export function renderFileTable(folder) {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Combine top controls, table, and bottom controls.
|
||||
fileListContainer.innerHTML = topControlsHTML + tableHTML + tableBody + bottomControlsHTML;
|
||||
|
||||
// Re-focus the search input if it was previously focused.
|
||||
const newSearchInput = document.getElementById("searchInput");
|
||||
if (searchHadFocus && newSearchInput) {
|
||||
newSearchInput.focus();
|
||||
newSearchInput.setSelectionRange(newSearchInput.value.length, newSearchInput.value.length);
|
||||
}
|
||||
|
||||
// Attach event listener for search input.
|
||||
newSearchInput.addEventListener("input", function () {
|
||||
window.currentPage = 1;
|
||||
renderFileTable(folder);
|
||||
});
|
||||
|
||||
// Attach sorting event listeners on header cells.
|
||||
const headerCells = document.querySelectorAll("table.table thead th[data-column]");
|
||||
headerCells.forEach(cell => {
|
||||
cell.addEventListener("click", function () {
|
||||
@@ -254,88 +244,82 @@ export function renderFileTable(folder) {
|
||||
sortFiles(column, folder);
|
||||
});
|
||||
});
|
||||
|
||||
// Reattach event listeners for file checkboxes.
|
||||
document.querySelectorAll('#fileList .file-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function (e) {
|
||||
updateRowHighlight(e.target);
|
||||
updateFileActionButtons();
|
||||
});
|
||||
});
|
||||
|
||||
updateFileActionButtons();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles row selection when the user clicks any part of the row (except buttons/links).
|
||||
*/
|
||||
window.toggleRowSelection = function (event, fileName) {
|
||||
const targetTag = event.target.tagName.toLowerCase();
|
||||
if (targetTag === 'a' || targetTag === 'button' || targetTag === 'input') {
|
||||
return;
|
||||
}
|
||||
const row = event.currentTarget;
|
||||
const checkbox = row.querySelector('.file-checkbox');
|
||||
if (!checkbox) return;
|
||||
checkbox.checked = !checkbox.checked;
|
||||
updateRowHighlight(checkbox);
|
||||
updateFileActionButtons();
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates row highlight based on whether the checkbox is checked.
|
||||
*/
|
||||
window.updateRowHighlight = function (checkbox) {
|
||||
const row = checkbox.closest('tr');
|
||||
if (!row) return;
|
||||
if (checkbox.checked) {
|
||||
row.classList.add('row-selected');
|
||||
} else {
|
||||
row.classList.remove('row-selected');
|
||||
// Global function to show an image preview modal.
|
||||
window.previewImage = function (imageUrl, fileName) {
|
||||
let modal = document.getElementById("imagePreviewModal");
|
||||
if (!modal) {
|
||||
modal = document.createElement("div");
|
||||
modal.id = "imagePreviewModal";
|
||||
// Full-screen overlay using flexbox, with no padding.
|
||||
Object.assign(modal.style, {
|
||||
display: "none",
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
zIndex: "1000"
|
||||
});
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content" style="max-width: 90vw; max-height: 90vh; background: white; padding: 20px; border-radius: 4px; overflow: auto; margin: auto; position: relative;">
|
||||
<span id="closeImageModal" style="position: absolute; top: 10px; right: 20px; font-size: 28px; cursor: pointer;">×</span>
|
||||
<h4 style="text-align: center; margin: 0 0 10px;"></h4>
|
||||
<img src="" style="max-width: 100%; max-height: 80vh; object-fit: contain; display: block; margin: 0 auto;" />
|
||||
</div>`;
|
||||
document.body.appendChild(modal);
|
||||
document.getElementById("closeImageModal").addEventListener("click", function () {
|
||||
modal.style.display = "none";
|
||||
});
|
||||
modal.addEventListener("click", function (e) {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
modal.querySelector("h4").textContent = "Preview: " + fileName;
|
||||
modal.querySelector("img").src = imageUrl;
|
||||
modal.style.display = "flex";
|
||||
};
|
||||
|
||||
export function sortFiles(column, folder) {
|
||||
// Toggle sort order if the column is the same, otherwise set ascending to true.
|
||||
if (sortOrder.column === column) {
|
||||
sortOrder.ascending = !sortOrder.ascending;
|
||||
} else {
|
||||
sortOrder.column = column;
|
||||
sortOrder.ascending = true;
|
||||
}
|
||||
|
||||
// Sort fileData based on the column.
|
||||
fileData.sort((a, b) => {
|
||||
let valA = a[column] || "";
|
||||
let valB = b[column] || "";
|
||||
|
||||
if (column === "modified" || column === "uploaded") {
|
||||
// Log the raw date strings.
|
||||
//console.log(`Sorting ${column}: raw values ->`, valA, valB);
|
||||
|
||||
const parsedA = parseCustomDate(valA);
|
||||
const parsedB = parseCustomDate(valB);
|
||||
|
||||
// Log the parsed numeric timestamps.
|
||||
//console.log(`Sorting ${column}: parsed values ->`, parsedA, parsedB);
|
||||
|
||||
valA = parsedA;
|
||||
valB = parsedB;
|
||||
} else if (typeof valA === "string") {
|
||||
valA = valA.toLowerCase();
|
||||
valB = valB.toLowerCase();
|
||||
}
|
||||
|
||||
if (valA < valB) return sortOrder.ascending ? -1 : 1;
|
||||
if (valA > valB) return sortOrder.ascending ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Re-render the file table after sorting.
|
||||
renderFileTable(folder);
|
||||
}
|
||||
|
||||
|
||||
// Delete selected files.
|
||||
export function handleDeleteSelected(e) {
|
||||
e.preventDefault();
|
||||
@@ -345,16 +329,12 @@ export function handleDeleteSelected(e) {
|
||||
showToast("No files selected.");
|
||||
return;
|
||||
}
|
||||
// Save selected file names in a global variable for use in the modal.
|
||||
window.filesToDelete = Array.from(checkboxes).map(chk => chk.value);
|
||||
// Update modal message (optional)
|
||||
document.getElementById("deleteFilesMessage").textContent =
|
||||
"Are you sure you want to delete " + window.filesToDelete.length + " selected file(s)?";
|
||||
// Show the delete modal.
|
||||
document.getElementById("deleteFilesModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Attach event listeners for delete modal buttons (wrap in DOMContentLoaded):
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const cancelDelete = document.getElementById("cancelDeleteFiles");
|
||||
if (cancelDelete) {
|
||||
@@ -366,7 +346,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const confirmDelete = document.getElementById("confirmDeleteFiles");
|
||||
if (confirmDelete) {
|
||||
confirmDelete.addEventListener("click", function () {
|
||||
// Proceed with deletion
|
||||
fetch("deleteFiles.php", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
@@ -390,6 +369,77 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
});
|
||||
|
||||
// Download selected files as Zip.
|
||||
export function handleDownloadZipSelected(e) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
const checkboxes = document.querySelectorAll(".file-checkbox:checked");
|
||||
if (checkboxes.length === 0) {
|
||||
showToast("No files selected for download.");
|
||||
return;
|
||||
}
|
||||
window.filesToDownload = Array.from(checkboxes).map(chk => chk.value);
|
||||
document.getElementById("downloadZipModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Attach event listeners for the download zip modal.
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const cancelDownloadZip = document.getElementById("cancelDownloadZip");
|
||||
if (cancelDownloadZip) {
|
||||
cancelDownloadZip.addEventListener("click", function () {
|
||||
document.getElementById("downloadZipModal").style.display = "none";
|
||||
});
|
||||
}
|
||||
const confirmDownloadZip = document.getElementById("confirmDownloadZip");
|
||||
if (confirmDownloadZip) {
|
||||
confirmDownloadZip.addEventListener("click", function () {
|
||||
let zipName = document.getElementById("zipFileNameInput").value.trim();
|
||||
if (!zipName) {
|
||||
showToast("Please enter a name for the zip file.");
|
||||
return;
|
||||
}
|
||||
if (!zipName.toLowerCase().endsWith(".zip")) {
|
||||
zipName += ".zip";
|
||||
}
|
||||
document.getElementById("downloadZipModal").style.display = "none";
|
||||
const folder = window.currentFolder || "root";
|
||||
fetch("downloadZip.php", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ folder: folder, files: window.filesToDownload })
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.text().then(text => {
|
||||
throw new Error("Failed to create zip file: " + text);
|
||||
});
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
if (!blob || blob.size === 0) {
|
||||
throw new Error("Received empty zip file.");
|
||||
}
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.style.display = "none";
|
||||
a.href = url;
|
||||
a.download = zipName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
a.remove();
|
||||
showToast("Download started.");
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error downloading zip:", error);
|
||||
showToast("Error downloading selected files as zip: " + error.message);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Copy selected files.
|
||||
export function handleCopySelected(e) {
|
||||
e.preventDefault();
|
||||
@@ -400,9 +450,7 @@ export function handleCopySelected(e) {
|
||||
return;
|
||||
}
|
||||
window.filesToCopy = Array.from(checkboxes).map(chk => chk.value);
|
||||
// Open the Copy modal.
|
||||
document.getElementById("copyFilesModal").style.display = "block";
|
||||
// Populate target folder dropdown.
|
||||
loadCopyMoveFolderListForModal("copyTargetFolder");
|
||||
}
|
||||
|
||||
@@ -412,15 +460,12 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
|
||||
const response = await fetch('getFolderList.php');
|
||||
const folders = await response.json();
|
||||
console.log('Folders fetched for modal:', folders);
|
||||
|
||||
const folderSelect = document.getElementById(dropdownId);
|
||||
folderSelect.innerHTML = '';
|
||||
|
||||
const rootOption = document.createElement('option');
|
||||
rootOption.value = 'root';
|
||||
rootOption.textContent = '(Root)';
|
||||
folderSelect.appendChild(rootOption);
|
||||
|
||||
if (Array.isArray(folders) && folders.length > 0) {
|
||||
folders.forEach(folder => {
|
||||
const option = document.createElement('option');
|
||||
@@ -488,9 +533,7 @@ export function handleMoveSelected(e) {
|
||||
return;
|
||||
}
|
||||
window.filesToMove = Array.from(checkboxes).map(chk => chk.value);
|
||||
// Open the Move modal.
|
||||
document.getElementById("moveFilesModal").style.display = "block";
|
||||
// Populate target folder dropdown.
|
||||
loadCopyMoveFolderListForModal("moveTargetFolder");
|
||||
}
|
||||
|
||||
@@ -543,7 +586,6 @@ export function editFile(fileName, folder) {
|
||||
let existingEditor = document.getElementById("editorContainer");
|
||||
if (existingEditor) { existingEditor.remove(); }
|
||||
const folderUsed = folder || window.currentFolder || "root";
|
||||
// For subfolders, encode each segment separately to preserve slashes.
|
||||
const folderPath = (folderUsed === "root")
|
||||
? "uploads/"
|
||||
: "uploads/" + folderUsed.split("/").map(encodeURIComponent).join("/") + "/";
|
||||
@@ -565,25 +607,70 @@ export function editFile(fileName, folder) {
|
||||
return response.text();
|
||||
})
|
||||
.then(content => {
|
||||
// Create the modal with zoom controls in a new controls div.
|
||||
const modal = document.createElement("div");
|
||||
modal.id = "editorContainer";
|
||||
modal.classList.add("modal", "editor-modal");
|
||||
modal.innerHTML = `
|
||||
<h3>Editing: ${fileName}</h3>
|
||||
<textarea id="fileEditor" style="width:100%; height:80%; resize:none;">${content}</textarea>
|
||||
<div id="editorControls" style="text-align:right; margin-bottom:5px;">
|
||||
<button id="decreaseFont" class="btn btn-sm btn-secondary">A-</button>
|
||||
<button id="increaseFont" class="btn btn-sm btn-secondary">A+</button>
|
||||
</div>
|
||||
<textarea id="fileEditor" style="width:100%; height:60%; resize:none;">${content}</textarea>
|
||||
<div style="margin-top:10px; text-align:right;">
|
||||
<button onclick="saveFile('${fileName}', '${folderUsed}')" class="btn btn-primary">Save</button>
|
||||
<button onclick="document.getElementById('editorContainer').remove()" class="btn btn-secondary">Close</button>
|
||||
<button id="saveBtn" class="btn btn-primary">Save</button>
|
||||
<button id="closeBtn" class="btn btn-secondary">Close</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
modal.style.display = "block";
|
||||
|
||||
// Initialize CodeMirror on the textarea.
|
||||
const editor = CodeMirror.fromTextArea(document.getElementById("fileEditor"), {
|
||||
lineNumbers: true,
|
||||
mode: "text/html", // Adjust mode based on file type if needed.
|
||||
theme: "default",
|
||||
viewportMargin: Infinity
|
||||
});
|
||||
// Set editor size to use most of the modal height.
|
||||
editor.setSize("100%", "60vh");
|
||||
|
||||
// Store the CodeMirror instance globally for saving.
|
||||
window.currentEditor = editor;
|
||||
|
||||
// Set a starting font size and apply it.
|
||||
let currentFontSize = 14; // default font size in px
|
||||
editor.getWrapperElement().style.fontSize = currentFontSize + "px";
|
||||
editor.refresh();
|
||||
|
||||
// Zoom out button: Decrease font size.
|
||||
document.getElementById("decreaseFont").addEventListener("click", function () {
|
||||
currentFontSize = Math.max(8, currentFontSize - 2);
|
||||
editor.getWrapperElement().style.fontSize = currentFontSize + "px";
|
||||
editor.refresh();
|
||||
});
|
||||
|
||||
// Zoom in button: Increase font size.
|
||||
document.getElementById("increaseFont").addEventListener("click", function () {
|
||||
currentFontSize = Math.min(32, currentFontSize + 2);
|
||||
editor.getWrapperElement().style.fontSize = currentFontSize + "px";
|
||||
editor.refresh();
|
||||
});
|
||||
|
||||
document.getElementById("saveBtn").addEventListener("click", function () {
|
||||
saveFile(fileName, folderUsed);
|
||||
});
|
||||
document.getElementById("closeBtn").addEventListener("click", function () {
|
||||
modal.remove();
|
||||
});
|
||||
})
|
||||
.catch(error => console.error("Error loading file:", error));
|
||||
}
|
||||
|
||||
export function saveFile(fileName, folder) {
|
||||
const editor = document.getElementById("fileEditor");
|
||||
// Retrieve updated content from the CodeMirror instance.
|
||||
const editor = window.currentEditor;
|
||||
if (!editor) {
|
||||
console.error("Editor not found!");
|
||||
return;
|
||||
@@ -591,7 +678,7 @@ export function saveFile(fileName, folder) {
|
||||
const folderUsed = folder || window.currentFolder || "root";
|
||||
const fileDataObj = {
|
||||
fileName: fileName,
|
||||
content: editor.value,
|
||||
content: editor.getValue(),
|
||||
folder: folderUsed
|
||||
};
|
||||
fetch("saveFile.php", {
|
||||
@@ -638,39 +725,34 @@ export function initFileActions() {
|
||||
deleteSelectedBtn.replaceWith(deleteSelectedBtn.cloneNode(true));
|
||||
document.getElementById("deleteSelectedBtn").addEventListener("click", handleDeleteSelected);
|
||||
}
|
||||
|
||||
const copySelectedBtn = document.getElementById("copySelectedBtn");
|
||||
if (copySelectedBtn) {
|
||||
copySelectedBtn.replaceWith(copySelectedBtn.cloneNode(true));
|
||||
document.getElementById("copySelectedBtn").addEventListener("click", handleCopySelected);
|
||||
}
|
||||
|
||||
const moveSelectedBtn = document.getElementById("moveSelectedBtn");
|
||||
if (moveSelectedBtn) {
|
||||
moveSelectedBtn.replaceWith(moveSelectedBtn.cloneNode(true));
|
||||
document.getElementById("moveSelectedBtn").addEventListener("click", handleMoveSelected);
|
||||
}
|
||||
// No need to set display styles here; let updateFileActionButtons handle it.
|
||||
// New: Download Selected as Zip button.
|
||||
const downloadZipBtn = document.getElementById("downloadZipBtn");
|
||||
if (downloadZipBtn) {
|
||||
downloadZipBtn.replaceWith(downloadZipBtn.cloneNode(true));
|
||||
document.getElementById("downloadZipBtn").addEventListener("click", handleDownloadZipSelected);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Rename function: always available.
|
||||
// Expose renameFile to global scope.
|
||||
export function renameFile(oldName, folder) {
|
||||
// Store the file name and folder globally for use in the modal.
|
||||
window.fileToRename = oldName;
|
||||
window.fileFolder = folder || window.currentFolder || "root";
|
||||
|
||||
// Pre-fill the input with the current file name.
|
||||
document.getElementById("newFileName").value = oldName;
|
||||
|
||||
// Show the rename file modal.
|
||||
document.getElementById("renameFileModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Attach event listeners after DOM content is loaded.
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Cancel button: hide modal and clear input.
|
||||
const cancelBtn = document.getElementById("cancelRenameFile");
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener("click", function () {
|
||||
@@ -678,14 +760,11 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("newFileName").value = "";
|
||||
});
|
||||
}
|
||||
|
||||
// Submit button: send rename request.
|
||||
const submitBtn = document.getElementById("submitRenameFile");
|
||||
if (submitBtn) {
|
||||
submitBtn.addEventListener("click", function () {
|
||||
const newName = document.getElementById("newFileName").value.trim();
|
||||
if (!newName || newName === window.fileToRename) {
|
||||
// No change; just hide the modal.
|
||||
document.getElementById("renameFileModal").style.display = "none";
|
||||
return;
|
||||
}
|
||||
@@ -727,6 +806,6 @@ window.changePage = function (newPage) {
|
||||
|
||||
window.changeItemsPerPage = function (newCount) {
|
||||
window.itemsPerPage = parseInt(newCount);
|
||||
window.currentPage = 1; // Reset to first page.
|
||||
window.currentPage = 1;
|
||||
renderFileTable(window.currentFolder);
|
||||
};
|
||||
};
|
||||
27
index.html
27
index.html
@@ -14,6 +14,12 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
|
||||
<!-- Load mode(s) you need, e.g., HTML mode: -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
|
||||
<!-- Optionally, load CSS mode if needed: -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -172,7 +178,7 @@
|
||||
<h2 id="fileListTitle">Files in (Root)</h2>
|
||||
<div id="fileListActions" class="file-list-actions">
|
||||
<button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">
|
||||
Delete Selected
|
||||
Delete Files
|
||||
</button>
|
||||
<!-- Delete Files Modal -->
|
||||
<div id="deleteFilesModal" class="modal">
|
||||
@@ -189,7 +195,7 @@
|
||||
</div>
|
||||
|
||||
<button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>
|
||||
Copy Selected
|
||||
Copy Files
|
||||
</button>
|
||||
<!-- Copy Files Modal -->
|
||||
<div id="copyFilesModal" class="modal">
|
||||
@@ -207,7 +213,7 @@
|
||||
</div>
|
||||
|
||||
<button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>
|
||||
Move Selected
|
||||
Move Files
|
||||
</button>
|
||||
<!-- Move Files Modal -->
|
||||
<div id="moveFilesModal" class="modal">
|
||||
@@ -223,6 +229,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled>
|
||||
Download ZIP
|
||||
</button>
|
||||
<!-- Download Zip Modal -->
|
||||
<div id="downloadZipModal" class="modal" style="display:none;">
|
||||
<div class="modal-content">
|
||||
<h4>Download Selected Files as Zip</h4>
|
||||
<p>Enter a name for the zip file:</p>
|
||||
<input type="text" id="zipFileNameInput" class="form-control" placeholder="files.zip" />
|
||||
<div class="modal-footer" style="margin-top:15px; text-align:right;">
|
||||
<button id="cancelDownloadZip" class="btn btn-secondary">Cancel</button>
|
||||
<button id="confirmDownloadZip" class="btn btn-primary">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fileList"></div>
|
||||
</div>
|
||||
|
||||
5421
lib/pclzip.lib.php
Normal file
5421
lib/pclzip.lib.php
Normal file
File diff suppressed because it is too large
Load Diff
120
metadata/downloadZip.php
Normal file
120
metadata/downloadZip.php
Normal file
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
// downloadZip.php
|
||||
|
||||
require_once 'config.php';
|
||||
session_start();
|
||||
|
||||
// Check if the user is authenticated.
|
||||
// Using the "authenticated" flag as set in auth.php.
|
||||
if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
|
||||
http_response_code(401);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Unauthorized"]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Read and decode the JSON input.
|
||||
$rawData = file_get_contents("php://input");
|
||||
$data = json_decode($rawData, true);
|
||||
|
||||
if (!is_array($data) || !isset($data['folder']) || !isset($data['files']) || !is_array($data['files'])) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Invalid input."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
$folder = $data['folder'];
|
||||
$files = $data['files'];
|
||||
|
||||
// Validate folder name to allow subfolders.
|
||||
// "root" is allowed; otherwise, split by "/" and validate each segment.
|
||||
if ($folder !== "root") {
|
||||
$parts = explode('/', $folder);
|
||||
foreach ($parts as $part) {
|
||||
// Reject empty segments or segments with "." or ".."
|
||||
if (empty($part) || $part === '.' || $part === '..' || !preg_match('/^[A-Za-z0-9_\-. ]+$/', $part)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Invalid folder name."]);
|
||||
exit;
|
||||
}
|
||||
}
|
||||
// Rebuild the relative folder path (using DIRECTORY_SEPARATOR).
|
||||
$relativePath = implode(DIRECTORY_SEPARATOR, $parts) . DIRECTORY_SEPARATOR;
|
||||
} else {
|
||||
$relativePath = "";
|
||||
}
|
||||
|
||||
// Use the absolute UPLOAD_DIR from config.php.
|
||||
$baseDir = realpath(UPLOAD_DIR);
|
||||
if ($baseDir === false) {
|
||||
http_response_code(500);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Uploads directory not configured correctly."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Build the full folder path.
|
||||
$folderPath = $baseDir . DIRECTORY_SEPARATOR . $relativePath;
|
||||
|
||||
// Normalize the folder path.
|
||||
$folderPathReal = realpath($folderPath);
|
||||
|
||||
// Ensure the folder exists and is within the base uploads directory.
|
||||
if ($folderPathReal === false || strpos($folderPathReal, $baseDir) !== 0) {
|
||||
http_response_code(404);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Folder not found."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Validate that at least one file is specified.
|
||||
if (empty($files)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "No files specified."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Validate each file name.
|
||||
foreach ($files as $fileName) {
|
||||
if (!preg_match('/^[A-Za-z0-9_\-. ]+$/', $fileName)) {
|
||||
http_response_code(400);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Invalid file name: " . $fileName]);
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a temporary file for the ZIP archive.
|
||||
$tempZip = tempnam(sys_get_temp_dir(), 'zip');
|
||||
$zip = new ZipArchive();
|
||||
if ($zip->open($tempZip, ZipArchive::OVERWRITE) !== TRUE) {
|
||||
error_log("ZipArchive open failed: " . $zip->lastErrorString());
|
||||
http_response_code(500);
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode(["error" => "Could not create zip archive."]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Add each requested file to the zip archive.
|
||||
foreach ($files as $fileName) {
|
||||
$filePath = $folderPathReal . DIRECTORY_SEPARATOR . $fileName;
|
||||
if (file_exists($filePath)) {
|
||||
// Add the file using just the file name as its internal path.
|
||||
$zip->addFile($filePath, $fileName);
|
||||
}
|
||||
}
|
||||
$zip->close();
|
||||
|
||||
// Serve the ZIP file.
|
||||
header('Content-Type: application/zip');
|
||||
header('Content-Disposition: attachment; filename="files.zip"');
|
||||
header('Content-Length: ' . filesize($tempZip));
|
||||
readfile($tempZip);
|
||||
|
||||
// Remove the temporary ZIP file.
|
||||
unlink($tempZip);
|
||||
exit;
|
||||
?>
|
||||
18
styles.css
18
styles.css
@@ -189,6 +189,12 @@ header {
|
||||
z-index: 1100; /* Ensure it's on top of any overlay */
|
||||
}
|
||||
|
||||
#deleteFolderMessage {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
/* ===========================================================
|
||||
LOGOUT & USER CONTROLS
|
||||
=========================================================== */
|
||||
@@ -365,6 +371,18 @@ header {
|
||||
background-color: #fb8c00;
|
||||
}
|
||||
|
||||
#downloadZipBtn {
|
||||
background-color: #009688; /* Material Teal */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#downloadZipBtn:hover {
|
||||
background-color: #00796B; /* A slightly darker teal for hover */
|
||||
}
|
||||
|
||||
/* File List Edit Button (Material Green) */
|
||||
#fileList button.edit-btn {
|
||||
background-color: #4CAF50;
|
||||
|
||||
Reference in New Issue
Block a user