2021-08-24 17:59:30 +00:00
|
|
|
<?php
|
|
|
|
session_start();
|
|
|
|
require __DIR__ . '/vendor/autoload.php';
|
|
|
|
|
|
|
|
use PhotoPrismUpload\API\PhotoPrism;
|
|
|
|
|
|
|
|
?>
|
|
|
|
<html>
|
|
|
|
<head>
|
2021-08-26 07:47:56 +00:00
|
|
|
<style>
|
|
|
|
.form-wrapper {
|
|
|
|
display: grid;
|
|
|
|
grid-template-rows: auto auto auto;
|
|
|
|
grid-auto-columns: auto auto;
|
|
|
|
max-width: 300px;
|
|
|
|
}
|
|
|
|
label[for="album"] {
|
|
|
|
grid-column: 1;
|
|
|
|
grid-row: 1;
|
|
|
|
/* display: block; */
|
|
|
|
}
|
|
|
|
#album {
|
|
|
|
grid-column: 2;
|
|
|
|
grid-row: 1;
|
|
|
|
}
|
|
|
|
#input {
|
|
|
|
grid-row: 2;
|
|
|
|
grid-column: 1/3;
|
|
|
|
}
|
|
|
|
.form-wrapper > form:nth-child(1) {
|
|
|
|
display: inherit;
|
|
|
|
}
|
|
|
|
input[type=submit] {
|
|
|
|
grid-column: 1/3;
|
|
|
|
grid-row: 3;
|
|
|
|
justify-self: center;
|
|
|
|
}
|
|
|
|
</style>
|
2021-08-24 17:59:30 +00:00
|
|
|
</head>
|
|
|
|
<body></body>
|
|
|
|
<?php
|
|
|
|
|
2021-08-26 07:47:56 +00:00
|
|
|
$config = require(__DIR__ . '/config.php');
|
|
|
|
$api = new PhotoPrism($config);
|
|
|
|
$albums = [];
|
|
|
|
try {
|
|
|
|
$api->login();
|
|
|
|
$albums = $api->getAlbums();
|
|
|
|
} catch (\Exception $e) {
|
|
|
|
die('Fehler: ' . $e->getMessage());
|
|
|
|
}
|
|
|
|
|
2021-08-24 17:59:30 +00:00
|
|
|
if (!isset($_POST['submit'])) {
|
|
|
|
?>
|
|
|
|
<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) {
|
2021-08-26 07:47:56 +00:00
|
|
|
const errorDiv = document.getElementById('error');m
|
2021-08-24 17:59:30 +00:00
|
|
|
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>
|
2021-08-26 07:47:56 +00:00
|
|
|
<div class="form-wrapper">
|
|
|
|
<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();">
|
|
|
|
<label for="album">Zu Album hinzufügen</label>
|
|
|
|
<select name="album" id="album">
|
|
|
|
<option value="">---</option>
|
|
|
|
<?php foreach ($albums as $album) {
|
|
|
|
echo '<option value="' . $album->uid . '">' . $album->title . '</option>\n';
|
|
|
|
} ?>
|
|
|
|
</select>
|
|
|
|
<!--<label></label>
|
|
|
|
<input type="text" />!-->
|
|
|
|
<input multiple type="file" name="files[]" id="input" />
|
|
|
|
<input type="submit" name="submit" value="Upload" />
|
|
|
|
</form>
|
|
|
|
<div id="error" style="display:none"></div>
|
|
|
|
</div>
|
2021-08-24 17:59:30 +00:00
|
|
|
<script>
|
|
|
|
const input = document.getElementById('input')
|
|
|
|
|
|
|
|
input.addEventListener('change', (event) => {
|
|
|
|
const errorDiv = document.getElementById('error');
|
|
|
|
errorDiv.innerText = '';
|
|
|
|
errorDiv.style.display = 'none';
|
|
|
|
|
|
|
|
const target = event.target;
|
|
|
|
let totalSize = 0;
|
|
|
|
if (target.files) {
|
|
|
|
for (file of target.files) {
|
|
|
|
totalSize += file.size;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<?php
|
|
|
|
die();
|
|
|
|
}
|
|
|
|
try {
|
2021-08-26 07:47:56 +00:00
|
|
|
$api->uploadPhotos($_POST['album']);
|
2021-08-24 17:59:30 +00:00
|
|
|
} catch (\Exception $e) {
|
|
|
|
die('Fehler: ' . $e->getMessage());
|
|
|
|
}
|
2021-08-26 07:47:56 +00:00
|
|
|
?>
|
|
|
|
Erfolg! <a href=".">Zurück</a>
|