mm/rmbg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling of drop box

Browse Source
This commit is contained in:
Michael Pilosov 2026-05-16 23:31:07 -06:00
parent 0b53dade06
commit 3064f62192
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/rmbg_as_a_service/static/index.html
View File

@ -25,6 +25,7 @@
<input id="file" type="file" accept="image/*" /> <input id="file" type="file" accept="image/*" />
<div class="upload-text">&#9650; DROP IMAGE</div> <div class="upload-text">&#9650; DROP IMAGE</div>
<div class="upload-hint" id="fname">NO FILE SELECTED</div> <div class="upload-hint" id="fname">NO FILE SELECTED</div>
<div class="upload-stats" id="fstats"></div>
<img class="preview-thumb" id="thumb" alt="" hidden /> <img class="preview-thumb" id="thumb" alt="" hidden />
</div> </div>
</section> </section>
@ -175,6 +176,7 @@ const sidebarToggle = $('sidebarToggle');
const drop = $('drop'); const drop = $('drop');
const fileInput = $('file'); const fileInput = $('file');
const fname = $('fname'); const fname = $('fname');
const fstats = $('fstats');
const thumb = $('thumb'); const thumb = $('thumb');
const go = $('go'); const go = $('go');
const dl = $('dl'); const dl = $('dl');
@ -281,12 +283,13 @@ function pickFile(file) {
selectedFile = file; selectedFile = file;
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
const kb = Math.round(file.size / 1024); 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.src = url;
thumb.hidden = false; thumb.hidden = false;
drop.classList.add('has-file'); drop.classList.add('has-file');
srcImg.onload = () => { srcImg.onload = () => {
fname.textContent = file.name + ' · ' + fstats.textContent =
srcImg.naturalWidth + '×' + srcImg.naturalHeight + ' PX · ' + kb + ' KB'; srcImg.naturalWidth + '×' + srcImg.naturalHeight + ' PX · ' + kb + ' KB';
}; };
srcImg.src = url; srcImg.src = url;
@ -309,6 +312,7 @@ reset.addEventListener('click', () => {
selectedFile = null; selectedFile = null;
fileInput.value = ''; fileInput.value = '';
fname.textContent = 'NO FILE SELECTED'; fname.textContent = 'NO FILE SELECTED';
fstats.textContent = '';
thumb.removeAttribute('src'); thumb.removeAttribute('src');
thumb.hidden = true; thumb.hidden = true;
drop.classList.remove('has-file'); drop.classList.remove('has-file');

7
src/rmbg_as_a_service/static/styles.css
View File

@ -928,6 +928,13 @@ select option {
background-color: #000000; 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 thumbnail state */
.upload-box.has-file { .upload-box.has-file {
border-color: #7aa87a; border-color: #7aa87a;