per-file progress bars
This commit is contained in:
parent
30fc8845f0
commit
93da22569c
|
@ -31,6 +31,12 @@ table {
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
background-image: linear-gradient(0deg, #7af, #7af);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
tr + tr td {
|
tr + tr td {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,6 +41,7 @@ function finishSending() {
|
||||||
}
|
}
|
||||||
socket.close();
|
socket.close();
|
||||||
progressContainer.textContent = "Upload complete!";
|
progressContainer.textContent = "Upload complete!";
|
||||||
|
fileList.style.backgroundColor = "#7af";
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendData() {
|
function sendData() {
|
||||||
|
@ -72,6 +73,17 @@ function updateProgress() {
|
||||||
}
|
}
|
||||||
progress.textContent = percentage;
|
progress.textContent = percentage;
|
||||||
progressBarFilled.style.width = percentage;
|
progressBarFilled.style.width = percentage;
|
||||||
|
|
||||||
|
const fileEntries = Array.from(fileList.children);
|
||||||
|
for (entry of fileEntries.slice(0, fileIndex)) {
|
||||||
|
entry.style.backgroundSize = "100%";
|
||||||
|
}
|
||||||
|
if (fileIndex < files.length) {
|
||||||
|
const currentFile = files[fileIndex];
|
||||||
|
if (currentFile.size > 0) {
|
||||||
|
fileEntries[fileIndex].style.backgroundSize = `${(byteIndex*100/currentFile.size)}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateFiles() {
|
function updateFiles() {
|
||||||
|
|
Loading…
Reference in a new issue