diff --git a/assets/index.css b/assets/index.css
index bbc9f8e..3e56634 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -93,6 +93,11 @@ body {
display: none;
}
+.upload-status span {
+ width: 70px;
+ display: inline-block;
+}
+
.main {
padding: 0 1em;
}
diff --git a/assets/index.html b/assets/index.html
index 39caf9c..edadb84 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -36,7 +36,7 @@
Name |
- Status |
+ Speed - Progress - Time Left |
diff --git a/assets/index.js b/assets/index.js
index a60286e..ec8d49a 100644
--- a/assets/index.js
+++ b/assets/index.js
@@ -52,6 +52,14 @@ class Uploader {
* @type Element
*/
$uploadStatus;
+ /**
+ * @type number
+ */
+ uploaded = 0;
+ /**
+ * @type number
+ */
+ lastUptime = 0;
static globalIdx = 0;
constructor(file, dirs) {
this.name = [...dirs, file.name].join("/");
@@ -68,11 +76,12 @@ class Uploader {
${getSvg("File")}
${name}
- |
+ |
`);
$uploadersTable.classList.remove("hidden");
$emptyFolder.classList.add("hidden");
this.$uploadStatus = document.getElementById(`uploadStatus${idx}`);
+ this.lastUptime = Date.now();
const ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", e => this.progress(e), false);
@@ -92,8 +101,15 @@ class Uploader {
}
progress(event) {
- const percent = (event.loaded / event.total) * 100;
- this.$uploadStatus.innerHTML = `${percent.toFixed(2)}%`;
+ let now = Date.now();
+ let speed = (event.loaded - this.uploaded) / (now - this.lastUptime) * 1000;
+ let [speedValue, speedUnit] = formatSize(speed);
+ const speedText = `${speedValue}${speedUnit.toLowerCase()}/s`;
+ const progress = formatPercent((event.loaded / event.total) * 100);
+ const duration = formatDuration((event.total - event.loaded) / speed)
+ this.$uploadStatus.innerHTML = `${speedText}${progress}${duration}`;
+ this.uploaded = event.loaded;
+ this.lastUptime = now;
}
complete() {
@@ -174,7 +190,7 @@ function addPath(file, index) {
${file.name}
${formatMtime(file.mtime)} |
- ${formatSize(file.size)} |
+ ${formatSize(file.size).join(" ")} |
${actionCell}
`)
}
@@ -284,11 +300,27 @@ function padZero(value, size) {
}
function formatSize(size) {
- if (!size) return ""
+ if (!size) return []
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
- if (size == 0) return '0 Byte';
+ if (size == 0) return [0, "Byte"];
const i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
- return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
+ return [Math.round(size / Math.pow(1024, i), 2), sizes[i]];
+}
+
+function formatDuration(seconds) {
+ seconds = Math.ceil(seconds);
+ let h = Math.floor(seconds / 3600);
+ let m = Math.floor((seconds - h * 3600) / 60);
+ let s = seconds - h * 3600 - m * 60
+ return `${padZero(h, 2)}:${padZero(m, 2)}:${padZero(s, 2)}`;
+}
+
+function formatPercent(precent) {
+ if (precent > 10) {
+ return precent.toFixed(1) + "%";
+ } else {
+ return precent.toFixed(2) + "%";
+ }
}
function ready() {