Simple file content validation

Added a simple file content validation to what files can be uploaded.
This should at least help users select the correct file type.

There is no server side validation and that is something we actually will need to implement
at some point.

src/main/resources/static/js/script.js

@@ -39,4 +39,20 @@ function deleteSelected() {
         form.action = '/files/bulk-delete'; // Backend endpoint for bulk delete
         form.submit();
     }
+}
+
+// Handle file upload, check file type
+function validateFile() {
+    const fileInput = document.getElementById('file');
+    const filePath = fileInput.value;
+    const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm)$/i;
+    const maxSize = 10 * 1024 * 1024; // 10 MB
+
+    if (!allowedExtensions.exec(filePath)) {
+        alert('Invalid file type. Please upload an audio file (mp3, mp4, mpeg, mpga, m4a, wav, webm).');
+        fileInput.value = '';
+        return false;
+    }
+
+    return true;
 }

src/main/resources/templates/file-management.html

@@ -34,7 +34,8 @@
         <form th:action="@{/files/upload}" method="post" enctype="multipart/form-data">
             <div class="mb-3">
                 <label for="file" class="form-label">Choose File</label>
-                <input type="file" id="file" name="file" class="form-control" required>
+                <input type="file" id="file" name="file" class="form-control" required
+                       accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm" onchange="validateFile()">
             </div>
             <div class="mb-3">
                 <label for="language" class="form-label">Select Language</label>