fixes for editFile

This commit is contained in:
Ryan
2025-02-22 22:53:40 -05:00
committed by GitHub
parent 04fd2c5021
commit 7695ddff59

View File

@@ -166,47 +166,41 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
window.editFile = function(fileName) { window.editFile = function(fileName) {
console.log("Edit button clicked for:", fileName); const threshold = 10 * 1024 * 1024; // 10 MB threshold
let existingEditor = document.getElementById("editorContainer");
if (existingEditor) { // Check file size via HEAD request.
existingEditor.remove(); fetch(`uploads/${encodeURIComponent(fileName)}`, { method: 'HEAD' })
} .then(response => {
fetch(`uploads/${fileName}?t=${new Date().getTime()}`) const fileSize = parseInt(response.headers.get('Content-Length') || "0", 10);
.then(response => { if (fileSize > threshold) {
if (!response.ok) { alert("This file is too large to edit in the browser.");
throw new Error(`HTTP error! Status: ${response.status}`); return;
} }
return response.text(); return fetch(`uploads/${encodeURIComponent(fileName)}?t=${new Date().getTime()}`);
}) })
.then(content => { .then(response => {
const editorContainer = document.createElement("div"); if (!response) return;
editorContainer.id = "editorContainer"; if (!response.ok) throw new Error("HTTP error! Status: " + response.status);
editorContainer.style.position = "fixed"; return response.text();
editorContainer.style.top = "50%"; })
editorContainer.style.left = "50%"; .then(content => {
editorContainer.style.transform = "translate(-50%, -50%)"; if (!content) return;
editorContainer.style.background = "white"; const modal = document.createElement("div");
editorContainer.style.padding = "15px"; modal.id = "editorContainer";
editorContainer.style.border = "1px solid black"; // Use your existing classes for styling.
editorContainer.style.boxShadow = "0px 4px 6px rgba(0,0,0,0.1)"; modal.classList.add("modal", "editor-modal");
editorContainer.style.zIndex = "1000"; modal.innerHTML = `
editorContainer.style.width = "80vw"; <h3>Editing: ${fileName}</h3>
editorContainer.style.maxWidth = "90vw"; <textarea id="fileEditor" style="width:100%; height:60%; resize:none;">${content}</textarea>
editorContainer.style.minWidth = "400px"; <div style="margin-top:10px; text-align:right;">
editorContainer.style.height = "400px"; <button onclick="saveFile('${fileName}')" class="btn btn-primary">Save</button>
editorContainer.style.maxHeight = "80vh"; <button onclick="document.getElementById('editorContainer').remove()" class="btn btn-secondary">Close</button>
editorContainer.style.overflow = "auto"; </div>
editorContainer.style.resize = "both"; `;
editorContainer.innerHTML = ` document.body.appendChild(modal);
<h3>Editing: ${fileName}</h3> modal.style.display = "block";
<textarea id="fileEditor" style="width: 100%; height: 80%; resize: none;">${content}</textarea> })
<br> .catch(error => console.error("Error in editFile:", error));
<button onclick="saveFile('${fileName}')">Save</button>
<button onclick="document.getElementById('editorContainer').remove()">Close</button>
`;
document.body.appendChild(editorContainer);
})
.catch(error => console.error("Error loading file:", error));
}; };
window.saveFile = function(fileName) { window.saveFile = function(fileName) {