phlaym/photoprismupload
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases 1 Wiki Activity

Compare commits

base: phlaym:56127a16a0574aa57a2f2652b5f0d8b024102f61
Branches Tags
phlaym:main
phlaym:v1.1.0
phlaym:1.0.1
phlaym:v1.0.1
...
compare: phlaym:f5a6345e526a7575a1b35f4457546a1a2447264f
Branches Tags
phlaym:v1.1.0
phlaym:main
phlaym:1.0.1
phlaym:v1.0.1

4 Commits
56127a16a0 ... f5a6345e52

Author SHA1 Message Date
Max Nuding
f5a6345e52
Added language meta tag 2021-11-26 21:15:31 +01:00
Max Nuding
999c77a17d
Added meta tags 2021-11-26 21:02:49 +01:00
Max Nuding
916ff31029
Dark mdoe 2021-11-26 20:57:46 +01:00
Max Nuding
75d98dbf52
Sequential file upload 2021-11-26 20:43:53 +01:00
1 changed files with 124 additions and 9 deletions
Show Stats Expand all files Collapse all files

131
index.php
View File

@ -3,11 +3,36 @@ session_start();
require __DIR__ . '/vendor/autoload.php'; require __DIR__ . '/vendor/autoload.php';
use PhotoPrismUpload\API\PhotoPrism; 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> <html>
<head> <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> <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 { .form-wrapper {
display: grid; display: grid;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
@ -30,9 +55,37 @@ use PhotoPrismUpload\API\PhotoPrism;
display: inherit; display: inherit;
} }
input[type=submit] { input[type=submit] {
grid-column: 1/3; grid-column: 2;
grid-row: 3; 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> </style>
</head> </head>
@ -70,7 +123,7 @@ if (!isset($_POST['submit'])) {
const isInvalid = window.tooLarge || window.tooManyFiles; const isInvalid = window.tooLarge || window.tooManyFiles;
console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid); console.log('Validating', window.tooLarge, window.tooManyFiles, isInvalid);
if (isInvalid) { if (isInvalid) {
const errorDiv = document.getElementById('error');m const errorDiv = document.getElementById('error');
errorDiv.innerText = ''; errorDiv.innerText = '';
errorDiv.innerText += window.tooLarge ? 'Zu groß, Upload muss weniger als 200MB sein. ' : ''; errorDiv.innerText += window.tooLarge ? 'Zu groß, Upload muss weniger als 200MB sein. ' : '';
errorDiv.innerText += window.tooManyFiles ? 'Zu viele Dateien, maximal 200 erlaubt. ' : ''; errorDiv.innerText += window.tooManyFiles ? 'Zu viele Dateien, maximal 200 erlaubt. ' : '';
@ -80,7 +133,8 @@ if (!isset($_POST['submit'])) {
} }
</script> </script>
<div class="form-wrapper"> <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> <label for="album">Zu Album hinzufügen</label>
<select name="album" id="album"> <select name="album" id="album">
<option value="">---</option> <option value="">---</option>
@ -93,23 +147,84 @@ if (!isset($_POST['submit'])) {
<input multiple type="file" name="files[]" id="input" required/> <input multiple type="file" name="files[]" id="input" required/>
<input type="submit" name="submit" value="Upload" /> <input type="submit" name="submit" value="Upload" />
</form> </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> </div>
<script> <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) => { input.addEventListener('change', (event) => {
const errorDiv = document.getElementById('error'); const errorDiv = document.getElementById('error');
const totalProgress = document.getElementById('totalProgress');
errorDiv.innerText = ''; errorDiv.innerText = '';
errorDiv.style.display = 'none'; errorDiv.style.display = 'none';
const target = event.target; const target = event.target;
let totalSize = 0; let totalSize = 0;
fileList = [];
if (target.files) { if (target.files) {
for (file of target.files) { for (file of target.files) {
totalSize += file.size; totalSize += file.size;
fileList.push(file);
} }
} }
totalProgress.max = fileList.length;
const sizeInMb = totalSize / 1000 / 1000; const sizeInMb = totalSize / 1000 / 1000;
window.tooLarge = sizeInMb >= 200; window.tooLarge = sizeInMb >= 200;
console.log('Total size:', totalSize, 'too large: ', window.tooLarge); console.log('Total size:', totalSize, 'too large: ', window.tooLarge);
@ -118,7 +233,7 @@ if (!isset($_POST['submit'])) {
}); });
</script> </script>
<?php <?php
die('</body></html>'); die($footer.'</body></html>');
} }
try { try {
$api->uploadPhotos($_POST['album']); $api->uploadPhotos($_POST['album']);