phlaym/photoprismupload
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases 1 Wiki Activity

Fixed validation

Browse Source
This commit is contained in:
Max Nuding 2021-11-27 08:01:15 +01:00
parent c08762f1c4
commit 966e511140
Signed by: phlaym
GPG Key ID: A06651BAB6777237
2 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config.php.sample
View File

@ -3,5 +3,7 @@
return [
'username' => '',
'password' => ''
'noAlbumToken' => ''
'noAlbumToken' => '',
'fileUploadLimitMb' => 1024,
'maximumNumberOfFilesPerUpload' => 200
];

61
index.php
View File

@ -36,8 +36,7 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
.form-wrapper {
display: grid;
grid-template-rows: auto auto auto;
grid-auto-columns: auto auto;
max-width: 300px;
grid-auto-columns: minmax(auto, 300px) auto;
}
label[for="album"] {
grid-column: 1;
@ -69,6 +68,7 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
}
#error {
grid-row: 2;
grid-column: 1/3;
}
label[for="fileProgress"] {
grid-row: 3;
@ -116,22 +116,6 @@ if (!isset($_POST['submit'])) {
die('Falscher Token</body></html>');
}
?>
<script>
window.tooLarge = false;
window.tooManyFiles = false;
function validateForm() {
const isInvalid = window.tooLarge || window.tooManyFiles;
console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid);
if (isInvalid) {
const errorDiv = document.getElementById('error');
errorDiv.innerText = '';
errorDiv.innerText += window.tooLarge ? 'Zu groß, Upload muss weniger als 200MB sein. ' : '';
errorDiv.innerText += window.tooManyFiles ? 'Zu viele Dateien, maximal 200 erlaubt. ' : '';
errorDiv.style.display = 'block';
}
return !isInvalid;
}
</script>
<div class="form-wrapper">
<!--<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();" id="uploadForm"> !-->
<form method="POST" enctype="multipart/form-data" id="uploadForm">
@ -154,6 +138,8 @@ if (!isset($_POST['submit'])) {
<progress max="0" value="0" id="totalProgress"></progress>
</div>
<script>
window.tooLarge = false;
window.tooManyFiles = false;
const form = document.getElementById('uploadForm');
const submitButton = form.querySelector('input[type=submit]');
const albumInput = form.querySelector('select[name=album]');
@ -174,6 +160,11 @@ if (!isset($_POST['submit'])) {
form.addEventListener('submit', async function(event) {
event.preventDefault();
const isInvalid = window.tooLarge || window.tooManyFiles;
if (isInvalid) {
console.error('Aborting upload! Too many fiels or fiels too large');
return;
}
errorDiv.innerText = '';
fileProgressLabel.style.display = 'inherit';
@ -210,26 +201,46 @@ if (!isset($_POST['submit'])) {
let fileList = [];
input.addEventListener('change', (event) => {
const maxFileSize = <?=$config['fileUploadLimitMb'];?>;
const maxAmountOfFiles = <?=$config['maximumNumberOfFilesPerUpload'];?>;
const errorDiv = document.getElementById('error');
const totalProgress = document.getElementById('totalProgress');
errorDiv.innerText = '';
errorDiv.style.display = 'none';
submitButton.disabled = false;
const target = event.target;
let totalSize = 0;
fileList = [];
const filesTooLarge = [];
if (target.files) {
for (file of target.files) {
totalSize += file.size;
const sizeInMb = file.size / 1024 / 1024;
if (sizeInMb >= maxFileSize) {
filesTooLarge.push(file.name);
console.warn('File', file.name, 'is', sizeInMb, 'MB big, which is over the limit of', maxFileSize);
}
fileList.push(file);
}
}
totalProgress.max = fileList.length;
const sizeInMb = totalSize / 1000 / 1000;
window.tooLarge = sizeInMb >= 200;
console.log('Total size:', totalSize, 'too large: ', window.tooLarge);
window.tooManyFiles = target.files.length > 200;
console.log('Total files:', target.files.length, 'too many: ', window.tooManyFiles);
window.tooManyFiles = fileList.length > maxAmountOfFiles;
if (window.tooManyFiles) {
errorDiv.style.display = 'block';
errorDiv.innerHTML += `Das sind zu viele Dateien, du darfst max. ${maxAmountOfFiles} Dateien gleichzeitig hochladen. `;
submitButton.disabled = true;
console.warn('Total files:', target.files.length, '. Too many!');
}
window.tooLarge = filesTooLarge.length > 0;
if (window.tooLarge) {
const names = filesTooLarge.join(', ')
errorDiv.style.display = 'block';
const pluralizedMessage = filesTooLarge.length > 1 ? 'Die folgenden Dateien sind' : 'Die folgende Datei ist';
errorDiv.innerHTML += `${pluralizedMessage} zu groß: ${names}. Jede Datei darf max. ${maxFileSize} MB groß sein.`;
submitButton.disabled = true;
}
});
</script>
<?php