From b948beaa2bfae180fb221bdba004d2a0e414ad7d Mon Sep 17 00:00:00 2001
From: Nico Athanassiadis <nico@dsv.su.se>
Date: Tue, 4 Feb 2025 09:44:48 +0100
Subject: [PATCH] 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 | 16 ++++++++++++++++
.../resources/templates/file-management.html | 3 ++-
2 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index 3f11fc0..3917ef6 100644
--- a/src/main/resources/static/js/script.js
+++ b/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;
}
\ No newline at end of file
diff --git a/src/main/resources/templates/file-management.html b/src/main/resources/templates/file-management.html
index dda4084..66ef4c5 100644
--- a/src/main/resources/templates/file-management.html
+++ b/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>