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 [ return [
'username' => '', 'username' => '',
'password' => '' '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 { .form-wrapper {
display: grid; display: grid;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
grid-auto-columns: auto auto; grid-auto-columns: minmax(auto, 300px) auto;
max-width: 300px;
} }
label[for="album"] { label[for="album"] {
grid-column: 1; grid-column: 1;
@ -69,6 +68,7 @@ $footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phla
} }
#error { #error {
grid-row: 2; grid-row: 2;
grid-column: 1/3;
} }
label[for="fileProgress"] { label[for="fileProgress"] {
grid-row: 3; grid-row: 3;
@ -116,22 +116,6 @@ if (!isset($_POST['submit'])) {
die('Falscher Token</body></html>'); 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"> <div class="form-wrapper">
<!--<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();" id="uploadForm"> !--> <!--<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();" id="uploadForm"> !-->
<form method="POST" enctype="multipart/form-data" 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> <progress max="0" value="0" id="totalProgress"></progress>
</div> </div>
<script> <script>
window.tooLarge = false;
window.tooManyFiles = false;
const form = document.getElementById('uploadForm'); const form = document.getElementById('uploadForm');
const submitButton = form.querySelector('input[type=submit]'); const submitButton = form.querySelector('input[type=submit]');
const albumInput = form.querySelector('select[name=album]'); const albumInput = form.querySelector('select[name=album]');
@ -174,6 +160,11 @@ if (!isset($_POST['submit'])) {
form.addEventListener('submit', async function(event) { form.addEventListener('submit', async function(event) {
event.preventDefault(); event.preventDefault();
const isInvalid = window.tooLarge || window.tooManyFiles;
if (isInvalid) {
console.error('Aborting upload! Too many fiels or fiels too large');
return;
}
errorDiv.innerText = ''; errorDiv.innerText = '';
fileProgressLabel.style.display = 'inherit'; fileProgressLabel.style.display = 'inherit';
@ -210,26 +201,46 @@ if (!isset($_POST['submit'])) {
let fileList = []; let fileList = [];
input.addEventListener('change', (event) => { input.addEventListener('change', (event) => {
const maxFileSize = <?=$config['fileUploadLimitMb'];?>;
const maxAmountOfFiles = <?=$config['maximumNumberOfFilesPerUpload'];?>;
const errorDiv = document.getElementById('error'); const errorDiv = document.getElementById('error');
const totalProgress = document.getElementById('totalProgress'); const totalProgress = document.getElementById('totalProgress');
errorDiv.innerText = ''; errorDiv.innerText = '';
errorDiv.style.display = 'none'; errorDiv.style.display = 'none';
submitButton.disabled = false;
const target = event.target; const target = event.target;
let totalSize = 0;
fileList = []; fileList = [];
const filesTooLarge = [];
if (target.files) { if (target.files) {
for (file of 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); fileList.push(file);
} }
} }
totalProgress.max = fileList.length; totalProgress.max = fileList.length;
const sizeInMb = totalSize / 1000 / 1000;
window.tooLarge = sizeInMb >= 200; window.tooManyFiles = fileList.length > maxAmountOfFiles;
console.log('Total size:', totalSize, 'too large: ', window.tooLarge); if (window.tooManyFiles) {
window.tooManyFiles = target.files.length > 200; errorDiv.style.display = 'block';
console.log('Total files:', target.files.length, 'too many: ', window.tooManyFiles); 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> </script>
<?php <?php