Compare commits
4 Commits
56127a16a0
...
f5a6345e52
| Author | SHA1 | Date | |
|---|---|---|---|
f5a6345e52
|
|||
|
999c77a17d
|
|||
|
916ff31029
|
|||
|
75d98dbf52
|
133
index.php
133
index.php
@ -3,11 +3,36 @@ session_start();
|
||||
require __DIR__ . '/vendor/autoload.php';
|
||||
|
||||
use PhotoPrismUpload\API\PhotoPrism;
|
||||
|
||||
$footer = '<footer style="position: fixed;bottom: 0;left: 0;"><a href="/git/phlaym/photoprismupload">Ich bin Open Source</a></footer>';
|
||||
?>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<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">
|
||||
<meta http-equiv=”content-language” content=”de-de”/>
|
||||
<style>
|
||||
::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;
|
||||
}
|
||||
a {
|
||||
color: rgb(105, 105, 242);
|
||||
}
|
||||
a:visited {
|
||||
color: rgb(152, 95, 215);
|
||||
}
|
||||
}
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto;
|
||||
@ -30,9 +55,37 @@ use PhotoPrismUpload\API\PhotoPrism;
|
||||
display: inherit;
|
||||
}
|
||||
input[type=submit] {
|
||||
grid-column: 1/3;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
justify-self: center;
|
||||
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;
|
||||
}
|
||||
label[for="fileProgress"] {
|
||||
grid-row: 3;
|
||||
}
|
||||
#fileProgress {
|
||||
grid-row: 4;
|
||||
width: 100%;
|
||||
}
|
||||
label[for="totalProgress"]{
|
||||
grid-row: 5;
|
||||
}
|
||||
#totalProgress {
|
||||
grid-row: 6;
|
||||
width: 100%;
|
||||
}
|
||||
footer {
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -70,7 +123,7 @@ if (!isset($_POST['submit'])) {
|
||||
const isInvalid = window.tooLarge || window.tooManyFiles;
|
||||
console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid);
|
||||
if (isInvalid) {
|
||||
const errorDiv = document.getElementById('error');m
|
||||
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. ' : '';
|
||||
@ -80,7 +133,8 @@ if (!isset($_POST['submit'])) {
|
||||
}
|
||||
</script>
|
||||
<div class="form-wrapper">
|
||||
<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();">
|
||||
<!--<form method="POST" enctype="multipart/form-data" onsubmit="return validateForm();" id="uploadForm"> !-->
|
||||
<form method="POST" enctype="multipart/form-data" id="uploadForm">
|
||||
<label for="album">Zu Album hinzufügen</label>
|
||||
<select name="album" id="album">
|
||||
<option value="">---</option>
|
||||
@ -93,23 +147,84 @@ if (!isset($_POST['submit'])) {
|
||||
<input multiple type="file" name="files[]" id="input" required/>
|
||||
<input type="submit" name="submit" value="Upload" />
|
||||
</form>
|
||||
<div id="error" style="display:none"></div>
|
||||
<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>
|
||||
</div>
|
||||
<script>
|
||||
const input = document.getElementById('input')
|
||||
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();
|
||||
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;
|
||||
});
|
||||
|
||||
|
||||
let fileList = [];
|
||||
input.addEventListener('change', (event) => {
|
||||
const errorDiv = document.getElementById('error');
|
||||
const totalProgress = document.getElementById('totalProgress');
|
||||
errorDiv.innerText = '';
|
||||
errorDiv.style.display = 'none';
|
||||
|
||||
const target = event.target;
|
||||
let totalSize = 0;
|
||||
fileList = [];
|
||||
if (target.files) {
|
||||
for (file of target.files) {
|
||||
totalSize += file.size;
|
||||
fileList.push(file);
|
||||
}
|
||||
}
|
||||
totalProgress.max = fileList.length;
|
||||
const sizeInMb = totalSize / 1000 / 1000;
|
||||
window.tooLarge = sizeInMb >= 200;
|
||||
console.log('Total size:', totalSize, 'too large: ', window.tooLarge);
|
||||
@ -118,7 +233,7 @@ if (!isset($_POST['submit'])) {
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
die('</body></html>');
|
||||
die($footer.'</body></html>');
|
||||
}
|
||||
try {
|
||||
$api->uploadPhotos($_POST['album']);
|
||||
@ -127,4 +242,4 @@ try {
|
||||
}
|
||||
?>
|
||||
Erfolg! <a href=".">Zurück</a>
|
||||
</body></html>
|
||||
</body></html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user