ESP8266 Community Forum

- Mon Apr 24, 2017 12:40 pm #65225 I'm trying to get OTA updates working for one of my projects. I'm currently using the ESPAsyncWebServer library to handle the webserver and websockets. Looking through the examples, I would like to implement something very similar to the ESP8266HTTPUpdateServer which hosts an html page where users can easily upload a new file. This library however uses the standard ESP8266WebServer library and not the Async library.

Does anyone have some example code they'd be willing to share so that I could see how to implement this into my project? Thanks!

- Sun Apr 18, 2021 11:29 am #91137 i know its an old thread but bumping it up for guidance

- Sun Apr 18, 2021 11:40 pm #91141 You can try this:

Code: Select allconst char TEXTJSON[] PROGMEM = "text/json";
const char TEXTHTML[] PROGMEM = "text/html";
const char UPDATE[] PROGMEM = R"!^!(
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
  <input type="file" name="update" accept='.bin' id="file">
  <input type="submit" value="Update"> </form>
<div id="prg_wrap" style="border: 0px solid; width: 100%;">
  <div id="prg" style="text-shadow: 2px 2px 3px black; padding: 5px 0; display: none; border: 1px solid #008aff; background: #002180; text-align: center; color: white;"></div>
</div>
<script>
var domReady = function(callback) {
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};
domReady(function() {
  var myform = document.getElementById('upload_form');
  var filez = document.getElementById('file');
  myform.onsubmit = function(event) {
    event.preventDefault();
    var formData = new FormData();
    var file = filez.files[0];
    if(!file) {
      return false;
    }
    formData.append("files", file, file.name);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if(evt.lengthComputable) {
        var per = Math.round((evt.loaded / evt.total) * 100);
        var prg = document.getElementById('prg');
        prg.innerHTML = per + "%"
        prg.style.width = per + "%"
        prg.style.display = "block"
      }
    }, false);
    xhr.open('POST', location.href, true);
    // Set up a handler for when the request finishes.
    xhr.onload = function() {
      if(xhr.status === 200) {
        //alert('Success');
      } else {
        //alert('An error occurred!');
      }
    };
    xhr.send(formData);
  }
});
</script>
)!^!";

...

    // Simple Firmware Update Form
    www.on(PSTR("/update"), HTTP_GET, [](AsyncWebServerRequest * request) {
        request->send_P(200, FPSTR(TEXTHTML), UPDATE);
    });
    www.on(PSTR("/update"), HTTP_POST, [](AsyncWebServerRequest * request) {
        bool shouldReboot = !Update.hasError();
        AsyncWebServerResponse *response = request->beginResponse(200, FPSTR(TEXTPLAIN), shouldReboot ? "OK" : "FAIL");
        if (shouldReboot)
            request->onDisconnect([]() {
                ESP.restart();
            });
        //response->addHeader(F("Connection"), F("close"));
        request->send(response);
    }, [](AsyncWebServerRequest * request, String filename, size_t index, uint8_t *data, size_t len, bool final) {
        if (!index) {
            Update.runAsync(true);
            if (!Update.begin((ESP.getFreeSketchSpace() - 0x1000) & 0xFFFFF000)) {
                //Update.printError(Serial);
            }
        }
        if (!Update.hasError()) {
            if (Update.write(data, len) != len) {
                //Update.printError(Serial);
            }
        }
        if (final) {
            if (Update.end(true)) {
                //Serial.printf("Update Success: %uB\n", index+len);
            } else {
                //Update.printError(Serial);
            }
        }
    });