feat(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 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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user