Changed validation to work on mime type instead.

It now only accepts audio/* and video/* mime types.

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

@@ -44,14 +44,16 @@ function deleteSelected() {
 // 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|\.ogg|\.mkv)$/i;
+    const file = fileInput.files[0];
+    const allowedMimeTypes = ['audio/', 'video/'];
 
-    if (!allowedExtensions.exec(filePath)) {
-        alert('File type is not one of the recommended types. We recommend using MP3, MP4, MPEG, MPGA, M4A, WAV, WEBM, OGG, MKV.\n' +
-            'We can not guarantee that other file types will work as expected.');
-        fileInput.value = filePath;
-        return true;
+    if (file) {
+        const fileType = file.type;
+        if (!allowedMimeTypes.some(type => fileType.startsWith(type))) {
+            alert('File type is not an audio or video file.\nPlease upload an audio or video file.');
+            fileInput.value = '';
+            return false;
+        }
     }
 
     return true;

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

@@ -35,7 +35,7 @@
             <div class="mb-3">
                 <label for="file" class="form-label">Choose File</label>
                 <input type="file" id="file" name="file" class="form-control" required
-                       accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm,.ogg,.mkv" onchange="validateFile()">
+                       accept="audio/*,video/*" onchange="validateFile()">
             </div>
             <div class="mb-3">
                 <label for="language" class="form-label">Select Language</label>