289 lines
9.7 KiB
C++
289 lines
9.7 KiB
C++
#include "Web_Server.h"
|
|
#include <WiFi.h>
|
|
#include <WebServer.h>
|
|
#include "SD_Card.h"
|
|
#include "Display_PNG.h"
|
|
#include "Audio_Player.h"
|
|
|
|
WebServer server(80);
|
|
File uploadFile;
|
|
bool uploadSuccess = false;
|
|
String uploadedFilename = "";
|
|
|
|
const char* uploadPage = R"rawliteral(
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="UTF-8">
|
|
<title>Photo Frame Upload</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
|
color: #f1f5f9;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
.card {
|
|
background: rgba(255,255,255,0.07);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
border-radius: 20px;
|
|
padding: 36px 32px;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
}
|
|
.logo { font-size: 32px; margin-bottom: 4px; text-align: center; }
|
|
h1 { font-size: 22px; font-weight: 600; text-align: center; color: #e2e8f0; margin-bottom: 6px; }
|
|
.subtitle { font-size: 13px; color: #94a3b8; text-align: center; margin-bottom: 28px; }
|
|
.drop-zone {
|
|
border: 2px dashed rgba(139,92,246,0.5);
|
|
border-radius: 12px;
|
|
padding: 32px 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-bottom: 16px;
|
|
background: rgba(139,92,246,0.05);
|
|
}
|
|
.drop-zone:hover, .drop-zone.dragover {
|
|
border-color: #8b5cf6;
|
|
background: rgba(139,92,246,0.12);
|
|
}
|
|
.drop-icon { font-size: 36px; margin-bottom: 8px; }
|
|
.drop-text { font-size: 14px; color: #94a3b8; }
|
|
.drop-text span { color: #a78bfa; font-weight: 500; cursor: pointer; }
|
|
input[type="file"] { display: none; }
|
|
.file-name {
|
|
font-size: 13px;
|
|
color: #a78bfa;
|
|
text-align: center;
|
|
min-height: 20px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
button:hover { opacity: 0.9; transform: translateY(-1px); }
|
|
button:active { transform: translateY(0); }
|
|
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
|
.hint { font-size: 11px; color: #64748b; text-align: center; margin-top: 14px; }
|
|
.toast {
|
|
border-radius: 10px;
|
|
padding: 12px 16px;
|
|
margin-bottom: 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.toast.success { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; }
|
|
.toast.error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #f87171; }
|
|
.progress { display: none; margin-top: 14px; }
|
|
.progress-bar {
|
|
height: 4px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 99px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #7c3aed, #a855f7);
|
|
border-radius: 99px;
|
|
width: 0%;
|
|
transition: width 0.3s;
|
|
}
|
|
.progress-text { font-size: 12px; color: #94a3b8; text-align: center; margin-top: 6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="logo">🖼️</div>
|
|
<h1>Photo Frame</h1>
|
|
<p class="subtitle">Upload media to the SD card wirelessly</p>
|
|
|
|
%TOAST%
|
|
|
|
<form method="POST" action="/upload" enctype="multipart/form-data" id="uploadForm">
|
|
<div class="drop-zone" id="dropZone" onclick="document.getElementById('file').click()">
|
|
<div class="drop-icon">📁</div>
|
|
<div class="drop-text">Drop a file here or <span>browse</span></div>
|
|
<input type="file" id="file" name="file" accept=".png,.mp3,.wav" onchange="onFileSelected(this)">
|
|
</div>
|
|
<div class="file-name" id="fileName">No file selected</div>
|
|
<button type="submit" id="uploadBtn" disabled>Upload to Frame</button>
|
|
<div class="progress" id="progress">
|
|
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
|
|
<div class="progress-text" id="progressText">Uploading...</div>
|
|
</div>
|
|
</form>
|
|
<p class="hint">Accepted: .png (172x320) · .mp3 · .wav</p>
|
|
</div>
|
|
|
|
<script>
|
|
const dropZone = document.getElementById('dropZone');
|
|
const uploadBtn = document.getElementById('uploadBtn');
|
|
const fileName = document.getElementById('fileName');
|
|
const form = document.getElementById('uploadForm');
|
|
const progress = document.getElementById('progress');
|
|
const progressFill = document.getElementById('progressFill');
|
|
const progressText = document.getElementById('progressText');
|
|
|
|
function onFileSelected(input) {
|
|
if (input.files.length > 0) {
|
|
fileName.textContent = input.files[0].name;
|
|
uploadBtn.disabled = false;
|
|
} else {
|
|
fileName.textContent = 'No file selected';
|
|
uploadBtn.disabled = true;
|
|
}
|
|
}
|
|
|
|
dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
|
|
dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('dragover'); });
|
|
dropZone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('dragover');
|
|
var dt = e.dataTransfer;
|
|
if (dt.files.length > 0) {
|
|
document.getElementById('file').files = dt.files;
|
|
onFileSelected(document.getElementById('file'));
|
|
}
|
|
});
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
var file = document.getElementById('file').files[0];
|
|
if (!file) return;
|
|
var formData = new FormData(form);
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/upload');
|
|
xhr.upload.addEventListener('progress', function(e) {
|
|
if (e.lengthComputable) {
|
|
var pct = Math.round((e.loaded / e.total) * 100);
|
|
progressFill.style.width = pct + '%';
|
|
progressText.textContent = 'Uploading... ' + pct + '%';
|
|
}
|
|
});
|
|
xhr.onload = function() {
|
|
var ok = xhr.status === 200 || xhr.status === 303;
|
|
window.location.href = '/?status=' + (ok ? 'ok&file=' + encodeURIComponent(file.name) : 'fail');
|
|
};
|
|
xhr.onerror = function() { window.location.href = '/?status=fail'; };
|
|
progress.style.display = 'block';
|
|
uploadBtn.disabled = true;
|
|
uploadBtn.textContent = 'Uploading...';
|
|
xhr.send(formData);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)rawliteral";
|
|
|
|
static bool isAllowedExtension(const String& filename) {
|
|
String lower = filename;
|
|
lower.toLowerCase();
|
|
return lower.endsWith(".png") || lower.endsWith(".mp3") || lower.endsWith(".wav");
|
|
}
|
|
|
|
void handleUpload() {
|
|
HTTPUpload& upload = server.upload();
|
|
if (upload.status == UPLOAD_FILE_START) {
|
|
String filename = upload.filename;
|
|
if (!filename.startsWith("/")) filename = "/" + filename;
|
|
|
|
// Reject files that are not PNG, MP3, or WAV
|
|
if (!isAllowedExtension(filename)) {
|
|
printf("WebUpload: Rejected non-media file: %s\r\n", filename.c_str());
|
|
uploadSuccess = false;
|
|
return;
|
|
}
|
|
|
|
printf("WebUpload: Starting upload of %s\r\n", filename.c_str());
|
|
uploadedFilename = filename;
|
|
uploadFile = SD_MMC.open(filename, "w");
|
|
uploadSuccess = (bool)uploadFile;
|
|
}
|
|
else if (upload.status == UPLOAD_FILE_WRITE) {
|
|
if (uploadFile) {
|
|
uploadFile.write(upload.buf, upload.currentSize);
|
|
}
|
|
}
|
|
else if (upload.status == UPLOAD_FILE_END) {
|
|
if (uploadFile) {
|
|
uploadFile.close();
|
|
printf("WebUpload: Successfully uploaded %s (%d bytes)\r\n", upload.filename.c_str(), upload.totalSize);
|
|
uploadSuccess = true;
|
|
// Re-scan SD card to index the new file
|
|
Search_Images("/");
|
|
Search_Audio("/");
|
|
} else {
|
|
uploadSuccess = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
static String buildPage(const String& status, const String& file) {
|
|
String toast = "";
|
|
if (status == "ok") {
|
|
String safeName = file;
|
|
safeName.replace("<", "<");
|
|
safeName.replace(">", ">");
|
|
toast = "<div class=\"toast success\">✅ <span>\"" + safeName + "\" uploaded successfully!</span></div>";
|
|
} else if (status == "fail") {
|
|
toast = "<div class=\"toast error\">❌ <span>Upload failed. Only .png, .mp3 and .wav files are accepted.</span></div>";
|
|
}
|
|
String page = String(uploadPage);
|
|
page.replace("%TOAST%", toast);
|
|
return page;
|
|
}
|
|
|
|
void initWebServer() {
|
|
WiFi.softAP("love", "love");
|
|
IPAddress IP = WiFi.softAPIP();
|
|
printf("WiFi AP Started. SSID: 'love' Password: 'love'\r\n");
|
|
printf("Web Server IP: %s\r\n", IP.toString().c_str());
|
|
|
|
server.on("/", HTTP_GET, []() {
|
|
String status = server.hasArg("status") ? server.arg("status") : "";
|
|
String file = server.hasArg("file") ? server.arg("file") : "";
|
|
server.send(200, "text/html", buildPage(status, file));
|
|
});
|
|
|
|
server.on("/upload", HTTP_POST, []() {
|
|
String loc = uploadSuccess
|
|
? "/?status=ok&file=" + uploadedFilename
|
|
: "/?status=fail";
|
|
server.sendHeader("Location", loc);
|
|
server.send(303);
|
|
}, handleUpload);
|
|
|
|
server.begin();
|
|
}
|
|
|
|
void handleWebServer() {
|
|
server.handleClient();
|
|
}
|