kodi/webmanager-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: upload progressbar

Browse Source
This commit is contained in:
kodi
2026-03-14 07:28:31 +01:00
parent f0b04fd4ee
commit f092007998
6 changed files with 170 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/app.js
+114 -30
View File
@@ -68,6 +68,7 @@ let uploadState = {
skippedCount: 0,
cancelled: false,
conflictResolver: null,
cancelRequested: false,
};
let folderUploadPlanState = {
targetPane: "left",
@@ -331,13 +332,69 @@ function uploadElements() {
menuPopup: document.getElementById("upload-menu-popup"),
folderButton: document.getElementById("upload-folder-btn"),
input: document.getElementById("upload-input"),
progress: document.getElementById("upload-progress"),
target: document.getElementById("upload-target"),
currentFile: document.getElementById("upload-current-file"),
count: document.getElementById("upload-count"),
};
}
function uploadModalElements() {
return {
overlay: document.getElementById("upload-modal"),
target: document.getElementById("upload-modal-target"),
currentFile: document.getElementById("upload-modal-current-file"),
count: document.getElementById("upload-modal-count"),
progressBar: document.getElementById("upload-modal-progress-bar"),
status: document.getElementById("upload-modal-status"),
cancelButton: document.getElementById("upload-modal-cancel-btn"),
};
}
function setUploadModalVisible(visible) {
const elements = uploadModalElements();
if (!elements.overlay) {
return;
}
elements.overlay.classList.toggle("hidden", !visible);
}
function updateUploadModalDisplay(info) {
const elements = uploadModalElements();
if (!elements.overlay) {
return;
}
const total = info.total || 0;
elements.target.textContent = `Uploading to: ${info.targetPath}`;
elements.currentFile.textContent = info.currentFileName
? `Current file: ${info.currentFileName}`
: info.rootFolderName
? `Folder: ${info.rootFolderName}`
: "Preparing files";
elements.count.textContent = total ? `${Math.min(info.index, total)}/${total} files` : "";
const percent = total ? Math.min(100, Math.round((info.index / total) * 100)) : 0;
elements.progressBar.style.width = `${percent}%`;
if (info.statusText) {
elements.status.textContent = info.statusText;
} else if (!elements.status.textContent) {
elements.status.textContent = "";
}
elements.cancelButton.disabled = !uploadState.active;
}
function setUploadModalStatus(msg) {
const elements = uploadModalElements();
if (!elements.overlay) {
return;
}
elements.status.textContent = msg || "";
}
function requestUploadCancel() {
uploadState.cancelRequested = true;
const elements = uploadModalElements();
if (elements.cancelButton) {
elements.cancelButton.disabled = true;
}
setUploadModalStatus("Cancel requested; finishing current file...");
}
function ensureFolderUploadPicker() {
if (folderUploadPickerInput) {
return folderUploadPickerInput;
@@ -477,10 +534,6 @@ function createButton(text, onClick) {
return button;
}
function setUploadProgressVisible(visible) {
uploadElements().progress.classList.toggle("hidden", !visible);
}
function closeUploadMenu() {
const elements = uploadElements();
if (!elements.menuPopup || !elements.menuToggle) {
@@ -512,21 +565,22 @@ function resetUploadProgress() {
uploadState.skippedCount = 0;
uploadState.cancelled = false;
uploadState.conflictResolver = null;
uploadState.cancelRequested = false;
elements.button.disabled = false;
elements.target.textContent = "";
elements.currentFile.textContent = "";
elements.count.textContent = "";
setUploadProgressVisible(false);
setUploadModalVisible(false);
setUploadModalStatus("");
}
function showFolderUploadPlan(plan) {
const elements = uploadElements();
folderUploadPlanState = plan;
elements.button.disabled = false;
elements.target.textContent = `Upload to: ${plan.targetPath}`;
elements.currentFile.textContent = `Folder: ${plan.rootFolderName}`;
elements.count.textContent = `${plan.fileCount} file${plan.fileCount === 1 ? "" : "s"}${plan.subfolderCount > 0 ? ` • ${plan.subfolderCount} subfolder${plan.subfolderCount === 1 ? "" : "s"}` : ""}`;
setUploadProgressVisible(true);
updateUploadModalDisplay({
targetPath: `${plan.targetPath}/${plan.rootFolderName}`,
rootFolderName: plan.rootFolderName,
total: plan.fileCount,
index: 0,
});
setUploadModalVisible(true);
setUploadModalStatus("Preparing folder upload...");
}
function updateUploadProgress() {
@@ -685,15 +739,6 @@ async function ensureFolderDirectoryExists(path) {
await apiRequest("GET", `/api/browse?${new URLSearchParams({ path }).toString()}`);
}
function updateFolderUploadProgress(plan, currentName, index) {
const elements = uploadElements();
elements.target.textContent = `Folder upload to: ${plan.targetPath}/${plan.rootFolderName}`;
elements.currentFile.textContent = currentName ? `Current file: ${currentName}` : `Folder: ${plan.rootFolderName}`;
elements.count.textContent = `${Math.min(index + 1, plan.fileCount)}/${plan.fileCount} files`;
elements.button.disabled = true;
setUploadProgressVisible(true);
}
async function executeFolderUploadPlan(plan) {
uploadState.active = true;
uploadState.targetPath = `${plan.targetPath}/${plan.rootFolderName}`;
@@ -710,11 +755,20 @@ async function executeFolderUploadPlan(plan) {
try {
const directories = folderDirectoryPaths(plan);
for (const directoryPath of directories) {
if (uploadState.cancelRequested) {
uploadState.cancelled = true;
break;
}
await ensureFolderDirectoryExists(directoryPath);
}
setUploadModalStatus("");
outer:
for (let index = 0; index < plan.entries.length; index += 1) {
if (uploadState.cancelRequested) {
uploadState.cancelled = true;
break;
}
const entry = plan.entries[index];
const relativeParts = entry.relativePath.split("/").filter(Boolean);
const fileName = relativeParts[relativeParts.length - 1];
@@ -724,7 +778,13 @@ async function executeFolderUploadPlan(plan) {
: `${plan.targetPath}/${plan.rootFolderName}`;
uploadState.index = index;
updateFolderUploadProgress(plan, entry.relativePath, index);
updateUploadModalDisplay({
targetPath: `${plan.targetPath}/${plan.rootFolderName}`,
rootFolderName: plan.rootFolderName,
total: plan.fileCount,
index: index + 1,
currentFileName: entry.relativePath,
});
let overwrite = uploadState.overwriteAll;
while (true) {
try {
@@ -758,6 +818,7 @@ async function executeFolderUploadPlan(plan) {
uploadState.skippedCount += 1;
break;
}
uploadState.cancelRequested = true;
uploadState.cancelled = true;
break outer;
}
@@ -822,14 +883,31 @@ async function handleUploadSelection(event) {
uploadState.successfulCount = 0;
uploadState.skippedCount = 0;
uploadState.cancelled = false;
uploadState.cancelRequested = false;
setError("actions-error", "");
updateUploadProgress();
setUploadModalVisible(true);
updateUploadModalDisplay({
targetPath,
rootFolderName: "",
total: files.length,
index: 0,
});
try {
outer:
for (let index = 0; index < files.length; index += 1) {
if (uploadState.cancelRequested) {
uploadState.cancelled = true;
break;
}
uploadState.index = index;
updateUploadProgress();
updateUploadModalDisplay({
targetPath,
rootFolderName: "",
total: files.length,
index: index + 1,
currentFileName: files[index].name,
});
let overwrite = uploadState.overwriteAll;
while (true) {
try {
@@ -863,6 +941,7 @@ async function handleUploadSelection(event) {
uploadState.skippedCount += 1;
break;
}
uploadState.cancelRequested = true;
uploadState.cancelled = true;
break outer;
}
@@ -883,6 +962,7 @@ async function handleUploadSelection(event) {
await loadBrowsePane(state.activePane);
}
setActionError("Upload", err);
setUploadModalStatus(err.message);
} finally {
resetUploadProgress();
}
@@ -3309,6 +3389,10 @@ function setupEvents() {
document.getElementById("move-btn").onclick = openF6Flow;
document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
uploadElements().input.onchange = handleUploadSelection;
const modalCancel = uploadModalElements().cancelButton;
if (modalCancel) {
modalCancel.onclick = requestUploadCancel;
}
document.addEventListener("click", (event) => {
const elements = uploadElements();
if (!elements.menu || elements.menu.contains(event.target)) {
webui/html/base.css
+27
View File
@@ -656,6 +656,33 @@ button:disabled {
box-shadow: var(--shadow-elevated);
}
#upload-modal .popup-card {
max-width: 320px;
padding: 12px 14px;
text-align: left;
}
.upload-modal-progress {
width: 100%;
height: 4px;
border-radius: 999px;
background: var(--color-border);
margin: 6px 0;
overflow: hidden;
}
.upload-modal-progress-bar {
height: 100%;
width: 0;
background: var(--color-accent);
transition: width 150ms ease;
}
.upload-modal-count {
font-size: 12px;
color: var(--color-text-muted);
}
.popup-meta {
color: var(--color-text-muted);
font-size: 12px;
webui/html/index.html
+15 -5
View File
@@ -104,11 +104,6 @@
<button id="delete-btn" type="button" disabled><span class="shortcut-hint">F8</span><span>Delete</span></button>
</div>
<input id="upload-input" type="file" multiple hidden>
<div id="upload-progress" class="upload-progress hidden" aria-live="polite">
<div id="upload-target" class="upload-progress-target"></div>
<div id="upload-current-file" class="upload-progress-file"></div>
<div id="upload-count" class="upload-progress-count"></div>
</div>
<div id="actions-error" class="error"></div>
</section>
</div>
@@ -170,6 +165,21 @@
</div>
</div>
<div id="upload-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="upload-modal-title">
<div class="popup-card upload-modal-card">
<h3 id="upload-modal-title">Uploading</h3>
<div id="upload-modal-target" class="popup-meta"></div>
<div id="upload-modal-current-file" class="popup-meta"></div>
<div class="upload-modal-progress">
<div id="upload-modal-progress-bar" class="upload-modal-progress-bar"></div>
</div>
<div id="upload-modal-count" class="upload-modal-count"></div>
<div id="upload-modal-status" class="popup-meta"></div>
<div class="popup-actions">
<button id="upload-modal-cancel-btn" type="button">Cancel</button>
</div>
</div>
</div>
<div id="search-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="search-title">
<div class="popup-card search-card">
<button id="search-close-btn" class="viewer-close" type="button" aria-label="Close search">X</button>