ESP8266HTTPUpdateServer - Can I make my own Form?

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

ESP8266HTTPUpdateServer - Can I make my own Form?

By s0nny91
- Fri Mar 17, 2017 2:44 pm #63855 Hi,
I have a small ESP project. I have build a small webinterface just to display some information and a few other small things. For navigation I added some buttons to the top of the webinterface. If one is clicked, the content is loaded via javascript to an div below the buttons by replacing an String in this div (%%CONTENT%%) by the to displayed data. Therefor I used a modification of the code from this page: http://www.john-lassen.de/en/projects/e ... -webconfig
When one of the buttons is clicked, the js function setValues(string) is called. The given parameter "string" contains a string in the format "id|content|type". In setValues these information get parsed out of the string and the element (of DOM) with the id "id" will be replaced by the value of "content" (type is just the type of element, in my case div). So far so good...

I just added OTA functionality to my ESP Project, so that I can visit http://IP/update to update it.
Now the question is, is it possible to load the update formular via javascript like I descriped before to get it loaded in the div like everything else in my webinterface? So normaly I would just add the HTML code of the inputfield for the update.bin-file and the update-button to an variable in my code, put an "id|" at the beginning and an "|div" at the end.
But how can I tell the buton to start the update after uploading the binary? Which function do I have to call?
Sadly there is didn't find a documentation for the ESP8266HTTPUpdate library, just this page http://esp8266.github.io/Arduino/versions/2.0.0/doc/ota_updates/ota_updates.html, but there is no description how to modify it, just how to use it.

Thanks for your help!
User avatar

Re: ESP8266HTTPUpdateServer - Can I make my own Form?

By r3d-5
- Sun Jun 28, 2020 9:10 am #87687 I faced the same problem. Even the post ist old First I extend the Class. That worked until the next update of the ESP8266 software.

Now I just setup a page with my upload from under "/update" that uses the the path of the UpdateServer "/update2" as action. See the code.

Code: Select all...
ESP8266WebServer httpServer(80);
ESP8266HTTPUpdateServer httpUpdater;

void setup() {
...
httpServer.on("/update", handleUpdate);
httpUpdater.setup(&httpServer, "/update2");
...
}
...
void handleUpdate() {
  String updIndex=
    "<!DOCTYPE html>"
    "<html lang='en'>"
    "<head>"
    "     <meta charset='utf-8'>"
    "     <meta name='viewport' content='width=device-width,initial-scale=1'/>
    "</head>"
    "<body>"
    "<form method='POST' action='/update2' enctype='multipart/form-data'>"
    "     Firmware:<br>"
    "     <input type='file' accept='.bin,.bin.gz' name='firmware'>"
    "     <input type='submit' value='Update Firmware'>"
    "</form>"
    "</body>"
    "</html>)";
  httpServer.send(200, "text/html", updIndex); 
}


This works fine for me. Only down is that you cannot modify the response or add any action before the update starts.

If the ESP8266 software changes and the custom from won't work. You still can use http://<ip-address>/update2 to do a OTA update.

Hope this helps someone.
 Reply
Return to General Discussions