Add state when file uploaded

1 files changed, 31 insertions, 0 deletions

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