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

upload.html

@@ -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 {

upload_backend.php

@@ -36,10 +36,48 @@ if ($mimeType !== 'image/png') {
     exit;
 }
 
-// Generate unique filename
+$rawFrameName = isset($_POST['frame_name']) ? trim($_POST['frame_name']) : '';
-$filename = uniqid('frame_') . '_' . time() . '.png';
+$frameName = preg_replace('/[^a-z0-9_]/', '', strtolower($rawFrameName));
+
+if (empty($frameName)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Ungültiger oder fehlender Frame-Name.']);
+    exit;
+}
+
+$filename = 'frame_' . $frameName . '.png';
 $destination = $uploadDir . $filename;
 
+// Check local uniqueness (already uploaded via web)
+if (file_exists($destination)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Ein Rahmen mit diesem Namen existiert bereits auf dem Server. Bitte wähle einen anderen.']);
+    exit;
+}
+
+// Check Gitea uniqueness
+$giteaUrl = 'https://git.orfel.de/api/v1/repos/Jannik/Schnappix/contents/assets/frames';
+$chGitea = curl_init($giteaUrl);
+curl_setopt($chGitea, CURLOPT_RETURNTRANSFER, true);
+curl_setopt($chGitea, CURLOPT_TIMEOUT, 5);
+curl_setopt($chGitea, CURLOPT_HTTPHEADER, ['User-Agent: Schnappix-Web Backend']);
+$giteaResponse = curl_exec($chGitea);
+$giteaCode = curl_getinfo($chGitea, CURLINFO_HTTP_CODE);
+curl_close($chGitea);
+
+if ($giteaCode === 200 && $giteaResponse) {
+    $framesData = json_decode($giteaResponse, true);
+    if (is_array($framesData)) {
+        foreach ($framesData as $frameFile) {
+            if (isset($frameFile['name']) && strtolower($frameFile['name']) === strtolower($filename)) {
+                http_response_code(400);
+                echo json_encode(['error' => 'Ein Rahmen mit diesem Namen existiert bereits in der App. Bitte wähle einen anderen.']);
+                exit;
+            }
+        }
+    }
+}
+
 // Move uploaded file
 if (move_uploaded_file($file['tmp_name'], $destination)) {
     // Build public URL
@@ -50,7 +88,7 @@ if (move_uploaded_file($file['tmp_name'], $destination)) {
 
     // Send notification to Ntfy
     $ntfyUrl = 'https://ntfy.orfel.de/Schnappix-Frame-Upload';
-    $message = "Ein neuer Rahmen wurde hochgeladen!\n\nVon: $email\nBild-URL: $publicUrl";
+    $message = "Ein neuer Rahmen wurde hochgeladen!\n\nName: $filename\nVon: $email\nBild-URL: $publicUrl";
 
     $ch = curl_init($ntfyUrl);
     curl_setopt($ch, CURLOPT_POST, 1);