Compare commits
No commits in common. "f8dd45a6f0e32201ecccb3fc4c1a2ac95cad9c20" and "f4bd82f9adff3c4ef3d678e113bf291e4ccf1da5" have entirely different histories.
f8dd45a6f0
...
f4bd82f9ad
2 changed files with 68 additions and 238 deletions
|
|
@ -47,10 +47,9 @@
|
|||
color: var(--text);
|
||||
}
|
||||
main {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
h1 {
|
||||
|
|
@ -133,7 +132,6 @@
|
|||
}
|
||||
#list {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.6rem;
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
|
|
@ -156,34 +154,16 @@
|
|||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.item {
|
||||
min-width: 0;
|
||||
}
|
||||
.item .name {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.item .detail {
|
||||
flex: none;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.item .controls {
|
||||
display: inline-flex;
|
||||
gap: 0.35rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
.pause:hover,
|
||||
.retry:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.pause,
|
||||
.retry,
|
||||
.cancel {
|
||||
flex: none;
|
||||
font: inherit;
|
||||
|
|
@ -296,7 +276,6 @@
|
|||
const CHUNK_THRESHOLD = 32 * 1024 * 1024; // au-delà : upload fragmenté et reprenable
|
||||
let CHUNK_POOL = 30; // budget global de morceaux en vol ; remplacé par GET /config
|
||||
const CHUNK_RETRIES = 3;
|
||||
const INIT_RETRY_MS = 2000; // serveur saturé (429) : délai avant de réessayer l'init
|
||||
|
||||
let currentTarget = null;
|
||||
let currentTargetAllowsDirs = false;
|
||||
|
|
@ -385,27 +364,19 @@
|
|||
item.innerHTML =
|
||||
'<div class="row">' +
|
||||
'<span class="name"></span>' +
|
||||
'<span class="detail"><span class="total"></span>' +
|
||||
'<span class="controls">' +
|
||||
'<button type="button" class="pause" hidden>Pause</button>' +
|
||||
'<button type="button" class="retry" hidden>Réessayer</button>' +
|
||||
'<button type="button" class="cancel" hidden>Annuler</button>' +
|
||||
'</span></span>' +
|
||||
'<span class="detail"><span class="total"></span> ' +
|
||||
'<button type="button" class="cancel" hidden>Annuler</button></span>' +
|
||||
'</div>' +
|
||||
'<div class="bar"><span></span></div>' +
|
||||
'<div class="row"><span class="status muted">En attente…</span>' +
|
||||
'<span class="detail progress"></span></div>';
|
||||
const nameEl = item.querySelector('.name');
|
||||
nameEl.textContent = label || file.name;
|
||||
nameEl.title = label || file.name; // nom complet au survol quand il est tronqué
|
||||
item.querySelector('.name').textContent = label || file.name;
|
||||
item.querySelector('.total').textContent = formatSize(file.size);
|
||||
list.prepend(item);
|
||||
return {
|
||||
bar: item.querySelector('.bar > span'),
|
||||
status: item.querySelector('.status'),
|
||||
progress: item.querySelector('.progress'),
|
||||
pauseBtn: item.querySelector('.pause'),
|
||||
retryBtn: item.querySelector('.retry'),
|
||||
cancelBtn: item.querySelector('.cancel'),
|
||||
};
|
||||
}
|
||||
|
|
@ -415,49 +386,19 @@
|
|||
ui.status.className = 'status ' + (kind || 'muted');
|
||||
}
|
||||
|
||||
// États d'un job : queued | running | paused | done | failed | cancelled.
|
||||
// Les boutons visibles en dépendent.
|
||||
function setState(job, state) {
|
||||
job.state = state;
|
||||
if (state === 'done' || state === 'failed' || state === 'cancelled') jobs.delete(job);
|
||||
else jobs.add(job);
|
||||
updateQueueRow();
|
||||
const { pauseBtn, retryBtn, cancelBtn } = job.ui;
|
||||
pauseBtn.hidden = state !== 'running' && state !== 'paused';
|
||||
pauseBtn.textContent = state === 'paused' ? 'Reprendre' : 'Pause';
|
||||
retryBtn.hidden = state !== 'failed';
|
||||
cancelBtn.hidden = !['queued', 'running', 'paused'].includes(state);
|
||||
}
|
||||
|
||||
function fail(job, text) {
|
||||
setStatus(job.ui, text, 'err');
|
||||
setState(job, 'failed');
|
||||
}
|
||||
|
||||
const queue = [];
|
||||
const active = new Set();
|
||||
|
||||
const jobs = new Set(); // jobs non terminés (en attente, en cours ou en pause)
|
||||
|
||||
function updateQueueRow() {
|
||||
let running = 0;
|
||||
let waiting = 0;
|
||||
let paused = 0;
|
||||
for (const job of jobs) {
|
||||
if (job.state === 'running') running += 1;
|
||||
else if (job.state === 'paused') paused += 1;
|
||||
else waiting += 1;
|
||||
}
|
||||
if (jobs.size === 0) {
|
||||
const running = active.size;
|
||||
const waiting = queue.length;
|
||||
if (running + waiting === 0) {
|
||||
queueRow.hidden = true;
|
||||
return;
|
||||
}
|
||||
queueRow.hidden = false;
|
||||
queueInfo.textContent =
|
||||
running +
|
||||
' en cours' +
|
||||
(paused ? ' · ' + paused + ' en pause' : '') +
|
||||
(waiting ? ' · ' + waiting + ' en attente' : '');
|
||||
running + ' en cours' + (waiting ? ' · ' + waiting + ' en attente' : '');
|
||||
}
|
||||
|
||||
function pump() {
|
||||
|
|
@ -482,45 +423,20 @@
|
|||
updateQueueRow();
|
||||
}
|
||||
|
||||
function cancelJob(job) {
|
||||
if (job.state === 'queued') {
|
||||
const i = queue.indexOf(job);
|
||||
if (i >= 0) queue.splice(i, 1);
|
||||
setStatus(job.ui, 'Annulé', 'err');
|
||||
setState(job, 'cancelled');
|
||||
} else if ((job.state === 'running' || job.state === 'paused') && job.cancel) {
|
||||
job.cancel();
|
||||
}
|
||||
}
|
||||
|
||||
function retryJob(job) {
|
||||
job.ui.bar.style.width = '0';
|
||||
job.ui.progress.textContent = '';
|
||||
setStatus(job.ui, 'En attente…', 'muted');
|
||||
setState(job, 'queued');
|
||||
queue.push(job);
|
||||
pump();
|
||||
}
|
||||
|
||||
function enqueue(file, relativePath) {
|
||||
const ui = addItem(file, relativePath);
|
||||
// La cible est figée à l'ajout : changer le sélecteur ensuite ne détourne pas la file.
|
||||
const job = {
|
||||
file,
|
||||
relativePath,
|
||||
target: currentTarget,
|
||||
ui,
|
||||
chunked: file.size > CHUNK_THRESHOLD,
|
||||
state: 'queued',
|
||||
};
|
||||
ui.cancelBtn.onclick = () => cancelJob(job);
|
||||
ui.pauseBtn.onclick = () => {
|
||||
if (job.state === 'paused') job.resume();
|
||||
else if (job.state === 'running') job.pause();
|
||||
};
|
||||
ui.retryBtn.onclick = () => retryJob(job);
|
||||
const job = { file, relativePath, ui, chunked: file.size > CHUNK_THRESHOLD };
|
||||
queue.push(job);
|
||||
setState(job, 'queued');
|
||||
ui.cancelBtn.hidden = false;
|
||||
ui.cancelBtn.onclick = () => {
|
||||
const i = queue.indexOf(job);
|
||||
if (i < 0) return;
|
||||
queue.splice(i, 1);
|
||||
ui.cancelBtn.hidden = true;
|
||||
setStatus(ui, 'Annulé', 'err');
|
||||
updateQueueRow();
|
||||
};
|
||||
updateQueueRow();
|
||||
}
|
||||
|
||||
// Pool global de morceaux en vol, réparti équitablement entre les fichiers
|
||||
|
|
@ -544,13 +460,13 @@
|
|||
tick() {
|
||||
while (this.free > 0) {
|
||||
const contenders = this.entries.filter(
|
||||
(e) => !e.stopped && !e.paused && (e.pending.length > 0 || e.priming),
|
||||
(e) => !e.stopped && (e.pending.length > 0 || e.priming),
|
||||
);
|
||||
if (contenders.length === 0) return;
|
||||
const share = Math.max(1, Math.ceil(CHUNK_POOL / contenders.length));
|
||||
let best = null;
|
||||
for (const e of this.entries) {
|
||||
if (e.stopped || e.paused || e.pending.length === 0 || e.inflight >= share) continue;
|
||||
if (e.stopped || e.pending.length === 0 || e.inflight >= share) continue;
|
||||
if (!best || e.inflight < best.inflight) best = e;
|
||||
}
|
||||
if (!best) return;
|
||||
|
|
@ -614,16 +530,17 @@
|
|||
};
|
||||
}
|
||||
|
||||
function uploadQuery(job) {
|
||||
function uploadQuery(relativePath) {
|
||||
const p = new URLSearchParams();
|
||||
if (job.target) p.set('target', job.target);
|
||||
if (job.relativePath) p.set('path', job.relativePath);
|
||||
if (currentTarget) p.set('target', currentTarget);
|
||||
if (relativePath) p.set('path', relativePath);
|
||||
const s = p.toString();
|
||||
return s ? '?' + s : '';
|
||||
}
|
||||
|
||||
function finish(job) {
|
||||
active.delete(job);
|
||||
job.ui.cancelBtn.hidden = true;
|
||||
pump();
|
||||
}
|
||||
|
||||
|
|
@ -633,52 +550,30 @@
|
|||
ui.bar.style.width = '100%';
|
||||
ui.progress.textContent = formatSize(job.file.size);
|
||||
setStatus(ui, 'Déposé : ' + (body.storedName || 'OK'), 'ok');
|
||||
setState(job, 'done');
|
||||
} else if (status === 401) {
|
||||
fail(job, 'Session expirée');
|
||||
goToLogin();
|
||||
} else {
|
||||
fail(job, 'Erreur ' + status + ' : ' + (body.message || 'échec'));
|
||||
setStatus(ui, 'Erreur ' + status + ' : ' + (body.message || 'échec'), 'err');
|
||||
}
|
||||
}
|
||||
|
||||
function startUpload(job) {
|
||||
active.add(job);
|
||||
job.ui.cancelBtn.hidden = false;
|
||||
job.ui.cancelBtn.onclick = () => job.cancel && job.cancel();
|
||||
setStatus(job.ui, 'Envoi…', 'muted');
|
||||
setState(job, 'running');
|
||||
if (job.chunked) runChunked(job);
|
||||
if (job.file.size > CHUNK_THRESHOLD) runChunked(job);
|
||||
else runSimple(job);
|
||||
}
|
||||
|
||||
// Dépôt direct (petits fichiers) : une seule requête. Une requête HTTP ne
|
||||
// pouvant pas être suspendue, la pause l'interrompt et la reprise redémarre
|
||||
// le fichier depuis le début (il est petit, < CHUNK_THRESHOLD).
|
||||
function runSimple(job) {
|
||||
const { file, ui } = job;
|
||||
const { file, relativePath, ui } = job;
|
||||
const report = makeReporter(ui, file.size);
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
const xhr = new XMLHttpRequest();
|
||||
let pausing = false;
|
||||
job.cancel = () => {
|
||||
if (job.state === 'paused') {
|
||||
setStatus(ui, 'Annulé', 'err');
|
||||
setState(job, 'cancelled');
|
||||
} else {
|
||||
xhr.abort();
|
||||
}
|
||||
};
|
||||
job.pause = () => {
|
||||
pausing = true;
|
||||
xhr.abort();
|
||||
};
|
||||
job.resume = () => {
|
||||
setStatus(ui, 'En attente…', 'muted');
|
||||
setState(job, 'queued');
|
||||
queue.push(job);
|
||||
pump();
|
||||
};
|
||||
xhr.open('POST', '/upload' + uploadQuery(job));
|
||||
job.cancel = () => xhr.abort();
|
||||
xhr.open('POST', '/upload' + uploadQuery(relativePath));
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) report(e.loaded);
|
||||
});
|
||||
|
|
@ -694,30 +589,22 @@
|
|||
});
|
||||
xhr.addEventListener('error', () => {
|
||||
finish(job);
|
||||
fail(job, 'Erreur réseau');
|
||||
setStatus(ui, 'Erreur réseau', 'err');
|
||||
});
|
||||
xhr.addEventListener('abort', () => {
|
||||
finish(job);
|
||||
ui.progress.textContent = '';
|
||||
ui.bar.style.width = '0';
|
||||
if (pausing) {
|
||||
setStatus(ui, 'En pause (reprise au début du fichier)', 'muted');
|
||||
setState(job, 'paused');
|
||||
} else {
|
||||
setStatus(ui, 'Annulé', 'err');
|
||||
setState(job, 'cancelled');
|
||||
}
|
||||
setStatus(ui, 'Annulé', 'err');
|
||||
});
|
||||
xhr.send(form);
|
||||
}
|
||||
|
||||
async function runChunked(job) {
|
||||
const { file, ui } = job;
|
||||
const { file, relativePath, ui } = job;
|
||||
const report = makeReporter(ui, file.size);
|
||||
const inflight = new Set(); // XHR en vol (pour l'annulation et la pause)
|
||||
const inflight = new Set(); // XHR en vol (pour l'annulation)
|
||||
let aborted = false;
|
||||
let sessionId = null;
|
||||
let failureMessage = null;
|
||||
|
||||
let resolveAll = null;
|
||||
const finished = new Promise((r) => {
|
||||
|
|
@ -731,22 +618,14 @@
|
|||
}
|
||||
};
|
||||
|
||||
// Nettoyage au mieux : une session orpheline est de toute façon purgée par le serveur.
|
||||
const dropSession = (id) => {
|
||||
if (id) fetch('/upload/' + id, { method: 'DELETE' }).catch(() => {});
|
||||
const dropSession = () => {
|
||||
if (sessionId) fetch('/upload/' + sessionId, { method: 'DELETE' }).catch(() => {});
|
||||
};
|
||||
|
||||
// Inscrit dans le pool dès maintenant, avant l'init réseau : le
|
||||
// planificateur compte ce fichier dans la part équitable (`priming`) et
|
||||
// lui réserve un slot même si son init n'a pas encore répondu.
|
||||
const entry = {
|
||||
inflight: 0,
|
||||
stopped: false,
|
||||
paused: false,
|
||||
priming: true,
|
||||
pending: [],
|
||||
send: null,
|
||||
};
|
||||
const entry = { inflight: 0, stopped: false, priming: true, pending: [], send: null };
|
||||
chunkPool.add(entry);
|
||||
|
||||
job.cancel = () => {
|
||||
|
|
@ -755,61 +634,25 @@
|
|||
entry.pending.length = 0;
|
||||
for (const x of inflight) x.abort();
|
||||
chunkPool.remove(entry);
|
||||
dropSession(sessionId);
|
||||
dropSession();
|
||||
finish(job);
|
||||
ui.progress.textContent = '';
|
||||
setStatus(ui, 'Annulé', 'err');
|
||||
setState(job, 'cancelled');
|
||||
finalize('abort');
|
||||
};
|
||||
// Pause : les morceaux en vol sont interrompus puis replanifiés (voir le
|
||||
// listener `abort`) ; plus rien n'est envoyé tant que `paused` est vrai.
|
||||
job.pause = () => {
|
||||
entry.paused = true;
|
||||
for (const x of Array.from(inflight)) x.abort();
|
||||
setStatus(ui, 'En pause', 'muted');
|
||||
setState(job, 'paused');
|
||||
};
|
||||
job.resume = () => {
|
||||
entry.paused = false;
|
||||
setStatus(ui, 'Envoi…', 'muted');
|
||||
setState(job, 'running');
|
||||
chunkPool.tick();
|
||||
};
|
||||
|
||||
let meta;
|
||||
for (;;) {
|
||||
let res;
|
||||
try {
|
||||
res = await fetch('/upload/init' + uploadQuery(job), {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type || 'application/octet-stream',
|
||||
}),
|
||||
});
|
||||
meta = await res.json().catch(() => ({}));
|
||||
} catch {
|
||||
if (aborted) return;
|
||||
entry.stopped = true;
|
||||
chunkPool.remove(entry);
|
||||
finish(job);
|
||||
fail(job, 'Erreur réseau (init)');
|
||||
return;
|
||||
}
|
||||
if (aborted) {
|
||||
if (res.ok) dropSession(meta.id);
|
||||
return;
|
||||
}
|
||||
if (res.status === 429) {
|
||||
// Serveur saturé (autres fenêtres/onglets) : on patiente au lieu d'échouer.
|
||||
setStatus(ui, 'Serveur occupé, nouvelle tentative…', 'muted');
|
||||
await new Promise((resolve) => setTimeout(resolve, INIT_RETRY_MS));
|
||||
if (aborted) return;
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
const res = await fetch('/upload/init' + uploadQuery(relativePath), {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type || 'application/octet-stream',
|
||||
}),
|
||||
});
|
||||
meta = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
entry.stopped = true;
|
||||
chunkPool.remove(entry);
|
||||
|
|
@ -817,9 +660,14 @@
|
|||
applyResult(job, res.status, meta);
|
||||
return;
|
||||
}
|
||||
break;
|
||||
} catch {
|
||||
entry.stopped = true;
|
||||
chunkPool.remove(entry);
|
||||
finish(job);
|
||||
setStatus(ui, 'Erreur réseau (init)', 'err');
|
||||
return;
|
||||
}
|
||||
if (job.state === 'running') setStatus(ui, 'Envoi…', 'muted');
|
||||
if (aborted) return;
|
||||
sessionId = meta.id;
|
||||
const chunkSize = meta.chunkSize;
|
||||
const chunkCount = meta.chunkCount;
|
||||
|
|
@ -837,10 +685,7 @@
|
|||
if (attempts[index] > CHUNK_RETRIES) {
|
||||
entry.stopped = true;
|
||||
entry.pending.length = 0;
|
||||
failureMessage =
|
||||
status === 404
|
||||
? 'Session expirée côté serveur, réessayez'
|
||||
: 'Erreur morceau ' + index + ' (' + (status || 'réseau') + ')';
|
||||
setStatus(ui, 'Erreur morceau ' + index + ' (' + (status || 'réseau') + ')', 'err');
|
||||
finalize('fail');
|
||||
releasePermit();
|
||||
return;
|
||||
|
|
@ -894,12 +739,6 @@
|
|||
});
|
||||
xhr.addEventListener('abort', () => {
|
||||
inflight.delete(xhr);
|
||||
if (!aborted && !entry.stopped) {
|
||||
// Pause : le morceau interrompu sera renvoyé à la reprise.
|
||||
loadedPer[index] = 0;
|
||||
emit();
|
||||
entry.pending.unshift(index);
|
||||
}
|
||||
releasePermit();
|
||||
});
|
||||
xhr.send(file.slice(start, end));
|
||||
|
|
@ -913,8 +752,7 @@
|
|||
if (outcome === 'fail') {
|
||||
for (const x of inflight) x.abort();
|
||||
finish(job);
|
||||
dropSession(sessionId);
|
||||
if (failureMessage) fail(job, failureMessage);
|
||||
dropSession();
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -925,13 +763,18 @@
|
|||
applyResult(job, res.status, body);
|
||||
} catch {
|
||||
finish(job);
|
||||
dropSession(sessionId);
|
||||
fail(job, 'Erreur réseau (finalisation)');
|
||||
setStatus(ui, 'Erreur réseau (finalisation)', 'err');
|
||||
}
|
||||
}
|
||||
|
||||
function cancelAll() {
|
||||
for (const job of Array.from(jobs)) cancelJob(job);
|
||||
while (queue.length) {
|
||||
const job = queue.shift();
|
||||
job.ui.cancelBtn.hidden = true;
|
||||
setStatus(job.ui, 'Annulé', 'err');
|
||||
}
|
||||
for (const job of Array.from(active)) if (job.cancel) job.cancel();
|
||||
updateQueueRow();
|
||||
}
|
||||
|
||||
queueCancel.addEventListener('click', cancelAll);
|
||||
|
|
|
|||
|
|
@ -73,19 +73,6 @@ describe('GET /', () => {
|
|||
expect(res.body).not.toContain('href="/auth/login"');
|
||||
});
|
||||
|
||||
it('page de dépôt : boutons pause/réessayer, titres tronquables, pleine largeur', async () => {
|
||||
const cookie = await login(app, idp);
|
||||
const res = await app.inject({
|
||||
method: 'GET',
|
||||
url: '/',
|
||||
cookies: { [SESSION_COOKIE]: cookie },
|
||||
});
|
||||
expect(res.body).toContain('class="pause"');
|
||||
expect(res.body).toContain('class="retry"');
|
||||
expect(res.body).toContain('text-overflow: ellipsis');
|
||||
expect(res.body).not.toContain('max-width: 640px');
|
||||
});
|
||||
|
||||
it('échappe le nom d’utilisateur avant de l’insérer dans le HTML', async () => {
|
||||
const cookie = await login(app, idp, { name: '<script>alert(1)</script>' });
|
||||
const res = await app.inject({
|
||||
|
|
|
|||
Loading…
Reference in a new issue