2021-08-24 17:59:30 +00:00
|
|
|
<?php
|
|
|
|
|
session_start();
|
|
|
|
|
require __DIR__ . '/vendor/autoload.php';
|
|
|
|
|
|
|
|
|
|
use PhotoPrismUpload\API\PhotoPrism;
|
2021-11-26 20:15:31 +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;
|
|
|
|
|
}
|
|
|
|
|
#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;
|
|
|
|
|
}
|
|
|
|
|
#error, #fileProgress, #totalProgress, label[for="fileProgress"], label[for="totalProgress"] {
|
|
|
|
|
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
|
|
|
}
|
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>
|
2021-11-26 16:44:38 +00:00
|
|
|
<body>
|
2021-08-24 17:59:30 +00:00
|
|
|
<?php
|
|
|
|
|
|
2021-08-26 07:47:56 +00:00
|
|
|
$config = require(__DIR__ . '/config.php');
|
|
|
|
|
$api = new PhotoPrism($config);
|
|
|
|
|
$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
|
|
|
}
|
|
|
|
|
$token = $_GET['token'];
|
|
|
|
|
$tokens = explode(',', $token);
|
|
|
|
|
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" onsubmit="return validateForm();" id="uploadForm"> !-->
|
|
|
|
|
<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="">---</option>
|
|
|
|
|
<?php foreach ($albums as $album) {
|
|
|
|
|
echo '<option value="' . $album->uid . '">' . $album->title . '</option>\n';
|
|
|
|
|
} ?>
|
|
|
|
|
</select>
|
|
|
|
|
<!--<label></label>
|
|
|
|
|
<input type="text" />!-->
|
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>
|
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');
|
|
|
|
|
|
|
|
|
|
async function postData(url, data = {}, method = 'POST') {
|
|
|
|
|
const response = await fetch(url, {
|
|
|
|
|
method: method,
|
|
|
|
|
body: data
|
|
|
|
|
});
|
|
|
|
|
return response;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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-26 19:43:53 +00:00
|
|
|
fileList.push(file);
|
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';
|
|
|
|
|
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;
|
|
|
|
|
}
|
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
|
|
|
?>
|
2021-11-26 16:44:38 +00:00
|
|
|
Erfolg! <a href=".">Zurück</a>
|
2021-11-26 19:43:53 +00:00
|
|
|
</body></html>
|
