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

feat: migrate frame upload to php backend and ntfy

Browse Source
This commit is contained in:
Jannik
2026-07-05 10:04:34 +02:00
parent a88a93a611
commit e443507feb
2 changed files with 112 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
upload.html
+36 -15
View File
@@ -175,14 +175,7 @@
<p style="color: var(--text-muted); font-size: 15px;">Lade dein eigenes PNG hoch. Es wird uns per E-Mail gesendet und wir binden es in deine App ein.</p>
<!-- FormSubmit.co is used to send the email directly with attachment without a backend -->
<!-- The user needs to change the email below -->
<form id="bg-upload-form" action="https://formsubmit.co/jannik.schnappix@gmail.com" method="POST" enctype="multipart/form-data">
<!-- FormSubmit Configuration -->
<input type="hidden" name="_subject" value="Neuer Schnappix Hintergrund Upload!">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<!-- Optional: Redirect after success. We use standard submission for now. -->
<form id="bg-upload-form">
<div class="upload-area" id="drop-zone">
<i class="fa-solid fa-cloud-arrow-up upload-icon"></i>
@@ -209,10 +202,6 @@
<button type="submit" class="btn btn-primary btn-block" id="submit-btn">
<i class="fa-solid fa-paper-plane" style="margin-right: 8px;"></i> Hintergrund absenden
</button>
<p class="email-info" id="email-info">
<i class="fa-solid fa-info-circle"></i> Hinweis für den Webmaster: Ändere die E-Mail-Adresse im <code>action</code>-Attribut des Formulars in der <code>upload.html</code>, um die Dateien an deine eigene Adresse zu senden.
</p>
</form>
</div>
</div>
@@ -257,7 +246,6 @@
const imagePreview = document.getElementById('image-preview');
const submitBtn = document.getElementById('submit-btn');
const customerInfo = document.getElementById('customer-info');
const emailInfo = document.getElementById('email-info');
// Drag and Drop Effects
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
@@ -308,7 +296,6 @@
previewBox.style.display = 'none';
submitBtn.style.display = 'none';
customerInfo.style.display = 'none';
emailInfo.style.display = 'none';
valFormat.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i> Überprüfe Dateiformat...`;
valFormat.className = '';
@@ -342,7 +329,6 @@
previewBox.style.display = 'block';
customerInfo.style.display = 'block';
submitBtn.style.display = 'block';
emailInfo.style.display = 'block';
} else {
setValidationMsg(valResolution, false, '', `Fehler: Falsche Auflösung (${width}x${height}px). Erwartet: 1500x1000px.`);
}
@@ -354,6 +340,41 @@
};
reader.readAsDataURL(file);
}
const form = document.getElementById('bg-upload-form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const originalBtnText = submitBtn.innerHTML;
submitBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Lade hoch...';
submitBtn.disabled = true;
try {
const response = await fetch('upload_backend.php', {
method: 'POST',
body: formData
});
const result = await response.json();
if (response.ok) {
alert('Erfolgreich hochgeladen!');
form.reset();
previewBox.style.display = 'none';
submitBtn.style.display = 'none';
customerInfo.style.display = 'none';
validationBox.style.display = 'none';
} else {
alert('Fehler: ' + (result.error || 'Unbekannter Fehler'));
}
} catch (error) {
alert('Upload fehlgeschlagen. Bitte prüfe deine Verbindung.');
} finally {
submitBtn.innerHTML = originalBtnText;
submitBtn.disabled = false;
}
});
});
</script>
</body>