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>