Add rename and move funcitonality

This commit is contained in:
Jake Lyell 2026-01-04 16:45:24 +11:00
parent aafb20b746
commit 2ebcb7e72c
4 changed files with 518 additions and 5 deletions

@ -1 +1 @@
Subproject commit bd4e6707503ab9c97d13ee0d8f8c69e9ff03cd12
Subproject commit fe766f15cb9ff1ef8214210a8667037df4c60b81

View File

@ -72,6 +72,7 @@ void CrossPointWebServer::begin() {
server->on("/api/status", HTTP_GET, [this] { handleStatus(); });
server->on("/api/files", HTTP_GET, [this] { handleFileListData(); });
server->on("/api/folders", HTTP_GET, [this] { handleFolderList(); });
// Upload endpoint with special handling for multipart form data
server->on("/upload", HTTP_POST, [this] { handleUploadPost(); }, [this] { handleUpload(); });
@ -82,6 +83,9 @@ void CrossPointWebServer::begin() {
// Delete file/folder endpoint
server->on("/delete", HTTP_POST, [this] { handleDelete(); });
// Move/rename file/folder endpoint
server->on("/move", HTTP_POST, [this] { handleMove(); });
server->onNotFound([this] { handleNotFound(); });
Serial.printf("[%lu] [WEB] [MEM] Free heap after route setup: %d bytes\n", millis(), ESP.getFreeHeap());
@ -555,3 +559,152 @@ void CrossPointWebServer::handleDelete() const {
server->send(500, "text/plain", "Failed to delete item");
}
}
void CrossPointWebServer::handleMove() const {
// Get source and destination paths from form data
if (!server->hasArg("sourcePath")) {
server->send(400, "text/plain", "Missing source path");
return;
}
if (!server->hasArg("destPath")) {
server->send(400, "text/plain", "Missing destination path");
return;
}
String sourcePath = server->arg("sourcePath");
String destPath = server->arg("destPath");
// Validate source path
if (sourcePath.isEmpty() || sourcePath == "/") {
server->send(400, "text/plain", "Cannot move root directory");
return;
}
// Validate destination path
if (destPath.isEmpty()) {
server->send(400, "text/plain", "Destination path cannot be empty");
return;
}
// Ensure paths start with /
if (!sourcePath.startsWith("/")) {
sourcePath = "/" + sourcePath;
}
if (!destPath.startsWith("/")) {
destPath = "/" + destPath;
}
// Security check on source: prevent moving protected items
const String sourceName = sourcePath.substring(sourcePath.lastIndexOf('/') + 1);
if (sourceName.startsWith(".")) {
Serial.printf("[%lu] [WEB] Move rejected - hidden/system item: %s\n", millis(), sourcePath.c_str());
server->send(403, "text/plain", "Cannot move system files");
return;
}
for (size_t i = 0; i < HIDDEN_ITEMS_COUNT; i++) {
if (sourceName.equals(HIDDEN_ITEMS[i])) {
Serial.printf("[%lu] [WEB] Move rejected - protected item: %s\n", millis(), sourcePath.c_str());
server->send(403, "text/plain", "Cannot move protected items");
return;
}
}
// Check if source exists
if (!SdMan.exists(sourcePath.c_str())) {
Serial.printf("[%lu] [WEB] Move failed - source not found: %s\n", millis(), sourcePath.c_str());
server->send(404, "text/plain", "Source item not found");
return;
}
// Check if destination already exists
if (SdMan.exists(destPath.c_str())) {
Serial.printf("[%lu] [WEB] Move failed - destination already exists: %s\n", millis(), destPath.c_str());
server->send(400, "text/plain", "Destination already exists");
return;
}
// Ensure destination parent directory exists
const int lastSlash = destPath.lastIndexOf('/');
if (lastSlash > 0) {
const String parentDir = destPath.substring(0, lastSlash);
if (!SdMan.exists(parentDir.c_str())) {
Serial.printf("[%lu] [WEB] Move failed - destination directory does not exist: %s\n", millis(), parentDir.c_str());
server->send(400, "text/plain", "Destination directory does not exist");
return;
}
}
Serial.printf("[%lu] [WEB] Attempting to move: %s -> %s\n", millis(), sourcePath.c_str(), destPath.c_str());
// Perform the move using rename
if (SdMan.rename(sourcePath.c_str(), destPath.c_str())) {
Serial.printf("[%lu] [WEB] Successfully moved: %s -> %s\n", millis(), sourcePath.c_str(), destPath.c_str());
server->send(200, "text/plain", "Moved successfully");
} else {
Serial.printf("[%lu] [WEB] Failed to move: %s -> %s\n", millis(), sourcePath.c_str(), destPath.c_str());
server->send(500, "text/plain", "Failed to move item");
}
}
void CrossPointWebServer::handleFolderList() const {
Serial.printf("[%lu] [WEB] Building folder list...\n", millis());
String jsonResponse = "[";
jsonResponse += "\"/\"";
collectFoldersRecursively("/", jsonResponse);
jsonResponse += "]";
Serial.printf("[%lu] [WEB] Served folder list\n", millis());
server->send(200, "application/json", jsonResponse);
}
void CrossPointWebServer::collectFoldersRecursively(const char* path, String& json) const {
FsFile dir = SdMan.open(path);
if (!dir || !dir.isDirectory()) {
if (dir) dir.close();
return;
}
FsFile entry = dir.openNextFile();
char name[128];
while (entry) {
if (entry.isDirectory()) {
entry.getName(name, sizeof(name));
String folderName = String(name);
// Skip hidden folders
bool shouldSkip = folderName.startsWith(".");
// Check against protected folders
if (!shouldSkip) {
for (size_t i = 0; i < HIDDEN_ITEMS_COUNT; i++) {
if (folderName.equals(HIDDEN_ITEMS[i])) {
shouldSkip = true;
break;
}
}
}
if (!shouldSkip) {
String folderPath = String(path);
if (!folderPath.endsWith("/")) folderPath += "/";
folderPath += folderName;
json += ",\"" + folderPath + "\"";
// Recurse into subfolder
collectFoldersRecursively(folderPath.c_str(), json);
}
}
entry.close();
yield(); // Allow other tasks to process
entry = dir.openNextFile();
}
dir.close();
}

View File

@ -40,6 +40,7 @@ class CrossPointWebServer {
// File scanning
void scanFiles(const char* path, const std::function<void(FileInfo)>& callback) const;
void collectFoldersRecursively(const char* path, String& json) const;
String formatFileSize(size_t bytes) const;
bool isEpubFile(const String& filename) const;
@ -49,8 +50,10 @@ class CrossPointWebServer {
void handleStatus() const;
void handleFileList() const;
void handleFileListData() const;
void handleFolderList() const;
void handleUpload() const;
void handleUploadPost() const;
void handleCreateFolder() const;
void handleDelete() const;
void handleMove() const;
};

View File

@ -344,6 +344,38 @@
.folder-btn:hover {
background-color: #d68910;
}
.rename-input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1em;
margin-bottom: 10px;
box-sizing: border-box;
font-family: monospace;
}
.rename-btn-submit {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
width: 100%;
}
.rename-btn-submit:hover {
background-color: #2980b9;
}
.folder-select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1em;
margin-bottom: 10px;
box-sizing: border-box;
}
/* Delete button styles */
.delete-btn {
background: none;
@ -359,9 +391,24 @@
background-color: #fee;
color: #e74c3c;
}
.rename-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.1em;
padding: 4px 8px;
border-radius: 4px;
color: #95a5a6;
transition: all 0.15s;
}
.rename-btn:hover {
background-color: #e3f2fd;
color: #3498db;
}
.actions-col {
width: 60px;
width: 80px;
text-align: center;
white-space: nowrap;
}
/* Failed uploads banner */
.failed-uploads-banner {
@ -538,6 +585,22 @@
background-color: #95a5a6;
cursor: not-allowed;
}
.move-selected-btn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
}
.move-selected-btn:hover {
background-color: #2980b9;
}
.move-selected-btn:disabled {
background-color: #95a5a6;
cursor: not-allowed;
}
.loader-container {
display: flex;
justify-content: center;
@ -669,6 +732,7 @@
<div class="action-buttons">
<button class="action-btn upload-action-btn" onclick="openUploadModal()">📤 Upload</button>
<button class="action-btn folder-action-btn" onclick="openFolderModal()">📁 New Folder</button>
<button class="move-selected-btn" id="moveSelectedBtn" onclick="openMoveModal()" disabled>📦 Move Selected</button>
<button class="delete-selected-btn" id="deleteSelectedBtn" onclick="deleteSelectedFiles()" disabled>🗑️ Delete Selected</button>
</div>
</div>
@ -748,6 +812,41 @@
</div>
</div>
<!-- Rename Modal -->
<div class="modal-overlay" id="renameModal">
<div class="modal">
<button class="modal-close" onclick="closeRenameModal()">&times;</button>
<h3>✏️ Rename Item</h3>
<div class="folder-form">
<p class="file-info">Enter new name:</p>
<div style="display: flex; align-items: center; gap: 5px;">
<input type="text" id="renameInput" class="rename-input" placeholder="filename" style="flex: 1; margin-bottom: 0;">
<span id="renameExtension" style="font-family: monospace; color: #7f8c8d; font-size: 1em; padding: 10px; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 4px;"></span>
</div>
<input type="hidden" id="renameOriginalPath">
<input type="hidden" id="renameOriginalExtension">
<button class="rename-btn-submit" onclick="confirmRename()" style="margin-top: 10px;">Rename</button>
<button class="delete-btn-cancel" onclick="closeRenameModal()">Cancel</button>
</div>
</div>
</div>
<!-- Move Selected Modal -->
<div class="modal-overlay" id="moveModal">
<div class="modal">
<button class="modal-close" onclick="closeMoveModal()">&times;</button>
<h3>📦 Move Selected Items</h3>
<div class="folder-form">
<p class="file-info">Select destination folder for <strong id="moveItemCount">0</strong> items:</p>
<select id="folderSelect" class="folder-select">
<option value="/">/ (Root)</option>
</select>
<button class="rename-btn-submit" onclick="confirmMove()">Move Here</button>
<button class="delete-btn-cancel" onclick="closeMoveModal()">Cancel</button>
</div>
</div>
</div>
<script>
// get current path from query parameter
const currentPath = decodeURIComponent(new URLSearchParams(window.location.search).get('path') || '/');
@ -843,7 +942,7 @@
fileTableContent += `<td><span class="file-icon">📁</span><a href="/files?path=${encodeURIComponent(folderPath)}" class="folder-link">${escapeHtml(file.name)}</a><span class="folder-badge">FOLDER</span></td>`;
fileTableContent += '<td>Folder</td>';
fileTableContent += '<td>-</td>';
fileTableContent += `<td class="actions-col"><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Delete folder">🗑️</button></td>`;
fileTableContent += `<td class="actions-col"><button class="rename-btn" onclick="openRenameModal('${folderPath.replaceAll("'", "\\'")}')" title="Rename">✏️</button><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Delete folder">🗑️</button></td>`;
fileTableContent += '</tr>';
} else {
let filePath = currentPath;
@ -857,7 +956,7 @@
fileTableContent += '</td>';
fileTableContent += `<td>${file.name.split('.').pop().toUpperCase()}</td>`;
fileTableContent += `<td>${formatFileSize(file.size)}</td>`;
fileTableContent += `<td class="actions-col"><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Delete file">🗑️</button></td>`;
fileTableContent += `<td class="actions-col"><button class="rename-btn" onclick="openRenameModal('${filePath.replaceAll("'", "\\'")}')" title="Rename">✏️</button><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Delete file">🗑️</button></td>`;
fileTableContent += '</tr>';
}
});
@ -913,8 +1012,14 @@ function toggleSelectAll(checkbox) {
function updateDeleteButton() {
const checkedBoxes = document.querySelectorAll('.file-checkbox:checked');
const deleteBtn = document.getElementById('deleteSelectedBtn');
const moveBtn = document.getElementById('moveSelectedBtn');
const hasSelection = checkedBoxes.length > 0;
if (deleteBtn) {
deleteBtn.disabled = checkedBoxes.length === 0;
deleteBtn.disabled = !hasSelection;
}
if (moveBtn) {
moveBtn.disabled = !hasSelection;
}
// Update select-all checkbox state
@ -1122,6 +1227,258 @@ function deleteSelectedFiles() {
openDeleteModalMultiple(items);
}
// Rename/Move functions
function openRenameModal(currentPath) {
document.getElementById('renameOriginalPath').value = currentPath;
// Extract just the filename from the path
const lastSlash = currentPath.lastIndexOf('/');
const filename = currentPath.substring(lastSlash + 1);
// Split filename and extension
const lastDot = filename.lastIndexOf('.');
const hasExtension = lastDot > 0;
const nameWithoutExt = hasExtension ? filename.substring(0, lastDot) : filename;
const extension = hasExtension ? filename.substring(lastDot) : '';
document.getElementById('renameInput').value = nameWithoutExt;
document.getElementById('renameOriginalExtension').value = extension;
document.getElementById('renameExtension').textContent = extension || '(no extension)';
document.getElementById('renameModal').classList.add('open');
// Focus and select all text in the input
setTimeout(() => {
const input = document.getElementById('renameInput');
input.focus();
input.select();
}, 100);
}
function closeRenameModal() {
document.getElementById('renameModal').classList.remove('open');
}
function confirmRename() {
const originalPath = document.getElementById('renameOriginalPath').value;
const newNamePart = document.getElementById('renameInput').value.trim();
const extension = document.getElementById('renameOriginalExtension').value;
if (!newNamePart) {
alert('Name cannot be empty!');
return;
}
// Validate filename (no slashes or dots allowed in name part)
if (newNamePart.includes('/') || newNamePart.includes('\\')) {
alert('Name cannot contain slashes. Use "Move Selected" to move files to a different folder.');
return;
}
if (newNamePart.includes('.')) {
alert('Name cannot contain dots. The file extension is preserved automatically.');
return;
}
// Reconstruct full filename with original extension
const newName = newNamePart + extension;
// Extract directory from original path and construct new path
const lastSlash = originalPath.lastIndexOf('/');
const directory = originalPath.substring(0, lastSlash + 1);
const newPath = directory + newName;
if (originalPath === newPath) {
closeRenameModal();
return;
}
const formData = new FormData();
formData.append('sourcePath', originalPath);
formData.append('destPath', newPath);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/move', true);
xhr.onload = function() {
if (xhr.status === 200) {
closeRenameModal();
hydrate();
} else {
alert('Failed to rename: ' + xhr.responseText);
}
};
xhr.onerror = function() {
alert('Failed to rename - network error');
};
xhr.send(formData);
}
// Move selected functions
function openMoveModal() {
const checkedBoxes = document.querySelectorAll('.file-checkbox:checked');
if (checkedBoxes.length === 0) {
alert('Please select at least one item to move!');
return;
}
document.getElementById('moveItemCount').textContent = checkedBoxes.length;
// Build folder list
buildFolderList();
document.getElementById('moveModal').classList.add('open');
}
function closeMoveModal() {
document.getElementById('moveModal').classList.remove('open');
}
async function buildFolderList() {
const select = document.getElementById('folderSelect');
select.innerHTML = '<option value="/">/ (Root)</option>';
try {
const response = await fetch('/api/folders');
if (!response.ok) {
throw new Error('Failed to load folders');
}
const folders = await response.json();
// Skip first item (root) since we already added it
folders.slice(1).forEach(folder => {
const option = document.createElement('option');
option.value = folder;
option.textContent = folder;
select.appendChild(option);
});
// Set current path as selected
if (select.querySelector(`option[value="${currentPath}"]`)) {
select.value = currentPath;
}
} catch (e) {
console.error('Failed to load folders:', e);
}
}
function confirmMove() {
const checkedBoxes = document.querySelectorAll('.file-checkbox:checked');
const destFolder = document.getElementById('folderSelect').value;
if (checkedBoxes.length === 0) {
alert('No items selected!');
return;
}
const items = Array.from(checkedBoxes).map(checkbox => ({
path: checkbox.dataset.path,
name: checkbox.dataset.name
}));
closeMoveModal();
performMultipleMoves(items, destFolder);
}
function performMultipleMoves(items, destFolder) {
// Create progress overlay
const progressOverlay = document.createElement('div');
progressOverlay.className = 'modal-overlay open';
progressOverlay.innerHTML = `
<div class="modal">
<h3>📦 Moving items...</h3>
<div id="delete-progress-container">
<div id="delete-progress-bar"><div id="delete-progress-fill"></div></div>
<div id="delete-progress-text"></div>
</div>
</div>
`;
document.body.appendChild(progressOverlay);
const progressFill = document.getElementById('delete-progress-fill');
const progressText = document.getElementById('delete-progress-text');
progressFill.style.backgroundColor = '#3498db';
let currentIndex = 0;
const failedMoves = [];
function moveSingleItem(item, index) {
return new Promise((resolve, reject) => {
let destPath = destFolder;
if (!destPath.endsWith('/')) destPath += '/';
destPath += item.name;
const formData = new FormData();
formData.append('sourcePath', item.path);
formData.append('destPath', destPath);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/move', true);
progressText.textContent = `Moving ${item.name} (${index + 1}/${items.length})`;
xhr.onload = function () {
if (xhr.status === 200) {
const percent = Math.round(((index + 1) / items.length) * 100);
progressFill.style.width = percent + '%';
resolve();
} else {
reject(new Error(xhr.responseText || 'Move failed'));
}
};
xhr.onerror = function () {
reject(new Error('Network error'));
};
xhr.send(formData);
});
}
function moveNextItem() {
if (currentIndex >= items.length) {
// All items processed
if (failedMoves.length === 0) {
progressFill.style.backgroundColor = '#4caf50';
progressText.textContent = 'All items moved successfully!';
setTimeout(() => {
document.body.removeChild(progressOverlay);
hydrate();
}, 1000);
} else {
progressFill.style.backgroundColor = '#e74c3c';
const failedList = failedMoves.map(f => f.name).join(', ');
progressText.textContent = `${items.length - failedMoves.length}/${items.length} moved. Failed: ${failedList}`;
setTimeout(() => {
document.body.removeChild(progressOverlay);
alert(`Failed to move: ${failedList}\n\nPlease try again or check server logs.`);
hydrate();
}, 3000);
}
return;
}
const item = items[currentIndex];
moveSingleItem(item, currentIndex)
.then(() => {
currentIndex++;
moveNextItem();
})
.catch((error) => {
failedMoves.push({ name: item.name, error: error.message });
currentIndex++;
moveNextItem();
});
}
moveNextItem();
}
function createFolder() {
const folderName = document.getElementById('folderName').value.trim();