Add state when file uploaded

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();
 }