diff --git a/src/rmbg_as_a_service/static/index.html b/src/rmbg_as_a_service/static/index.html
index 8088293..2126c4b 100644
--- a/src/rmbg_as_a_service/static/index.html
+++ b/src/rmbg_as_a_service/static/index.html
@@ -25,6 +25,7 @@
▲ DROP IMAGE
NO FILE SELECTED
+
@@ -175,6 +176,7 @@ const sidebarToggle = $('sidebarToggle');
const drop = $('drop');
const fileInput = $('file');
const fname = $('fname');
+const fstats = $('fstats');
const thumb = $('thumb');
const go = $('go');
const dl = $('dl');
@@ -281,12 +283,13 @@ function pickFile(file) {
selectedFile = file;
const url = URL.createObjectURL(file);
const kb = Math.round(file.size / 1024);
- fname.textContent = file.name + ' · ' + kb + ' KB';
+ fname.textContent = file.name;
+ fstats.textContent = kb + ' KB';
thumb.src = url;
thumb.hidden = false;
drop.classList.add('has-file');
srcImg.onload = () => {
- fname.textContent = file.name + ' · ' +
+ fstats.textContent =
srcImg.naturalWidth + '×' + srcImg.naturalHeight + ' PX · ' + kb + ' KB';
};
srcImg.src = url;
@@ -309,6 +312,7 @@ reset.addEventListener('click', () => {
selectedFile = null;
fileInput.value = '';
fname.textContent = 'NO FILE SELECTED';
+ fstats.textContent = '';
thumb.removeAttribute('src');
thumb.hidden = true;
drop.classList.remove('has-file');
diff --git a/src/rmbg_as_a_service/static/styles.css b/src/rmbg_as_a_service/static/styles.css
index 60c5104..4b080aa 100644
--- a/src/rmbg_as_a_service/static/styles.css
+++ b/src/rmbg_as_a_service/static/styles.css
@@ -928,6 +928,13 @@ select option {
background-color: #000000;
}
+/* px / KB stats, on their own line below the filename */
+.upload-stats {
+ color: #5a7a5a;
+ font-size: 11px;
+ margin-top: 4px;
+}
+
/* upload box thumbnail state */
.upload-box.has-file {
border-color: #7aa87a;