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

@@ -39,4 +39,22 @@ 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 file = fileInput.files[0];
+    const allowedMimeTypes = ['audio/', 'video/'];
+
+    if (file) {
+        const fileType = file.type;
+        if (!allowedMimeTypes.some((type) => fileType.startsWith(type))) {
+            alert('File type is not an audio or video file.\nPlease select an audio or video file to upload.');
+            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="audio/*,video/*" onchange="validateFile()">
             </div>
             <div class="mb-3">
                 <label for="language" class="form-label">Select Language</label>