photoprismupload/index.php

118 lines
3.6 KiB
PHP
Raw Normal View History

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>