From: Chris Fulljames <christianfulljames@gmail.com>
Date: Mon, 6 Jan 2025 02:38:31 +0000 (-0500)
Subject: Autofill song title from filename
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=c2a0d9c7cc903d996cdd45e0b822c562b51227a9;p=littlesongplace.git

Autofill song title from filename
---

diff --git a/templates/profile.html b/templates/profile.html
index fb41cca..558c47e 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -11,11 +11,11 @@
     <h2>Upload a new song</h2>
     <div class="upload-form">
         <label for="song">mp3 File</label>
-        <input type="file" name="song" accept=".mp3" required></input>
+        <input type="file" name="song" accept=".mp3" id="file-select" required></input>
     </div>
     <div class="upload-form">
         <label for="title">Title</label>
-        <input type="text" name="title" required></input>
+        <input type="text" name="title" id="song-title" required></input>
     </div>
     <div class="upload-form">
         <label for="title">Description</label>
@@ -35,8 +35,20 @@
 </form>
 {% endif %}
 
+<!-- Automatically set song name from file name -->
+<script>
+document.getElementById("file-select").addEventListener("change", function(e) {
+    var songTitle = document.getElementById("song-title");
+    if (e.target.files[0] && !songTitle.value) {
+        var name = e.target.files[0].name;
+        songTitle.value = name.substring(0, name.length - 4);
+    }
+});
+</script>
+
 <h2>Songs</h2>
 
+<!-- TODO: This is duplicated in songs-by-tag.html -->
 {% for song in songs %}
 <div class="song">
     <div class="song-title">{{ song["title"] }}</div>