ddidderr
35cd0657bd
Replace the placeholder browser script with the PLAN.md upload flow. The static UI now creates upload records, slices the selected file into fixed-size chunks, uploads missing chunks with a concurrency pool of three workers, retries failed chunks with exponential backoff, pauses via AbortController, and completes the upload once the server has accepted every chunk. Persist pending upload records in IndexedDB and render them in the page so a reload can resume from server-authoritative progress. When the File System Access API is available, the app stores a file handle and asks for read permission during resume; when it is unavailable or permission is denied, the same pending record resumes after the user reselects the matching file. Browser state is helpful but not trusted: every resume starts by querying the server for completed chunks. Add a JavaScript syntax check to the justfile, update the static-page test and documentation, and extend TESTS.md with the manual resume scenarios that still need real-browser repetition. Test Plan: - just check - UPL_BIND=127.0.0.1:39123 UPL_DATA_DIR=$(mktemp -d) cargo run - curl -fsS http://127.0.0.1:39123/healthz - curl -fsS http://127.0.0.1:39123/ | rg "Choose file|Pending uploads|app.js" - firefox --headless --screenshot /tmp/upl-page.png http://127.0.0.1:39123/ Refs: PLAN.md milestones 5, 6, and 7
54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>upl</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<script src="/app.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<section class="upload-panel" aria-labelledby="app-title">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<h1 id="app-title">upl</h1>
|
|
<p class="subtle">Resumable uploads to this machine.</p>
|
|
</div>
|
|
<span class="status-pill" id="connection-status">Server online</span>
|
|
</div>
|
|
|
|
<div class="file-picker">
|
|
<button id="pick-button" type="button">Choose file</button>
|
|
<input id="file-input" type="file">
|
|
</div>
|
|
|
|
<div class="file-summary" id="file-summary" hidden>
|
|
<strong id="file-name"></strong>
|
|
<span id="file-size"></span>
|
|
</div>
|
|
|
|
<div class="progress-wrap" aria-label="Upload progress">
|
|
<div class="progress-bar" id="progress-bar"></div>
|
|
</div>
|
|
<div class="progress-meta" id="progress-meta">0 of 0 chunks</div>
|
|
|
|
<div class="actions">
|
|
<button id="start-button" type="button" disabled>Start</button>
|
|
<button id="pause-button" type="button" disabled>Pause</button>
|
|
<button id="resume-button" type="button" disabled>Resume</button>
|
|
</div>
|
|
|
|
<section class="pending-section" id="pending-section" hidden>
|
|
<h2>Pending uploads</h2>
|
|
<ul class="pending-list" id="pending-list"></ul>
|
|
</section>
|
|
|
|
<ol class="event-log" id="event-log" aria-live="polite">
|
|
<li>Choose a file to begin.</li>
|
|
</ol>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|