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 1/6] 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>
From 448c1e9d6b5e0f45ee201fbc2ea2fa82b748e72e Mon Sep 17 00:00:00 2001
From: Nico Athanassiadis <nico@dsv.su.se>
Date: Tue, 4 Feb 2025 10:03:09 +0100
Subject: [PATCH 2/6] Simple file content validation
Instead of enforcing we are "warning" that the outcome for the selected file may not work as expected
---
src/main/resources/static/js/script.js | 9 +++++----
src/main/resources/templates/file-management.html | 2 +-
2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index 3917ef6..4f8ace2 100644
--- a/src/main/resources/static/js/script.js
+++ b/src/main/resources/static/js/script.js
@@ -45,13 +45,14 @@ function deleteSelected() {
function validateFile() {
const fileInput = document.getElementById('file');
const filePath = fileInput.value;
- const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm)$/i;
+ const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm|\.ogg)$/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;
+ alert('File type is not one of the recommended types. We recommend using MP3, MP4, MPEG, MPGA, M4A, WAV, WEBM, OGG.\n' +
+ 'We can not guarantee that other file types will work as expected.');
+ fileInput.value = filePath;
+ return true;
}
return true;
diff --git a/src/main/resources/templates/file-management.html b/src/main/resources/templates/file-management.html
index 66ef4c5..d592c75 100644
--- a/src/main/resources/templates/file-management.html
+++ b/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" onchange="validateFile()">
+ accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm,.ogg" onchange="validateFile()">
</div>
<div class="mb-3">
<label for="language" class="form-label">Select Language</label>
From 652f6ec22aca1edec14e093bee3cb6e2cffa0db1 Mon Sep 17 00:00:00 2001
From: Nico Athanassiadis <nico@dsv.su.se>
Date: Tue, 4 Feb 2025 10:04:15 +0100
Subject: [PATCH 3/6] Removed unused const in validateFile function
---
src/main/resources/static/js/script.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index 4f8ace2..e180c17 100644
--- a/src/main/resources/static/js/script.js
+++ b/src/main/resources/static/js/script.js
@@ -46,7 +46,6 @@ function validateFile() {
const fileInput = document.getElementById('file');
const filePath = fileInput.value;
const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm|\.ogg)$/i;
- const maxSize = 10 * 1024 * 1024; // 10 MB
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.\n' +
From a37f4bb60b44ec55c150526971335ecb6ead1798 Mon Sep 17 00:00:00 2001
From: Nico Athanassiadis <nico@dsv.su.se>
Date: Tue, 4 Feb 2025 10:22:53 +0100
Subject: [PATCH 4/6] Added .mkv to accepted and allowedExtensions
---
src/main/resources/static/js/script.js | 4 ++--
src/main/resources/templates/file-management.html | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index e180c17..d741a35 100644
--- a/src/main/resources/static/js/script.js
+++ b/src/main/resources/static/js/script.js
@@ -45,10 +45,10 @@ function deleteSelected() {
function validateFile() {
const fileInput = document.getElementById('file');
const filePath = fileInput.value;
- const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm|\.ogg)$/i;
+ const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm|\.ogg|\.mkv)$/i;
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.\n' +
+ 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;
diff --git a/src/main/resources/templates/file-management.html b/src/main/resources/templates/file-management.html
index d592c75..b46e33c 100644
--- a/src/main/resources/templates/file-management.html
+++ b/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" onchange="validateFile()">
+ accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm,.ogg,.mkv" onchange="validateFile()">
</div>
<div class="mb-3">
<label for="language" class="form-label">Select Language</label>
From efb0f72a8837612eeb03781cc94b248472a7377f Mon Sep 17 00:00:00 2001
From: Nico Athanassiadis <nico@dsv.su.se>
Date: Tue, 4 Feb 2025 11:10:51 +0100
Subject: [PATCH 5/6] Changed validation to work on mime type instead.
It now only accepts audio/* and video/* mime types.
---
src/main/resources/static/js/script.js | 16 +++++++++-------
.../resources/templates/file-management.html | 2 +-
2 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index d741a35..119651b 100644
--- a/src/main/resources/static/js/script.js
+++ b/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;
diff --git a/src/main/resources/templates/file-management.html b/src/main/resources/templates/file-management.html
index b46e33c..b32d62b 100644
--- a/src/main/resources/templates/file-management.html
+++ b/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>
From 1d38c59643c5b8d905a1475ea2bb6c902fc21187 Mon Sep 17 00:00:00 2001
From: Nico Athanassiadis <nico@dsv.su.se>
Date: Tue, 4 Feb 2025 11:28:19 +0100
Subject: [PATCH 6/6] Changed arrow function so that the parameter is clearly
shown inside a parentheses. Changed the alert text a bit to make it more
clear that they need to select an audio or video file to upload.
---
src/main/resources/static/js/script.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index 119651b..666e470 100644
--- a/src/main/resources/static/js/script.js
+++ b/src/main/resources/static/js/script.js
@@ -49,8 +49,8 @@ function validateFile() {
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.');
+ 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;
}