Jannik/Schnappix-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add frame name input and uniqueness validation via gitea api

Browse Source
This commit is contained in:
Jannik
2026-07-05 10:55:29 +02:00
parent ed9f0d058c
commit 401737ac76
2 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
upload.html
+21
View File
@@ -184,6 +184,12 @@
<input type="file" id="file-input" name="background_image" accept="image/png" required>
</div>
<div class="form-group" style="text-align: left; display: none;" id="frame-info">
<label for="frame-name">Name des Rahmens (nur Kleinbuchstaben & Zahlen)</label>
<input type="text" id="frame-name" name="frame_name" pattern="[a-z0-9_]+" placeholder="z.B. summer1" required>
<div class="upload-hint" style="margin-top: 5px;">Wird gespeichert als: <strong style="color: var(--primary-color);">frame_<span id="frame-preview-name">...</span>.png</strong></div>
</div>
<div class="form-group" style="text-align: left; display: none;" id="customer-info">
<label for="customer-email">Deine E-Mail Adresse (für Rückfragen)</label>
<input type="email" id="customer-email" name="email" placeholder="mail@example.com" required>
@@ -245,8 +251,17 @@
const previewBox = document.getElementById('preview-box');
const imagePreview = document.getElementById('image-preview');
const submitBtn = document.getElementById('submit-btn');
const frameInfo = document.getElementById('frame-info');
const frameNameInput = document.getElementById('frame-name');
const framePreviewName = document.getElementById('frame-preview-name');
const customerInfo = document.getElementById('customer-info');
frameNameInput.addEventListener('input', (e) => {
const val = e.target.value.trim().toLowerCase().replace(/[^a-z0-9_]/g, '');
e.target.value = val;
framePreviewName.textContent = val || '...';
});
// Drag and Drop Effects
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, preventDefaults, false);
@@ -295,6 +310,7 @@
validationBox.style.display = 'block';
previewBox.style.display = 'none';
submitBtn.style.display = 'none';
frameInfo.style.display = 'none';
customerInfo.style.display = 'none';
valFormat.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i> Überprüfe Dateiformat...`;
@@ -327,6 +343,7 @@
// Show Preview and Submit Button
imagePreview.src = e.target.result;
previewBox.style.display = 'block';
frameInfo.style.display = 'block';
customerInfo.style.display = 'block';
submitBtn.style.display = 'block';
} else {
@@ -364,8 +381,10 @@
console.error('Server antwortete nicht mit gültigem JSON:', responseText);
alert('Ein Server-Fehler ist aufgetreten (siehe Konsole). Das Bild wurde eventuell trotzdem hochgeladen.');
form.reset();
framePreviewName.textContent = '...';
previewBox.style.display = 'none';
submitBtn.style.display = 'none';
frameInfo.style.display = 'none';
customerInfo.style.display = 'none';
validationBox.style.display = 'none';
return;
@@ -374,8 +393,10 @@
if (response.ok) {
alert('Erfolgreich hochgeladen!');
form.reset();
framePreviewName.textContent = '...';
previewBox.style.display = 'none';
submitBtn.style.display = 'none';
frameInfo.style.display = 'none';
customerInfo.style.display = 'none';
validationBox.style.display = 'none';
} else {