For users uploading:
- POST /api/upload now returns text/event-stream instead of JSON - Per-file progress events stream back as each file is processed: ↓ 3/47 (6%) — morning_ride.fit - Final done event shows the summary: "12 added, 35 duplicates" - The Vite proxy is configured to stream this properly (no buffering) For the admin: - New GET /api/admin/jobs endpoint (admin-only) returns the list of active upload jobs, each with user, started_at, total, done, current (filename being processed) - A pulsing amber badge appears in the nav bar for admins when any user has an active upload running — it shows e.g. "2 uploads running" with a tooltip listing each user's progress (@alice: 12/50 files) - Polls every 5 seconds, disappears automatically when all jobs finish
This commit is contained in:
Davide Scaini
@@ -25,10 +25,11 @@ export default defineConfig({
|
||||
// In production nginx handles this — same pattern, no code change needed.
|
||||
server: {
|
||||
proxy: {
|
||||
// SSE response to a POST — Vite's default proxy buffers the full body before
|
||||
// forwarding, which breaks streaming and can cause EPIPE on long uploads.
|
||||
// Both /api/upload and /api/upload/strava-zip return SSE streams in response
|
||||
// to POST requests. Vite's default proxy buffers the full body before forwarding,
|
||||
// which breaks streaming and causes EPIPE on long uploads.
|
||||
// selfHandleResponse + manual pipe sends chunks as they arrive.
|
||||
'/api/upload/strava-zip': {
|
||||
'/api/upload': {
|
||||
target: serveTarget,
|
||||
changeOrigin: true,
|
||||
selfHandleResponse: true,
|
||||
|
||||
+94
-22
@@ -190,6 +190,14 @@ try {
|
||||
<div class="ml-auto shrink-0 flex items-center gap-1">
|
||||
{!isPublicPage && (
|
||||
<>
|
||||
<!-- Admin: active upload jobs badge (hidden until jobs exist) -->
|
||||
<span
|
||||
id="admin-jobs-badge"
|
||||
style="display:none"
|
||||
title=""
|
||||
class="text-xs px-2 py-0.5 rounded-full bg-amber-900/60 text-amber-300 border border-amber-700/50 animate-pulse cursor-default"
|
||||
></span>
|
||||
|
||||
<!-- Logout button — hidden until logged in -->
|
||||
<button
|
||||
id="nav-logout"
|
||||
@@ -423,6 +431,31 @@ try {
|
||||
// Pre-populate the "keep original" checkbox from the instance default
|
||||
const chk = document.getElementById('upload-keep-original');
|
||||
if (chk && user.store_originals_default) chk.checked = true;
|
||||
|
||||
// Admin: poll for active jobs and show a badge in the nav
|
||||
if (user.is_admin) {
|
||||
const badge = document.getElementById('admin-jobs-badge');
|
||||
async function pollJobs() {
|
||||
try {
|
||||
const jr = await fetch('/api/admin/jobs', { credentials: 'include' });
|
||||
if (!jr.ok) return;
|
||||
const jobs = await jr.json();
|
||||
if (!badge) return;
|
||||
if (jobs.length === 0) {
|
||||
badge.style.display = 'none';
|
||||
} else {
|
||||
const summary = jobs.map(j =>
|
||||
`@${j.user}: ${j.done}/${j.total} files`
|
||||
).join(' · ');
|
||||
badge.title = summary;
|
||||
badge.textContent = `${jobs.length} upload${jobs.length > 1 ? 's' : ''} running`;
|
||||
badge.style.display = '';
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
pollJobs();
|
||||
setInterval(pollJobs, 5000);
|
||||
}
|
||||
} catch (_) {}
|
||||
})();
|
||||
|
||||
@@ -510,38 +543,77 @@ try {
|
||||
});
|
||||
input.addEventListener('change', () => { if (input.files?.length) doUpload(input.files); });
|
||||
|
||||
async function doUpload(files) {
|
||||
function doUpload(files) {
|
||||
const n = files.length;
|
||||
label.textContent = n === 1 ? files[0].name : `${n} files selected`;
|
||||
fileStatus.textContent = `Uploading ${n} file${n > 1 ? 's' : ''}…`;
|
||||
fileStatus.textContent = `Uploading…`;
|
||||
fileStatus.style.color = 'var(--text-4)';
|
||||
drop.style.pointerEvents = 'none';
|
||||
|
||||
const fd = new FormData();
|
||||
for (const f of files) fd.append('files', f);
|
||||
fd.append('store_original', keepOriginalChk?.checked ? 'true' : 'false');
|
||||
try {
|
||||
const r = await fetch(`${editUrl}/api/upload`, { method: 'POST', credentials: 'include', body: fd });
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
const d = await r.json();
|
||||
const dupes = d.results.filter(r => r.error === 'duplicate').length;
|
||||
const errors = d.results.filter(r => !r.ok && r.error !== 'duplicate').length;
|
||||
const parts = [];
|
||||
if (d.added > 0) parts.push(`${d.added} added`);
|
||||
if (d.csv_updates > 0) parts.push(`${d.csv_updates} updated from CSV`);
|
||||
if (dupes) parts.push(`${dupes} duplicate${dupes > 1 ? 's' : ''}`);
|
||||
if (errors) parts.push(`${errors} failed`);
|
||||
if (parts.length === 0) parts.push('nothing to add');
|
||||
fileStatus.textContent = parts.join(', ');
|
||||
const anyGood = d.added > 0 || d.csv_updates > 0;
|
||||
fileStatus.style.color = anyGood ? '#4ade80' : '#a1a1aa';
|
||||
if (anyGood) setTimeout(() => { window.location.reload(); }, 1200);
|
||||
else drop.style.pointerEvents = '';
|
||||
} catch (e) {
|
||||
fileStatus.textContent = 'Error: ' + e.message;
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', `${editUrl}/api/upload`);
|
||||
xhr.withCredentials = true;
|
||||
xhr.setRequestHeader('Accept', 'text/event-stream');
|
||||
|
||||
let buf = '';
|
||||
let added = 0, dupes = 0, errors = 0, csvUpdates = 0;
|
||||
|
||||
xhr.onprogress = () => {
|
||||
const newText = xhr.responseText.slice(buf.length);
|
||||
buf = xhr.responseText;
|
||||
for (const line of newText.split('\n')) {
|
||||
if (!line.startsWith('data: ')) continue;
|
||||
try {
|
||||
const ev = JSON.parse(line.slice(6));
|
||||
if (ev.type === 'progress') {
|
||||
const pct = Math.round((ev.n / ev.total) * 100);
|
||||
const icon = ev.status === 'imported' ? '↓' : ev.status === 'duplicate' ? '·' : '✗';
|
||||
fileStatus.textContent = `${icon} ${ev.n}/${ev.total} (${pct}%) — ${ev.name}`;
|
||||
if (ev.status === 'imported') added++;
|
||||
else if (ev.status === 'duplicate') dupes++;
|
||||
else errors++;
|
||||
} else if (ev.type === 'csv') {
|
||||
csvUpdates = ev.updates;
|
||||
} else if (ev.type === 'done') {
|
||||
added = ev.added; dupes = ev.duplicates; errors = ev.errors; csvUpdates = ev.csv_updates;
|
||||
const parts = [];
|
||||
if (added > 0) parts.push(`${added} added`);
|
||||
if (csvUpdates > 0) parts.push(`${csvUpdates} updated from CSV`);
|
||||
if (dupes) parts.push(`${dupes} duplicate${dupes > 1 ? 's' : ''}`);
|
||||
if (errors) parts.push(`${errors} failed`);
|
||||
if (parts.length === 0) parts.push('nothing to add');
|
||||
fileStatus.textContent = parts.join(', ');
|
||||
const anyGood = added > 0 || csvUpdates > 0;
|
||||
fileStatus.style.color = anyGood ? '#4ade80' : '#a1a1aa';
|
||||
if (anyGood) setTimeout(() => window.location.reload(), 1200);
|
||||
else drop.style.pointerEvents = '';
|
||||
input.value = '';
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = () => {
|
||||
if (xhr.status !== 200) {
|
||||
fileStatus.textContent = `Upload failed (${xhr.status}).`;
|
||||
fileStatus.style.color = '#f87171';
|
||||
drop.style.pointerEvents = '';
|
||||
input.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = () => {
|
||||
fileStatus.textContent = 'Upload failed — check your connection.';
|
||||
fileStatus.style.color = '#f87171';
|
||||
drop.style.pointerEvents = '';
|
||||
input.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(fd);
|
||||
}
|
||||
|
||||
// ── Strava ────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user