diff options
| -rw-r--r-- | src/css/style.css | 14 | ||||
| -rw-r--r-- | src/ts/script.ts | 31 |
2 files changed, 45 insertions, 0 deletions
diff --git a/src/css/style.css b/src/css/style.css index e5aee32..12ea536 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -954,6 +954,20 @@ label.file-input-button:active { box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight); } +label.file-input-button.has-file { + background: var(--success); + color: var(--surface-alt); + border-color: var(--success); +} + +label.file-input-button.has-file:hover { + background: color-mix(in srgb, var(--success) 85%, white); +} + +label.file-input-button.has-file:active { + background: color-mix(in srgb, var(--success) 70%, black); +} + input[type="file"]:focus-visible + label.file-input-button { outline: 1px dotted var(--fg); outline-offset: 2px; diff --git a/src/ts/script.ts b/src/ts/script.ts index 81c61f7..79a9a75 100644 --- a/src/ts/script.ts +++ b/src/ts/script.ts @@ -112,10 +112,41 @@ function initFairyDust(): void { }); } +function initFileInputs(): void { + const fileInputs = document.querySelectorAll<HTMLInputElement>('input[type="file"]'); + + fileInputs.forEach((input) => { + const label = document.querySelector<HTMLLabelElement>( + `label.file-input-button[for="${input.id}"]` + ); + if (!label) return; + + const originalText = label.textContent || 'Browse Files'; + + input.addEventListener('change', () => { + const files = input.files; + if (!files || files.length === 0) { + label.textContent = originalText; + label.classList.remove('has-file'); + return; + } + + label.classList.add('has-file'); + + if (files.length === 1) { + label.textContent = `✓ ${files[0].name}`; + } else { + label.textContent = `✓ ${files.length} files selected`; + } + }); + }); +} + function init(): void { setAssetBase(); initThemeToggle(); initFairyDust(); + initFileInputs(); Prism.highlightAll(); initOneko(); } |