ctown/podstalk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styled file upload buttons for audio and images
Build and Deploy / build-and-deploy (push) Successful in 40s
Details

Browse Source
This commit is contained in:
James Brechtel
2026-07-08 09:43:21 -04:00
parent b32c0a1ba6
commit a047338210
3 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
podstalk
BIN
View File
Binary file not shown.
template/dashboard.html
+14 -4
View File
@@ -17,7 +17,9 @@
.settings-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; } .settings-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.settings-form .form-group { margin-bottom: 0; } .settings-form .form-group { margin-bottom: 0; }
.hidden { display: none; } .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> </head>
<body> <body>
<nav class="nb-navbar" role="navigation" aria-label="Main navigation"> <nav class="nb-navbar" role="navigation" aria-label="Main navigation">
@@ -52,11 +54,13 @@
<div class="form-group" style="flex: 1; min-width: 200px;"> <div class="form-group" style="flex: 1; min-width: 200px;">
<label for="podcast_author">Author</label> <label for="podcast_author">Author</label>
<input type="text" id="podcast_author" name="podcast_author" class="nb-input blue" <input type="text" id="podcast_author" name="podcast_author" class="nb-input blue"
value="{{.PodcastAuthor}}" placeholder="Podcast Host" />
</div>
<div class="form-group"> <div class="form-group">
<label for="podcast_image">Podcast Image</label> <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>
<div class="form-group"> <div class="form-group">
<button type="submit" class="nb-button green">Save</button> <button type="submit" class="nb-button green">Save</button>
@@ -80,6 +84,12 @@
</div> </div>
</div> </div>
<script> <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 // Flash messages from query params
(function() { (function() {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
template/episode_form.html
+19 -6
View File
@@ -14,7 +14,9 @@
.form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; } .form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; } .form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.current-file { font-size: 0.85rem; color: #666; margin-top: 0.25rem; } .current-file { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }
</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> </head>
<body> <body>
<nav class="nb-navbar" role="navigation" aria-label="Main navigation"> <nav class="nb-navbar" role="navigation" aria-label="Main navigation">
@@ -41,20 +43,25 @@
<div class="nb-form-group"> <div class="nb-form-group">
<label for="description">Description</label> <label for="description">Description</label>
<textarea id="description" name="description" class="nb-textarea" <textarea id="description" name="description" class="nb-textarea"
rows="4">{{if .Editing}}{{.Episode.Description}}{{end}}</textarea>
</div>
<div class="nb-form-group"> <div class="nb-form-group">
<label for="audio_file">Audio File</label> <label for="audio_file">Audio File</label>
<input type="file" id="audio_file" name="audio_file" accept="audio/*" /> <div class="file-upload">
<input type="file" id="audio_file" name="audio_file" accept="audio/*" onchange="updateFileName(this)" />
<label for="audio_file" class="nb-button blue file-label">Choose Audio File</label>
<span class="file-name" id="audio_file_name"></span>
</div>
{{if .Editing}} {{if .Editing}}
<div class="current-file"> <div class="current-file">
{{if .Episode.AudioPath}}Current: {{.Episode.AudioPath}}{{else}}No audio file uploaded.{{end}} {{if .Episode.AudioPath}}Current: {{.Episode.AudioPath}}{{else}}No audio file uploaded.{{end}}
</div> </div>
{{end}} {{end}}
</div>
<div class="nb-form-group"> <div class="nb-form-group">
<label for="image_file">Episode Image (optional)</label> <label for="image_file">Episode Image (optional)</label>
<input type="file" id="image_file" name="image_file" accept="image/*" /> <div class="file-upload">
<input type="file" id="image_file" name="image_file" accept="image/*" onchange="updateFileName(this)" />
<label for="image_file" class="nb-button blue file-label">Choose Image</label>
<span class="file-name" id="image_file_name"></span>
</div>
{{if .Editing}} {{if .Editing}}
<div class="current-file"> <div class="current-file">
{{if .Episode.ImagePath}}Current: {{.Episode.ImagePath}}{{else}}No image uploaded.{{end}} {{if .Episode.ImagePath}}Current: {{.Episode.ImagePath}}{{else}}No image uploaded.{{end}}
@@ -73,6 +80,12 @@
</form> </form>
</div> </div>
<script> <script>
function updateFileName(input) {
const span = document.getElementById(input.id + '_name');
if (span && input.files.length > 0) {
span.textContent = input.files[0].name;
}
}
(function() { (function() {
const input = document.getElementById('published_at'); const input = document.getElementById('published_at');
if (!input.value) { if (!input.value) {