enforce filetypes

frontend/assets/js/app.js

@@ -167,11 +167,24 @@ function initApp() {
         document.getElementById('opacityVal').textContent = parseFloat(e.target.value).toFixed(2);
     });
 
-    document.getElementById('eventFileInput').addEventListener('change', (e) => {
+    const ALLOWED_EXTENSIONS = ['pdf', 'md', 'txt', 'docx', 'xlsx', 'csv', 'pptx', 'evidence'];
+
+document.getElementById('eventFileInput').addEventListener('change', (e) => {
         const preview = document.getElementById('eventFilePreview');
-        const files = e.target.files;
+        const files = Array.from(e.target.files);
+        const invalid = files.filter(f => {
+            const ext = f.name.split('.').pop().toLowerCase();
+            return !ALLOWED_EXTENSIONS.includes(ext);
+        });
+        if (invalid.length) {
+            preview.innerHTML = '<div class="text-danger small"><i class="fas fa-exclamation-circle me-1"></i>Invalid type(s): ' +
+                invalid.map(f => f.name).join(', ') +
+                '. Allowed: ' + ALLOWED_EXTENSIONS.join(', ') + '</div>';
+            e.target.value = '';
+            return;
+        }
         if (!files.length) { preview.innerHTML = ''; return; }
-        preview.innerHTML = Array.from(files).map(f =>
+        preview.innerHTML = files.map(f =>
             `<div class="small text-secondary"><i class="fas ${getFileIcon(f.type, f.name)} me-1"></i>${esc(f.name)} (${formatFileSize(f.size)})</div>`
         ).join('');
     });

frontend/index.html

@@ -253,7 +253,7 @@
                     </div>
                     <div class="mb-2">
                         <label class="form-label small">File Attachments</label>
-                        <input type="file" class="form-control form-control-sm" id="eventFileInput" multiple>
+                        <input type="file" class="form-control form-control-sm" id="eventFileInput" multiple accept=".pdf,.md,.txt,.docx,.xlsx,.csv,.pptx,.evidence">
                         <div id="eventFilePreview" class="mt-1"></div>
                     </div>
                 </form>