From a34f68b21e7bd0080caf533e765a5428554696da Mon Sep 17 00:00:00 2001
From: Evert-R <evert.rot@gmx.com>
Date: Mon, 30 Oct 2023 07:57:57 +0100
Subject: [PATCH] add file format help text

---
 .../experiment/templates/add-sections.html    | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/backend/experiment/templates/add-sections.html b/backend/experiment/templates/add-sections.html
index a86b3b32a..3bbc9a186 100644
--- a/backend/experiment/templates/add-sections.html
+++ b/backend/experiment/templates/add-sections.html
@@ -10,13 +10,18 @@
     .select-fields p {
         display: inline-block;
     }
+
+    .help-text {
+        color: var(--body-quiet-color);        
+        font-size: 12px;
+    }
+
     .song-help {
         position: relative;
-        top: 7.3rem;                
-        color: var(--body-quiet-color);        
+        top: 7.3rem;
         margin-left: 5rem;
-        font-size: 12px;        
     }
+
     p label {
         display: block;
     }
@@ -49,7 +54,7 @@ <h1>Add sections to playlist: {{playlist.name}}</h1>
 
 <form enctype="multipart/form-data" action="" method="post">
     <div class="select-fields">
-        <div class="song-help mini">* Fill out both the artist and name fields to create a new song object</div>
+        <div class="help-text song-help mini">* Fill out both the artist and name fields to create a new song object</div>
         {% csrf_token %} {{ form.as_p }} {% render_inline_action_fields %}
         {% if form.errors %}
             <div class="error">
@@ -60,7 +65,7 @@ <h1>Add sections to playlist: {{playlist.name}}</h1>
         {% endif %}
         
     </div>
-    
+    <div class="help-text mini">* Allowed audio file formats: WAV, MP3, FLAC, OGG</div>
     <div class="button-container">
         <input type="submit" name="_add" value="Add sections" id="add-button" />
     </div>
@@ -69,4 +74,24 @@ <h1>Add sections to playlist: {{playlist.name}}</h1>
 <form>
     <input type="submit" name="_back" value="Go back" id="back-button" />
 </form>
+
+<script>
+    function fileValidation() {
+        var fileInput = 
+            document.getElementById('id_files');
+         
+        var filePath = fileInput.value;
+     
+        // Allowing file type
+        var allowedExtensions = 
+/(\.doc|\.docx|\.odt|\.pdf|\.tex|\.txt|\.rtf|\.wps|\.wks|\.wpd)$/i;
+         
+        if (!allowedExtensions.exec(filePath)) {
+            alert('Invalid file type');
+            fileInput.value = '';
+            return false;
+        } 
+    }
+    
+</script>
 {% endblock %}