Fix upload page to split html

This commit is contained in:
2025-07-17 18:21:34 -06:00
parent c163389160
commit c4db3cbadc

View File

@ -21,8 +21,47 @@
static const char *TAG = "OTA_SERVER";
// HTML page for OTA update
static const char *ota_html =
// Server handle
static httpd_handle_t s_server = NULL;
// OTA state
static ota_state_t s_ota_state = OTA_STATE_IDLE;
// Progress callback
static ota_progress_callback_t s_progress_callback = NULL;
// Version string
static char s_version[32] = "1.0.0";
// OTA handle
static esp_ota_handle_t s_ota_handle = 0;
static const esp_partition_t *s_update_partition = NULL;
static int s_binary_file_length = 0;
static bool s_ota_ongoing = false;
static esp_err_t index_handler(httpd_req_t *req)
{
const esp_partition_t *running = esp_ota_get_running_partition();
uint32_t free_space = 0;
// Calculate free OTA space
esp_partition_iterator_t it = esp_partition_find(ESP_PARTITION_TYPE_APP, ESP_PARTITION_SUBTYPE_ANY, NULL);
while (it != NULL) {
const esp_partition_t *p = esp_partition_get(it);
if (p != running && p->subtype >= ESP_PARTITION_SUBTYPE_APP_OTA_0 &&
p->subtype <= ESP_PARTITION_SUBTYPE_APP_OTA_15) {
free_space = p->size;
break;
}
it = esp_partition_next(it);
}
esp_partition_iterator_release(it);
// Send response in chunks
httpd_resp_set_type(req, "text/html");
// Part 1: HTML head and styles
const char *html_part1 =
"<!DOCTYPE html>"
"<html>"
"<head>"
@ -49,11 +88,22 @@ static const char *ota_html =
"</head>"
"<body>"
"<div class='container'>"
"<h1>ESP32 OTA Update</h1>"
"<h1>ESP32 OTA Update</h1>";
httpd_resp_send_chunk(req, html_part1, strlen(html_part1));
// Part 2: Info section with dynamic content
char info_buf[256];
snprintf(info_buf, sizeof(info_buf),
"<div class='info'>"
"<strong>Current Version:</strong> <span id='version'>%s</span><br>"
"<strong>Free Space:</strong> <span id='free-space'>%u KB</span>"
"</div>"
"<strong>Free Space:</strong> <span id='free-space'>%lu KB</span>"
"</div>", s_version, (unsigned long)(free_space / 1024));
httpd_resp_send_chunk(req, info_buf, strlen(info_buf));
// Part 3: Upload area
const char *html_part3 =
"<div class='upload-area' id='upload-area'>"
"<p>Drag and drop firmware file here or click to select</p>"
"<input type='file' id='file' accept='.bin'>"
@ -62,10 +112,15 @@ static const char *ota_html =
"</div>"
"<button class='btn' id='upload-btn' onclick='uploadFirmware()' disabled>Upload Firmware</button>"
"<div class='progress' id='progress'>"
"<div class='progress-bar' id='progress-bar'>0%%</div>"
"<div class='progress-bar' id='progress-bar'>0%</div>"
"</div>"
"<div class='status' id='status'></div>"
"</div>"
"</div>";
httpd_resp_send_chunk(req, html_part3, strlen(html_part3));
// Part 4: JavaScript
const char *html_part4 =
"<script>"
"console.log('OTA page loaded');"
"let selectedFile = null;"
@ -77,7 +132,6 @@ static const char *ota_html =
"const statusDiv = document.getElementById('status');"
"const fileInfo = document.getElementById('file-info');"
""
"// File input change handler"
"fileInput.addEventListener('change', function(e) {"
" console.log('File input changed', e.target.files);"
" if (e.target.files.length > 0) {"
@ -85,7 +139,6 @@ static const char *ota_html =
" }"
"});"
""
"// Drag and drop handlers"
"uploadArea.addEventListener('dragover', function(e) {"
" e.preventDefault();"
" uploadArea.classList.add('dragover');"
@ -142,8 +195,8 @@ static const char *ota_html =
" xhr.upload.addEventListener('progress', function(e) {"
" if (e.lengthComputable) {"
" const percent = Math.round((e.loaded / e.total) * 100);"
" progressBar.style.width = percent + '%%';"
" progressBar.textContent = percent + '%%';"
" progressBar.style.width = percent + '%';"
" progressBar.textContent = percent + '%';"
" console.log('Upload progress:', percent);"
" }"
" });"
@ -172,56 +225,11 @@ static const char *ota_html =
"</body>"
"</html>";
// Server handle
static httpd_handle_t s_server = NULL;
httpd_resp_send_chunk(req, html_part4, strlen(html_part4));
// OTA state
static ota_state_t s_ota_state = OTA_STATE_IDLE;
// Send final chunk to complete response
httpd_resp_send_chunk(req, NULL, 0);
// Progress callback
static ota_progress_callback_t s_progress_callback = NULL;
// Version string
static char s_version[32] = "1.0.0";
// OTA handle
static esp_ota_handle_t s_ota_handle = 0;
static const esp_partition_t *s_update_partition = NULL;
static int s_binary_file_length = 0;
static bool s_ota_ongoing = false;
static esp_err_t index_handler(httpd_req_t *req)
{
const esp_partition_t *running = esp_ota_get_running_partition();
uint32_t free_space = 0;
// Calculate free OTA space
esp_partition_iterator_t it = esp_partition_find(ESP_PARTITION_TYPE_APP, ESP_PARTITION_SUBTYPE_ANY, NULL);
while (it != NULL) {
const esp_partition_t *p = esp_partition_get(it);
if (p != running && p->subtype >= ESP_PARTITION_SUBTYPE_APP_OTA_0 &&
p->subtype <= ESP_PARTITION_SUBTYPE_APP_OTA_15) {
free_space = p->size;
break;
}
it = esp_partition_next(it);
}
esp_partition_iterator_release(it);
// Allocate buffer for response
size_t response_size = strlen(ota_html) + 64;
char *response = malloc(response_size);
if (!response) {
httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Memory allocation failed");
return ESP_FAIL;
}
snprintf(response, response_size, ota_html, s_version, free_space / 1024);
httpd_resp_set_type(req, "text/html");
httpd_resp_send(req, response, strlen(response));
free(response);
return ESP_OK;
}