animate merging chunks
This commit is contained in:
@@ -2058,4 +2058,12 @@ body.dark-mode .admin-panel-content label {
|
|||||||
|
|
||||||
#changePasswordModal {
|
#changePasswordModal {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
.spinning {
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
52
upload.js
52
upload.js
@@ -457,43 +457,51 @@ function initResumableUpload() {
|
|||||||
updateFileInfoCount();
|
updateFileInfoCount();
|
||||||
});
|
});
|
||||||
|
|
||||||
resumableInstance.on("fileProgress", function (file) {
|
resumableInstance.on("fileProgress", function(file) {
|
||||||
const percent = Math.floor(file.progress() * 100);
|
const progress = file.progress(); // value between 0 and 1
|
||||||
|
const percent = Math.floor(progress * 100);
|
||||||
const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
|
const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
|
||||||
if (li && li.progressBar) {
|
if (li && li.progressBar) {
|
||||||
li.progressBar.style.width = percent + "%";
|
if (percent < 99) {
|
||||||
|
li.progressBar.style.width = percent + "%";
|
||||||
// Calculate elapsed time since file entry was created.
|
|
||||||
const elapsed = (Date.now() - li.startTime) / 1000;
|
// Calculate elapsed time and speed.
|
||||||
let speed = "";
|
const elapsed = (Date.now() - li.startTime) / 1000;
|
||||||
if (elapsed > 0) {
|
let speed = "";
|
||||||
// Calculate total bytes uploaded so far using file.progress() * file.size
|
if (elapsed > 0) {
|
||||||
const bytesUploaded = file.progress() * file.size;
|
const bytesUploaded = progress * file.size;
|
||||||
const spd = bytesUploaded / elapsed;
|
const spd = bytesUploaded / elapsed;
|
||||||
if (spd < 1024) {
|
if (spd < 1024) {
|
||||||
speed = spd.toFixed(0) + " B/s";
|
speed = spd.toFixed(0) + " B/s";
|
||||||
} else if (spd < 1048576) {
|
} else if (spd < 1048576) {
|
||||||
speed = (spd / 1024).toFixed(1) + " KB/s";
|
speed = (spd / 1024).toFixed(1) + " KB/s";
|
||||||
} else {
|
} else {
|
||||||
speed = (spd / 1048576).toFixed(1) + " MB/s";
|
speed = (spd / 1048576).toFixed(1) + " MB/s";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
li.progressBar.innerText = percent + "% (" + speed + ")";
|
||||||
|
} else {
|
||||||
|
// When progress reaches 99% or higher, show only a spinner icon.
|
||||||
|
li.progressBar.style.width = "100%";
|
||||||
|
li.progressBar.innerHTML = '<i class="material-icons spinning" style="vertical-align: middle;">autorenew</i>';
|
||||||
}
|
}
|
||||||
li.progressBar.innerText = percent + "% (" + speed + ")";
|
|
||||||
|
|
||||||
// Enable the pause/resume button once progress starts
|
// Enable the pause/resume button once progress starts.
|
||||||
const pauseResumeBtn = li.querySelector(".pause-resume-btn");
|
const pauseResumeBtn = li.querySelector(".pause-resume-btn");
|
||||||
if (pauseResumeBtn) {
|
if (pauseResumeBtn) {
|
||||||
pauseResumeBtn.disabled = false;
|
pauseResumeBtn.disabled = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
resumableInstance.on("fileSuccess", function (file, message) {
|
resumableInstance.on("fileSuccess", function(file, message) {
|
||||||
const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
|
const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
|
||||||
if (li && li.progressBar) {
|
if (li && li.progressBar) {
|
||||||
|
// Clear any merging indicators.
|
||||||
li.progressBar.style.width = "100%";
|
li.progressBar.style.width = "100%";
|
||||||
li.progressBar.innerText = "Done";
|
li.progressBar.innerText = "Done";
|
||||||
// Hide the pause/resume button when upload is complete.
|
|
||||||
|
// Optionally hide the pause/resume and remove buttons.
|
||||||
const pauseResumeBtn = li.querySelector(".pause-resume-btn");
|
const pauseResumeBtn = li.querySelector(".pause-resume-btn");
|
||||||
if (pauseResumeBtn) {
|
if (pauseResumeBtn) {
|
||||||
pauseResumeBtn.style.display = "none";
|
pauseResumeBtn.style.display = "none";
|
||||||
|
|||||||
Reference in New Issue
Block a user