kato/warpbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(server): track upload status via manifest and /status API

Browse Source 
- Persist per-box file metadata in a .warpbox.json manifest, including IDs and status fields (pending/uploading/complete/failed)
- Add GET /box/:id/status to return current file states for clients polling upload progress
- Update upload handling to mark failures and completion in the manifest and decorate responses
- Add CSS states for loading/failed files and disable interactions for unavailable itemsfeat(server): track upload status via manifest and /status API

- Persist per-box file metadata in a .warpbox.json manifest, including IDs and status fields (pending/uploading/complete/failed)
- Add GET /box/:id/status to return current file states for clients polling upload progress
- Update upload handling to mark failures and completion in the manifest and decorate responses
- Add CSS states for loading/failed files and disable interactions for unavailable items
This commit is contained in:
Daniel Legt
2026-04-27 17:33:52 +03:00
parent b69ec8b99f
commit 698166d23d
6 changed files with 547 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
static/css/box.css
View File

@@ -74,6 +74,28 @@
text-decoration: none;
}
.box-file.is-loading,
.box-file.is-failed {
color: #666666;
filter: grayscale(1);
}
.box-file.is-loading {
animation: box-loading-pulse 900ms steps(2, end) infinite;
}
.box-file.is-failed {
opacity: 0.58;
}
.box-file.is-failed .box-file-name::after {
content: " (failed)";
}
.box-file[aria-disabled="true"] {
cursor: default;
}
.box-file:hover,
.box-file:focus-visible {
color: #ffffff;
@@ -99,6 +121,16 @@
white-space: nowrap;
}
@keyframes box-loading-pulse {
0% {
opacity: 0.48;
}
100% {
opacity: 0.82;
}
}
.box-file-name {
font-size: 13px;
line-height: 13px;

15
static/css/upload.css
View File

@@ -204,6 +204,11 @@
background: #f7f7f7;
}
.upload-file-row.is-uploading,
.upload-file-row.is-processing {
animation: upload-row-loading 900ms steps(2, end) infinite;
}
.upload-file-icon {
grid-row: 1 / 3;
width: 16px;
@@ -269,6 +274,16 @@
background: #800000;
}
@keyframes upload-row-loading {
0% {
background-color: #ffffff;
}
100% {
background-color: #e6e6e6;
}
}
.upload-actions {
display: flex;
justify-content: flex-end;

76
static/js/app.js
View File

@@ -98,7 +98,9 @@ function setOverallProgress(percent) {
function updateOverallProgress() {
const totalBytes = selectedFiles.reduce((total, selectedFile) => total + selectedFile.file.size, 0);
const loadedBytes = selectedFiles.reduce((total, selectedFile) => total + selectedFile.loaded, 0);
setOverallProgress(totalBytes > 0 ? (loadedBytes / totalBytes) * 100 : 0);
const uploadedCount = selectedFiles.filter((selectedFile) => selectedFile.uploaded).length;
const percent = totalBytes > 0 ? (loadedBytes / totalBytes) * 100 : 0;
setOverallProgress(percent >= 100 && uploadedCount < selectedFiles.length ? 99 : percent);
}
function updateFileCount() {
@@ -186,7 +188,18 @@ function updateSelectedFiles(files) {
}
async function createBox() {
const response = await fetch("/box", { method: "POST" });
const response = await fetch("/box", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
files: selectedFiles.map((selectedFile) => ({
name: selectedFile.file.name,
size: selectedFile.file.size,
})),
}),
});
if (!response.ok) {
throw new Error("Could not create upload box");
}
@@ -194,16 +207,32 @@ async function createBox() {
return response.json();
}
async function markFileStatus(selectedFile, status) {
if (!selectedFile.boxFile) {
return;
}
await fetch(`/box/${selectedFile.boxID}/files/${selectedFile.boxFile.id}/status`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ status }),
});
}
function uploadFile(boxID, selectedFile, onComplete) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append("file", selectedFile.file);
xhr.open("POST", `/box/${boxID}/upload`);
xhr.open("POST", selectedFile.boxFile.upload_path);
xhr.upload.addEventListener("loadstart", () => {
selectedFile.loaded = 0;
selectedFile.row.classList.add("is-uploading");
selectedFile.row.title = "Loading";
updateOverallProgress();
setRowProgress(selectedFile.row, 2);
});
@@ -215,20 +244,33 @@ function uploadFile(boxID, selectedFile, onComplete) {
selectedFile.loaded = Math.min(event.loaded, selectedFile.file.size);
updateOverallProgress();
setRowProgress(selectedFile.row, (event.loaded / event.total) * 100);
const percent = (event.loaded / event.total) * 100;
if (percent >= 100) {
selectedFile.row.classList.add("is-processing");
selectedFile.row.title = "Loading";
setRowProgress(selectedFile.row, 99);
return;
}
setRowProgress(selectedFile.row, percent);
});
xhr.addEventListener("load", () => {
if (xhr.status < 200 || xhr.status >= 300) {
selectedFile.failed = true;
selectedFile.row.classList.remove("is-uploading", "is-processing");
selectedFile.row.classList.add("is-failed");
selectedFile.row.title = "Failed to upload";
markFileStatus(selectedFile, "failed");
reject(new Error("Upload failed"));
return;
}
selectedFile.uploaded = true;
selectedFile.loaded = selectedFile.file.size;
selectedFile.row.classList.remove("is-uploading", "is-processing");
selectedFile.row.classList.add("is-uploaded");
selectedFile.row.title = "Uploaded";
updateOverallProgress();
setRowProgress(selectedFile.row, 100);
onComplete();
@@ -237,10 +279,23 @@ function uploadFile(boxID, selectedFile, onComplete) {
xhr.addEventListener("error", () => {
selectedFile.failed = true;
selectedFile.row.classList.remove("is-uploading", "is-processing");
selectedFile.row.classList.add("is-failed");
selectedFile.row.title = "Failed to upload";
markFileStatus(selectedFile, "failed");
reject(new Error("Upload failed"));
});
xhr.addEventListener("abort", () => {
selectedFile.failed = true;
selectedFile.row.classList.remove("is-uploading", "is-processing");
selectedFile.row.classList.add("is-failed");
selectedFile.row.title = "Failed to upload";
markFileStatus(selectedFile, "failed");
reject(new Error("Upload cancelled"));
});
markFileStatus(selectedFile, "uploading");
xhr.send(formData);
});
}
@@ -293,7 +348,8 @@ if (uploadForm) {
selectedFile.uploaded = false;
selectedFile.failed = false;
selectedFile.loaded = 0;
selectedFile.row.classList.remove("is-uploaded", "is-failed");
selectedFile.row.classList.remove("is-uploaded", "is-failed", "is-uploading", "is-processing");
selectedFile.row.title = "";
setRowProgress(selectedFile.row, 0);
});
@@ -305,6 +361,12 @@ if (uploadForm) {
try {
const box = await createBox();
setBoxStatus(box.box_url);
setBoxLink(box.box_url);
selectedFiles.forEach((selectedFile, index) => {
selectedFile.boxID = box.box_id;
selectedFile.boxFile = box.files[index];
});
await Promise.allSettled(selectedFiles.map((selectedFile) => {
return uploadFile(box.box_id, selectedFile, () => {
@@ -315,14 +377,10 @@ if (uploadForm) {
stopStatusAnimation();
const failedCount = selectedFiles.filter((selectedFile) => selectedFile.failed).length;
if (failedCount > 0) {
if (completedCount > 0) {
setBoxLink(box.box_url);
}
updateStatus(`${completedCount}/${totalCount} Uploaded, ${failedCount} failed`);
return;
}
setBoxLink(box.box_url);
setOverallProgress(100);
updateStatus(`${completedCount}/${totalCount} Uploaded`);
} catch (error) {

72
static/js/box.js Normal file
View File

@@ -0,0 +1,72 @@
const boxPanel = document.querySelector(".box-panel[data-box-id]");
const boxStatus = document.querySelector(".box-statusbar span:first-child");
document.querySelectorAll('.box-file[aria-disabled="true"]').forEach((item) => {
item.addEventListener("click", (event) => {
if (item.getAttribute("aria-disabled") === "true") {
event.preventDefault();
}
});
});
function updateBoxFile(file) {
const item = document.querySelector(`.box-file[data-file-id="${file.id}"]`);
if (!item) {
return;
}
const meta = item.querySelector(".box-file-meta");
const isComplete = file.status === "complete";
const isFailed = file.status === "failed";
item.classList.toggle("is-complete", isComplete);
item.classList.toggle("is-failed", isFailed);
item.classList.toggle("is-loading", !isComplete && !isFailed);
item.dataset.status = file.status;
item.title = file.title;
if (isComplete) {
item.href = file.download_path;
item.setAttribute("download", "");
item.removeAttribute("aria-disabled");
} else {
item.href = "#";
item.removeAttribute("download");
item.setAttribute("aria-disabled", "true");
}
if (meta) {
meta.textContent = `${file.status_label} · ${file.size_label}`;
}
}
async function refreshBoxStatus() {
if (!boxPanel) {
return false;
}
const boxID = boxPanel.dataset.boxId;
const response = await fetch(`/box/${boxID}/status`);
if (!response.ok) {
return false;
}
const result = await response.json();
result.files.forEach(updateBoxFile);
if (boxStatus) {
const completeCount = result.files.filter((file) => file.status === "complete").length;
boxStatus.textContent = `${completeCount}/${result.files.length} ready`;
}
return result.files.some((file) => file.status === "pending" || file.status === "uploading");
}
if (boxPanel) {
const timer = setInterval(async () => {
const hasLoadingFiles = await refreshBoxStatus();
if (!hasLoadingFiles) {
clearInterval(timer);
}
}, 1500);
}