From b948beaa2bfae180fb221bdba004d2a0e414ad7d Mon Sep 17 00:00:00 2001 From: Nico Athanassiadis 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 @@
- +
-- 2.39.5 From 448c1e9d6b5e0f45ee201fbc2ea2fa82b748e72e Mon Sep 17 00:00:00 2001 From: Nico Athanassiadis 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 @@
+ accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm,.ogg" onchange="validateFile()">
-- 2.39.5 From 652f6ec22aca1edec14e093bee3cb6e2cffa0db1 Mon Sep 17 00:00:00 2001 From: Nico Athanassiadis 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' + -- 2.39.5 From a37f4bb60b44ec55c150526971335ecb6ead1798 Mon Sep 17 00:00:00 2001 From: Nico Athanassiadis 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 @@
+ accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm,.ogg,.mkv" onchange="validateFile()">
-- 2.39.5 From efb0f72a8837612eeb03781cc94b248472a7377f Mon Sep 17 00:00:00 2001 From: Nico Athanassiadis 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 @@
+ accept="audio/*,video/*" onchange="validateFile()">
-- 2.39.5 From 1d38c59643c5b8d905a1475ea2bb6c902fc21187 Mon Sep 17 00:00:00 2001 From: Nico Athanassiadis 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; } -- 2.39.5