Hi there!
I would like to ask, this program dont work on pc or notebook if the choosed file is large ( example 2Mb), but it works on smartphone(only Mozila Firefox).
If the choosed file is small (example 500kb), it works on pc or notebook too.
Dont it work another web browser, only in firefox.
Why?
The program executing is stopping if i submit the wrong file while the browser don't respond. ( the led blinking will stopping)
Anyone can try this code on a simple esp32?
Trying:
One anything file what not .tft.
The file size ~2Mb
#include <ESPmDNS.h>
#include <WebServer.h>
const char *host = "esp32"; // Host name
const char *ssid = "ESP_auto"; // SSID
const char *password = "xxx12345"; // Password
IPAddress local_ip(192, 168, 10, 150); // ESP32 IP address
IPAddress local_mask(255, 255, 255, 0); // Subnet mask
IPAddress gateway(192, 168, 10, 254); // Gateway address
WebServer server(80); // Server port number
// Updater site--------------------------------------------------------------------------------------
char nextion_index[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-eqiv="content-language" content="hu">
<title>Example 3</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" id="upload_form">
<label><b><h1> Nextion display<br>updater</h1></b></label>
<input accept=.tft type="file" name="file" id="file" onchange="valSize(this)" style=visibility:hidden>
<label id="file-input" for="file">Choose the .tft file</label><br><br><br><br>
<input id="button" type="submit" class=btn value="Update" hidden><br>
<h3 style="color:black">The update may take a long time for large files. Check the update progress on the display</h3>
<h3 style="color:red"><br><br>The button only appears after selecting a file!</h3></br>
</form>
<script>
function valSize(file) {
var fileName = file.value.split('\\');
document.getElementById("file-input").innerHTML = " " + fileName[fileName.length - 1];
var fs = file.files[0].size;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("button").hidden = false;
}
};
xhttp.open("POST", "/fs", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fileSize=" + fs);
}
</script>
</body>
<style>
input {width: 100%;height: 100px;border-radius: 4px;font-size: 25px}
.btn {background: green;color: black;border-radius: 10px}
body {background: green;font-family: sans-serif;font-size: 18px;color: black}
#file-input {padding: 10px;border: 5px solid #ddd;line-height: 44px;text-align: center;display: block;cursor: pointer;background: lightgrey}
form {background: white;max-width: 400px;margin: 50px auto;padding: 150px;border-radius:25px;text-align: center}
</style>
</html>
)=====";
//Finish site----------------------------------------------------------------------------------
char success_html[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-eqiv="content-language" content="hu">
<title>Example 1</title>
</head>
<body>
<form>
<label><b><h2>Update is successful</h2></b></label><br>
</form>
</body>
<style>
body {background:MediumSeaGreen;font-family:sans-serif;font-size:18px;color:black}
form {background: LightGray;max-width: 400px;margin: 50px auto;padding: 100px;border-radius: 25px;text-align: center }
</style>
</html>
)=====";
//NOT tft file----------------------------------------------------------------------------------
char tft_html[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-eqiv="content-language" content="hu">
<title>Example 2</title>
</head>
<body>
<form>
<label><b><h2>NOT .TFT File!!!</h2></b></label><br>
</form>
</body>
<style>
body {background:Tomato;font-family:sans-serif;font-size:18px;color:black}
form {background: LightGray;max-width: 400px;margin: 50px auto;padding: 100px;border-radius: 25px;text-align: center }
</style>
</html>
)=====";
//-----------------------------------------------------------------------------------------------
// Variables
int led1 = 48;
int led2 = 36;
int ledState = LOW; // ledState used to set the LED
unsigned long previousMillis = 0; // will store last time LED was updated
const long interval = 1000;
int fileSize = 0; // File size
bool result = true; // Result variable
// File uploading handling
bool nextion_handleFileUpload() {
HTTPUpload& upload = server.upload(); // HTTP file uploading
if (!upload.filename.endsWith(F(".tft"))) { // check file end, if not .tft the
Serial.println("Failure html");
server.send(200, F("text/html"), tft_html);
//server.send(500, F("text/plain"), F("CSAK .TFT FAJL MEGENGEDETT!\n"));
return false; // return value flase
}
}
//setup---------------------------------------------------------------------------------------------------------------------------------------------------
void setup(void) {
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
Serial.begin(115200);
WiFi.mode(WIFI_AP); // WIFI Access Point
WiFi.softAP(ssid, password, 1, 0, 5); // WIFI config: SSID és Psw, chanel, hide ssid, max connectable devices number
WiFi.softAPConfig(local_ip,gateway,local_mask); // IP address
MDNS.begin(host); // MDNS starting
// Index site loading
server.on("/", HTTP_GET, []()
{
server.send(200, F("text/html"), nextion_index);
});
// Server init
server.on("/", HTTP_POST, [](){
server.send(200, F("text/html"), success_html); // Redirect the client to success site, after handle file
server.send(303);
return true; },
nextion_handleFileUpload // Receive file and save to nextion display
);
// Receive fileSize once a file is selected
server.on("/fs", HTTP_POST, [](){
fileSize = server.arg(F("fileSize")).toInt(); // "fileSize" comes from client
server.send(200, F("text/plain"), "");
});
server.begin(); // Server starting
}
// loop
void loop(void) {
server.handleClient();
// LEDs blinker
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
if (ledState == LOW) {
ledState = HIGH;
} else {
ledState = LOW;
}
digitalWrite(led1, ledState);
digitalWrite(led2, !ledState);
}
}
Please help me
Thanks!