photoprismupload/index.php

335 lines
12 KiB
PHP
Raw Normal View History

2021-08-24 17:59:30 +00:00
<?php
session_start();
2021-11-27 11:52:29 +00:00
/** require autoloading to manage namespaces */
2021-08-24 17:59:30 +00:00
require __DIR__ . '/vendor/autoload.php';
use PhotoPrismUpload\API\PhotoPrism;
2021-11-27 11:52:29 +00:00
use PhotoPrismUpload\Entities\Album;
2021-11-27 09:59:29 +00:00
2021-11-27 11:52:29 +00:00
/** @var string $footer Footer text which links to the Gitea repo */
2021-11-27 09:59:29 +00:00
$footer = '<footer style="position: fixed;bottom: 0;left: 0;">'
.'<a href="/git/phlaym/photoprismupload">Ich bin Open Source</a></footer>';
2021-08-24 17:59:30 +00:00
?>
<html>
<head>
2021-11-26 20:02:49 +00:00
<meta charset="UTF-8">
2021-11-26 19:57:46 +00:00
<meta name="color-scheme" content="dark light">
2021-11-26 20:02:49 +00:00
<title>Photoprism Upload</title>
<meta name="description" content="Eine Seite um Photos zur Photoprism Instanz hochzuladen">
<meta name="author" content="Max Nuding">
<meta http-equiv="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-11-26 20:15:31 +00:00
<meta http-equiv=”content-language” content=”de-de”/>
2021-08-26 07:47:56 +00:00
<style>
2021-11-26 19:57:46 +00:00
::root {
background-color: white;
color: black;
color-scheme: light dark;
}
@media screen and (prefers-color-scheme: dark) {
:root {
background-color: rgb(54, 54, 54);
color: white;
}
2021-11-26 20:15:31 +00:00
a {
color: rgb(105, 105, 242);
}
a:visited {
color: rgb(152, 95, 215);
}
2021-11-26 19:57:46 +00:00
}
2021-08-26 07:47:56 +00:00
.form-wrapper {
display: grid;
grid-template-rows: auto auto auto;
2021-11-27 07:01:15 +00:00
grid-auto-columns: minmax(auto, 300px) auto;
2021-08-26 07:47:56 +00:00
}
label[for="album"] {
grid-column: 1;
grid-row: 1;
2021-11-27 08:24:10 +00:00
align-self: center;
2021-08-26 07:47:56 +00:00
}
#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] {
2021-11-26 19:43:53 +00:00
grid-column: 2;
grid-row: 3;
justify-self: right;
}
2021-11-27 11:52:29 +00:00
#error,
#fileProgress,
#totalProgress,
label[for="fileProgress"],
label[for="totalProgress"] {
2021-11-26 19:43:53 +00:00
display:none;
grid-column: 1;
}
#uploadForm {
grid-row: 1;
grid-column: 1;
}
#error {
grid-row: 2;
2021-11-27 07:01:15 +00:00
grid-column: 1/3;
2021-11-26 19:43:53 +00:00
}
label[for="fileProgress"] {
2021-08-26 07:47:56 +00:00
grid-row: 3;
2021-11-26 19:43:53 +00:00
}
#fileProgress {
grid-row: 4;
width: 100%;
}
label[for="totalProgress"]{
grid-row: 5;
}
#totalProgress {
grid-row: 6;
width: 100%;
2021-08-26 07:47:56 +00:00
}
#viewAlbum {
2021-11-27 11:52:29 +00:00
grid-row: 7;
}
2021-11-26 20:15:31 +00:00
footer {
margin: 8px;
}
2021-08-26 07:47:56 +00:00
</style>
2021-08-24 17:59:30 +00:00
</head>
<body>
2021-08-24 17:59:30 +00:00
<?php
2021-11-27 11:52:29 +00:00
/** @var array $config configuration options */
2021-08-26 07:47:56 +00:00
$config = require(__DIR__ . '/config.php');
2021-11-27 11:52:29 +00:00
/** @var PhotoPrism $api API object to interface with PhotoPrism */
2021-08-26 07:47:56 +00:00
$api = new PhotoPrism($config);
2021-11-27 11:52:29 +00:00
/** @var Album[] $albums List of PhotoPrism albums */
2021-08-26 07:47:56 +00:00
$albums = [];
try {
$api->login();
} catch (\Exception $e) {
2021-11-27 07:55:20 +00:00
die('Fehler: ' . $e->getMessage().$footer.'</body></html>');
2021-08-26 07:47:56 +00:00
}
2021-08-24 17:59:30 +00:00
if (!isset($_POST['submit'])) {
2021-08-26 08:56:59 +00:00
if (!isset($_GET['token'])) {
2021-11-27 07:55:20 +00:00
die('Sorry, kein Zugriff' . $footer . '</body></html>');
2021-08-26 08:56:59 +00:00
}
2021-11-27 11:52:29 +00:00
/** @var string $token Tokens for which album(s) are visible in the dropdown */
2021-08-26 08:56:59 +00:00
$token = $_GET['token'];
2021-11-27 11:52:29 +00:00
/** @var string[] $tokens List of album tokens */
2021-08-26 08:56:59 +00:00
$tokens = explode(',', $token);
2021-11-27 11:52:29 +00:00
/** @var string $album_url URL path to the selected album */
$album_url = '/';
2021-08-26 08:56:59 +00:00
try {
$albums = $api->getAlbumsByTokens($tokens);
} catch (\Exception $e) {
2021-11-27 07:55:20 +00:00
die('Fehler: ' . $footer . $e->getMessage() . '</body></html>');
2021-08-26 08:56:59 +00:00
}
if (empty($albums) && (empty($config['noAlbumToken']) || !in_array($config['noAlbumToken'], $tokens))) {
2021-11-27 07:55:20 +00:00
die('Falscher Token' . $footer . '</body></html>');
2021-08-26 08:56:59 +00:00
}
2021-08-24 17:59:30 +00:00
?>
2021-08-26 07:47:56 +00:00
<div class="form-wrapper">
2021-11-26 19:43:53 +00:00
<form method="POST" enctype="multipart/form-data" id="uploadForm">
2021-08-26 07:47:56 +00:00
<label for="album">Zu Album hinzufügen</label>
<select name="album" id="album">
<option value="" data-url="/">---</option>
2021-11-27 11:52:29 +00:00
<?php
/** @var Album $album Current PhotoPrism albums */
foreach ($albums as $album) {
/** @var string $selected Selected attribute of the option */
$selected = $album->token === $token ? ' selected ' : '';
if ($album->token === $token) {
2021-11-27 11:52:29 +00:00
$album_url = $album->getUrlPath() ?? '/';
}
echo '<option value="'
. $album->uid
. '"'
. $selected
. 'data-url='
. ($album->getUrlPath() ?? '/')
. '>'
. $album->title
. '</option>\n';
}
$album_url = "https://photos.phlaym.net{$album_url}";
?>
2021-08-26 07:47:56 +00:00
</select>
2021-08-26 08:56:59 +00:00
<input multiple type="file" name="files[]" id="input" required/>
2021-08-26 07:47:56 +00:00
<input type="submit" name="submit" value="Upload" />
</form>
2021-11-26 19:43:53 +00:00
<div id="error"></div>
<label for="fileProgress">Datei:</label>
<progress id="fileProgress"></progress>
<label for="totalProgress">Gesamt:</label>
<progress max="0" value="0" id="totalProgress"></progress>
<a href="<?=$album_url;?>" target="_blank" id="viewAlbum">Album ansehen</a>
2021-08-26 07:47:56 +00:00
</div>
2021-08-24 17:59:30 +00:00
<script>
2021-11-27 07:01:15 +00:00
window.tooLarge = false;
window.tooManyFiles = false;
2021-11-26 19:43:53 +00:00
const form = document.getElementById('uploadForm');
const submitButton = form.querySelector('input[type=submit]');
const albumInput = form.querySelector('select[name=album]');
const input = document.getElementById('input');
const fileProgress = document.getElementById('fileProgress');
const totalProgress = document.getElementById('totalProgress');
const fileProgressLabel = document.querySelector('label[for=fileProgress]');
const totalProgressLabel = document.querySelector('label[for=totalProgress]');
const errorDiv = document.getElementById('error');
const albumAnchor = document.getElementById('viewAlbum');
2021-11-26 19:43:53 +00:00
async function postData(url, data = {}, method = 'POST') {
const response = await fetch(url, {
method: method,
body: data
});
return response;
}
2021-11-27 12:05:26 +00:00
function validateFileType(file) {
if (file.type && (file.type.startsWith('image/') || file.type.startsWith('video/'))) {
return true;
}
const parts = file.name.split('.');
const extension = parts.length > 0 ? parts[parts.length-1] : '';
if (['jpg', 'jpeg', 'png', 'heic', 'heif', 'mov', 'mp4', 'mkv'].includes(extension)) {
return true;
}
console.warn('Invalid file type', extension);
return false;
}
albumInput.addEventListener('change', (event) => {
console.log(event);
albumAnchor.href = `https://photos.phlaym.net${albumInput.selectedOptions[0].dataset.url}`;
});
2021-11-26 19:43:53 +00:00
form.addEventListener('submit', async function(event) {
event.preventDefault();
2021-11-27 07:01:15 +00:00
const isInvalid = window.tooLarge || window.tooManyFiles;
if (isInvalid) {
console.error('Aborting upload! Too many fiels or fiels too large');
return;
}
2021-11-26 19:43:53 +00:00
errorDiv.innerText = '';
fileProgressLabel.style.display = 'inherit';
totalProgressLabel.style.display = 'inherit';
fileProgress.style.display = 'inherit';
totalProgress.style.display = 'inherit';
let idx = 0;
for (file of fileList) {
console.log('Starting upload', file);
fileProgressLabel.innerText = `Datei: ${file.name}`
totalProgressLabel.innerText = `Gesamt: ${idx} von ${fileList.length} fertig`;
totalProgress.value = idx++;
let formData = new FormData();
formData.set(input.name, file);
formData.set(submitButton.name, submitButton.value);
formData.set(albumInput.name, albumInput.value);
try {
let resp = await postData(form.action, formData, form.method);
} catch(e) {
console.error('Error uploading file', e);
errorDiv.innerHTML += `Fehler beim Upload der Datei ${file.name}: ${e}<br />`;
errorDiv.style.display = 'block';
}
}
totalProgressLabel.innerText = `Gesamt: ${idx} von ${fileList.length} fertig`;
totalProgress.value = idx++;
fileProgress.max = 1;
fileProgress.value = 1;
});
2021-08-24 17:59:30 +00:00
2021-11-26 19:43:53 +00:00
let fileList = [];
2021-08-24 17:59:30 +00:00
input.addEventListener('change', (event) => {
2021-11-27 07:01:15 +00:00
const maxFileSize = <?=$config['fileUploadLimitMb'];?>;
const maxAmountOfFiles = <?=$config['maximumNumberOfFilesPerUpload'];?>;
2021-08-24 17:59:30 +00:00
const errorDiv = document.getElementById('error');
2021-11-26 19:43:53 +00:00
const totalProgress = document.getElementById('totalProgress');
2021-11-27 07:01:15 +00:00
2021-08-24 17:59:30 +00:00
errorDiv.innerText = '';
errorDiv.style.display = 'none';
2021-11-27 07:01:15 +00:00
submitButton.disabled = false;
2021-08-24 17:59:30 +00:00
const target = event.target;
2021-11-26 19:43:53 +00:00
fileList = [];
2021-11-27 07:01:15 +00:00
const filesTooLarge = [];
2021-08-24 17:59:30 +00:00
if (target.files) {
for (file of target.files) {
2021-11-27 07:01:15 +00:00
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);
2021-11-27 12:05:26 +00:00
} else if(validateFileType(file)) {
fileList.push(file);
2021-11-27 07:01:15 +00:00
}
2021-11-27 12:05:26 +00:00
2021-08-24 17:59:30 +00:00
}
}
2021-11-26 19:43:53 +00:00
totalProgress.max = fileList.length;
2021-11-27 07:01:15 +00:00
window.tooManyFiles = fileList.length > maxAmountOfFiles;
if (window.tooManyFiles) {
errorDiv.style.display = 'block';
2021-11-27 09:59:29 +00:00
errorDiv.innerHTML += ```
Das sind zu viele Dateien, du darfst max.
${maxAmountOfFiles} Dateien gleichzeitig hochladen. ```;
2021-11-27 07:01:15 +00:00
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';
2021-11-27 09:59:29 +00:00
const pluralizedMessage = filesTooLarge.length > 1
? 'Die folgenden Dateien sind'
: 'Die folgende Datei ist';
errorDiv.innerHTML += ```
2021-11-27 12:05:26 +00:00
${pluralizedMessage} zu groß und wird beim Upload ignoriert: ${names}.
2021-11-27 09:59:29 +00:00
Jede Datei darf max. ${maxFileSize} MB groß sein.```;
2021-11-27 12:05:26 +00:00
}
if (!fileList.length) {
2021-11-27 07:01:15 +00:00
submitButton.disabled = true;
errorDiv.style.display = 'block';
2021-11-27 12:05:26 +00:00
errorDiv.innerHTML += 'Keine gültigen Bilder oder Videos gefunden';
2021-11-27 07:01:15 +00:00
}
2021-08-24 17:59:30 +00:00
});
</script>
<?php
2021-11-27 07:55:20 +00:00
die($footer . '</body></html>');
2021-08-24 17:59:30 +00:00
}
try {
2021-08-26 07:47:56 +00:00
$api->uploadPhotos($_POST['album']);
2021-08-24 17:59:30 +00:00
} catch (\Exception $e) {
2021-11-27 07:55:20 +00:00
die('Fehler: ' . $footer . $e->getMessage() .'</body></html>');
2021-08-24 17:59:30 +00:00
}
2021-08-26 07:47:56 +00:00
?>
Erfolg! <a href=".">Zurück</a>
2021-11-26 19:43:53 +00:00
</body></html>