Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fortschrittsanzeige beim Upload (Dateien-Tool + öffentliche Upload-Seite), Drag&Drop auf Upload-Seite ergänzt

Browse Source
This commit is contained in:
Dicken
2026-06-23 23:52:32 +02:00
parent 25bca76dad
commit 1d97791237
3 changed files with 115 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
backend/upload-page.html
View File

@@ -28,8 +28,14 @@
.done-list li{padding:2px 0;list-style:none}
.done-list li::before{content:'✓ ';color:#4ecdc4}
#progress{height:4px;background:rgba(78,205,196,0.15);border-radius:2px;margin-top:10px;overflow:hidden}
#progress-bar{height:100%;background:#4ecdc4;width:0;transition:width 0.3s}
#progress-bar{height:100%;background:#4ecdc4;width:0;transition:width 0.15s}
#progress-label{font-size:11px;color:rgba(255,255,255,0.4);margin-top:4px;font-family:monospace;min-height:14px}
.attempts{color:#ffe66d;font-size:11px;margin-top:6px;font-family:monospace}
#drop-zone{border:2px dashed rgba(255,255,255,0.15);border-radius:10px;padding:18px 12px;text-align:center;
color:rgba(255,255,255,0.45);font-size:12px;cursor:pointer;transition:all 0.15s;margin-bottom:4px}
#drop-zone.drag{border-color:#4ecdc4;background:rgba(78,205,196,0.08);color:#4ecdc4}
#file-input{display:none}
#file-label{display:block;font-size:12px;color:rgba(255,255,255,0.55);margin-top:6px;word-break:break-all}
</style>
</head>
<body>
@@ -49,8 +55,11 @@
<div id="upload-section" class="hidden">
<div class="info" id="upload-info"></div>
<label>DATEI(EN) AUSWÄHLEN</label>
<div id="drop-zone">📁 Dateien hierher ziehen oder klicken</div>
<div id="file-label"></div>
<input type="file" id="file-input" multiple/>
<div id="progress"><div id="progress-bar"></div></div>
<div id="progress-label"></div>
<button class="btn" id="upload-btn" onclick="uploadFiles()">⬆ Hochladen</button>
<div id="upload-msg" class="hidden"></div>
<ul class="done-list" id="done-list"></ul>
@@ -128,13 +137,66 @@ async function verify() {
}
}
// ── Drag & Drop ──────────────────────────────────────────────────────────────
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag'); });
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag'));
dropZone.addEventListener('drop', e => {
e.preventDefault();
dropZone.classList.remove('drag');
if (e.dataTransfer.files.length) {
fileInput.files = e.dataTransfer.files;
updateFileLabel();
}
});
fileInput.addEventListener('change', updateFileLabel);
function updateFileLabel() {
const files = fileInput.files;
const label = document.getElementById('file-label');
if (!files.length) { label.textContent = ''; return; }
label.textContent = files.length === 1
? files[0].name
: files.length + ' Dateien ausgewählt';
}
// ── Upload mit echtem Byte-Fortschritt (XMLHttpRequest statt fetch,
// da fetch() keine Upload-Progress-Events liefert) ─────────────────────────
function uploadOne(file) {
return new Promise((resolve, reject) => {
const fd = new FormData();
fd.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload-shares/public/' + encodeURIComponent(token) + '/upload');
xhr.setRequestHeader('x-upload-password', password);
xhr.upload.onprogress = e => {
if (e.lengthComputable) setProgress(e.loaded / e.total * 100, file.name);
};
xhr.onload = () => {
let d = {};
try { d = JSON.parse(xhr.responseText); } catch {}
if (xhr.status >= 200 && xhr.status < 300) resolve(d);
else reject(new Error(d.error || 'Upload fehlgeschlagen'));
};
xhr.onerror = () => reject(new Error('Verbindung fehlgeschlagen'));
xhr.send(fd);
});
}
function setProgress(percent, label) {
document.getElementById('progress-bar').style.width = percent + '%';
document.getElementById('progress-label').textContent = label ? Math.round(percent) + '% · ' + label : '';
}
async function uploadFiles() {
const files = document.getElementById('file-input').files;
if (!files.length) { document.getElementById('file-input').click(); return; }
const btn = document.getElementById('upload-btn');
btn.disabled = true;
const msg = document.getElementById('upload-msg');
const bar = document.getElementById('progress-bar');
const list = document.getElementById('done-list');
msg.classList.add('hidden');
@@ -146,33 +208,20 @@ async function uploadFiles() {
msg.classList.remove('hidden');
continue;
}
bar.style.width = ((i + 0.5) / files.length * 100) + '%';
const fd = new FormData();
fd.append('file', file);
setProgress(0, file.name);
try {
const r = await fetch('/api/upload-shares/public/' + encodeURIComponent(token) + '/upload', {
method: 'POST',
headers: { 'x-upload-password': password },
body: fd
});
const d = await r.json();
if (r.ok) {
const li = document.createElement('li');
li.textContent = file.name;
list.appendChild(li);
} else {
msg.className = 'msg err';
msg.textContent = d.error;
msg.classList.remove('hidden');
}
await uploadOne(file);
setProgress(100, file.name);
const li = document.createElement('li');
li.textContent = file.name;
list.appendChild(li);
} catch(e) {
msg.className = 'msg err';
msg.textContent = 'Upload fehlgeschlagen: ' + e.message;
msg.textContent = file.name + ': ' + e.message;
msg.classList.remove('hidden');
}
}
bar.style.width = '100%';
setTimeout(() => bar.style.width = '0', 1500);
setTimeout(() => setProgress(0, ''), 1200);
if (list.children.length > 0) {
msg.className = 'msg ok';
msg.textContent = list.children.length + ' Datei' + (list.children.length !== 1 ? 'en' : '') + ' erfolgreich hochgeladen';
@@ -180,6 +229,7 @@ async function uploadFiles() {
}
btn.disabled = false;
document.getElementById('file-input').value = '';
updateFileLabel();
}
init();