Styled file upload buttons for audio and images

2026-07-08 09:43:21 -04:00
parent b32c0a1ba6
commit a047338210
3 changed files with 33 additions and 10 deletions
@@ -17,7 +17,9 @@
        .settings-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
        .settings-form .form-group { margin-bottom: 0; }
        .hidden { display: none; }
-    </style>
+        .file-upload { position: relative; display: inline-block; }
+        .file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
+        .file-name { margin-left: 0.5rem; font-size: 0.85rem; color: #666; }
 </head>
 <body>
    <nav class="nb-navbar" role="navigation" aria-label="Main navigation">
@@ -52,11 +54,13 @@
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="podcast_author">Author</label>
                        <input type="text" id="podcast_author" name="podcast_author" class="nb-input blue"
-                            value="{{.PodcastAuthor}}" placeholder="Podcast Host" />
-                    </div>
                    <div class="form-group">
                        <label for="podcast_image">Podcast Image</label>
-                        <input type="file" id="podcast_image" name="podcast_image" accept="image/*" />
+                        <div class="file-upload">
+                            <input type="file" id="podcast_image" name="podcast_image" accept="image/*" onchange="updateFileName(this)" />
+                            <label for="podcast_image" class="nb-button blue file-label">Choose Image</label>
+                            <span class="file-name" id="podcast_image_name"></span>
+                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="nb-button green">Save</button>
@@ -80,6 +84,12 @@
            </div>
        </div>
        <script>
+            function updateFileName(input) {
+                const span = document.getElementById(input.id + '_name');
+                if (span && input.files.length > 0) {
+                    span.textContent = input.files[0].name;
+                }
+            }
            // Flash messages from query params
            (function() {
                const params = new URLSearchParams(window.location.search);