Host a Web Update Page
Upload firmware from a browser form.
Host a Web Update Page is a free Arduino & IoT Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Arduino & IoT Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Update From a Browser
Sometimes you want to flash a device without the Arduino IDE at all. A web update page lets anyone upload firmware from a browser.
The Board Becomes a Server
Your ESP32 runs a tiny web server that serves an upload form, so a phone or laptop can send it a new binary.
Bring In the Libraries
You combine a web server with the Update library, which knows how to write incoming bytes into flash memory.
#include <WebServer.h>
#include <Update.h>
WebServer server(80);Serve an Upload Form
The root page returns a simple HTML form with a file picker and a submit button for the firmware file.
server.on("/", []() {
server.send(200, "text/html",
"<form method='POST' action='/update' enctype='multipart/form-data'><input type='file' name='fw'><input type='submit'></form>");
});Where Did .bin Come From?
In the IDE, Sketch then Export Compiled Binary creates the .bin file you will pick in that upload form.
Open the Update Stream
When the upload starts, you tell the chip how big the image is so Update.begin() can reserve flash space for it.
Update.begin(UPDATE_SIZE_UNKNOWN);Write the Incoming Chunks
Firmware arrives in pieces. You feed each chunk to Update.write() as it lands, building the new image in flash.
Update.write(upload.buf, upload.currentSize);Finish and Verify
When the last byte arrives, Update.end(true) checks the image is complete and valid before marking it ready to boot.
if (Update.end(true)) Serial.println("Update OK");Reboot Into New Code
A successful update needs a fresh start. Call ESP.restart() so the board boots into the firmware you just uploaded. 🔄
ESP.restart();Guard the Page
Anyone who reaches this page can reflash your device, so add a login or token check before accepting any upload.
Keep the Server Alive
Just like OTA, the web server needs attention. Call server.handleClient() in loop so it can accept the upload request.
void loop() { server.handleClient(); }Quick Check
Think about which library actually writes firmware to flash.
Recap
Run a web server that serves an upload form, feed the .bin to the Update library, verify it, then restart, all guarded behind a login. 🌐
Frequently asked questions
Is the “Host a Web Update Page” lesson free?
Yes — the full text of “Host a Web Update Page” is free to read here on the web, and the Arduino & IoT Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Arduino & IoT Academy course, upgrade to CoddyKit PRO.
What will I learn in “Host a Web Update Page”?
Upload firmware from a browser form. You practise Arduino & IoT Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Arduino & IoT Academy?
No prior experience is required. Arduino & IoT Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Host a Web Update Page” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Arduino & IoT Academy lesson?
Yes. Every Arduino & IoT Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Why OTA Matters in the Field
- Enable ArduinoOTA
- Host a Web Update Page
- Roll Back a Bad Update