Compare commits

...

7 Commits

Author SHA1 Message Date
f6de1c74cb Merge pull request 'Simple file content validation' () from simple-client-validation into develop
Reviewed-on: 
Reviewed-by: Andreas Svanberg <andreass@dsv.su.se>
2025-02-04 11:32:32 +01:00
1d38c59643 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.
2025-02-04 11:28:19 +01:00
efb0f72a88 Changed validation to work on mime type instead.
It now only accepts audio/* and video/* mime types.
2025-02-04 11:10:51 +01:00
a37f4bb60b Added .mkv to accepted and allowedExtensions 2025-02-04 10:22:53 +01:00
652f6ec22a Removed unused const in validateFile function 2025-02-04 10:04:15 +01:00
448c1e9d6b Simple file content validation
Instead of enforcing we are "warning" that the outcome for the selected file may not work as expected
2025-02-04 10:03:09 +01:00
b948beaa2b 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.
2025-02-04 09:44:48 +01:00
2 changed files with 20 additions and 1 deletions
src/main/resources

@ -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;
}

@ -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>