![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-ElegantOTA-Arduino-IDE.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nBy the end of this tutorial, you\u2019ll be able to easily add OTA capabilities to your web server projects with the ESP32 to upload new firmware and files to the filesystem wirelessly in the future.<\/p>\n\n\n\n
Table Of Contents<\/h2>\n\n\n\n
Throughout this tutorial, we’ll cover:<\/p>\n\n\n\n
- \n
- Add the ElegantOTA feature to your web server<\/a><\/li>\n\n\n\n
- Upload new firmware via OTA to the ESP32 board<\/a><\/li>\n\n\n\n
- Upload files to LittleFS via OTA to the ESP32 board<\/a><\/li>\n<\/ul>\n\n\n\n
We recommend that you follow all the tutorial steps to understand how the ElegantOTA library<\/a> works and how you can use it in your projects. To demonstrate how to do this, we\u2019ll upload files to build different web server projects.<\/p>\n\n\n\n
ESP32 OTA (Over-the-Air) Programming<\/h2>\n\n\n\n
OTA (Over-the-Air) update is the process of loading new firmware to the ESP32 board using a Wi-Fi connection rather than a serial communication. This functionality is extremely useful in case of no physical access to the ESP32 board. You don’t need a connection between your computer and the board to upload new code.<\/p>\n\n\n
\n![\"Async](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/Async-Elegant-OTA-Web-Server-ESP32-How-it-Works.png?resize=751%2C370&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThere are different ways to perform OTA updates. In this tutorial, we\u2019ll cover how to do that using the ElegantOTA library<\/a> (version V3 \u2014 this is the successor of the deprecated AsyncElegantOTA library<\/a>). In our opinion, this is one of the best and easiest ways to perform OTA updates.<\/p>\n\n\n\n
The ElegantOTA library creates a web server that you can access on your local network to upload new firmware or files to the filesystem (SPIFFS or LittleFS). The files you upload should be in .bin<\/em> format. We\u2019ll show you later in this tutorial how to convert your files to .bin<\/em> format.<\/p>\n\n\n\n
The only disadvantage of OTA programming is that you need to add the code for OTA in every sketch you upload so that you\u2019re able to use OTA in the future. In case of the ElegantOTA library, it consists of just three lines of code.<\/p>\n\n\n\n
ElegantOTA Library<\/h2>\n\n\n
\n![\"ElegantOTA](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegantota-logo.png?resize=796%2C190&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nHere are some great features of this library:<\/p>\n\n\n\n
- \n
- It is compatible with the built-in WebServer.h<\/span> library and with several forks of the ESPAsyncWebServer<\/span> library.<\/li>\n\n\n\n
- You just need to add three lines of code to add OTA capabilities to your \u201cregular\u201d web server;<\/li>\n\n\n\n
- It allows you to update not only new firmware to the board but also files to the ESP32 filesystem (LittleFS or SPIFFS);<\/li>\n\n\n\n
- It provides a beautiful and modern web server interface;<\/li>\n\n\n\n
- It is available as a pro paid version that adds more features.<\/li>\n<\/ul>\n\n\n\n
OTA Updates with the ElegantOTA Library – Quick Summary<\/h3>\n\n\n\n
To add OTA capabilities to your projects using the ElegantOTA library, follow these steps:<\/p>\n\n\n\n
1) <\/strong>Install the ElegantOTA<\/a>, AsyncTCP<\/a>, and ESPAsyncWebServer <\/a>libraries;<\/p>\n\n\n\n
2)<\/strong> Include ElegantOTA library at the top of the Arduino sketch:<\/p>\n\n\n\n
#include <ElegantOTA.h>;<\/span><\/code><\/pre>\n\n\n\n3)<\/strong> Add the following line in the setup before server.begin();<\/span><\/p>\n\n\n\n
ElegantOTA.begin(&server);<\/code><\/pre>\n\n\n\n4)<\/strong> In the loop()<\/span>, add the following line:<\/p>\n\n\n\n
ElegantOTA.loop();<\/code><\/pre>\n\n\n\n5)<\/strong> Open your browser and go to http:\/\/<IPAddress>\/update<\/span>, where <IPAddress><\/span> is your ESP32 IP address to access the web server page for the OTA updates.<\/p>\n\n\n\n
Continue reading the tutorial for more detailed steps.<\/p>\n\n\n\n
How does OTA Web Updater Work?<\/h3>\n\n\n\n
The first sketch must be uploaded using a serial connection. This sketch should include the code to set up the OTA Web Updater, allowing you to upload new sketches through a web browser.<\/p>\n\n\n\n
The OTA Web Updater creates a web server where you can upload sketches wirelessly.<\/p>\n\n\n\n
If your code doesn\u2019t include an OTA routine, you won\u2019t be able to use the web server to upload new sketches wirelessly.<\/p>\n\n\n\n
After that, make sure every sketch you upload includes OTA routines so you can continue updating the board wirelessly in the future.<\/p>\n\n\n\n
Installing the ElegantOTA Library<\/h2>\n\n\n\n
Having the ESP32 Board installed in your Arduino IDE<\/a>, you also need to install the ElegantOTA library in the Arduino IDE go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong>, search for ElegantOTA <\/strong>and install the ElegantOTA library by Ayush Sharma<\/em>.<\/p>\n\n\n
\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/install-elegantota-library-Arduino-IDE.png?resize=877%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nEnabling Async Mode<\/h3>\n\n\n\n
For the ElegantOTA library to work in async mode (with the ESPAsyncWebServer library), you need to do the following procedure.<\/p>\n\n\n\n
1)<\/strong> Go to your Arduino libraries <\/em>directory.<\/p>\n\n\n\n
2)<\/strong> Open the ElegantOTA<\/em> folder and then open the src <\/em>folder.<\/p>\n\n\n\n
3)<\/strong> Locate the ELEGANTOTA_USE_ASYNC_WEBSERVER<\/span> macro in the ElegantOTA.h<\/em> file, and set it to 1<\/span> as follows:<\/p>\n\n\n\n
#define ELEGANTOTA_USE_ASYNC_WEBSERVER 1<\/code><\/pre>\n\n\n\n![\"elegantota](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegant-ota-set-async-mode.png?resize=711%2C357&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n4)<\/strong> Save the changes to the ElegantOTA.h<\/em> file.<\/p>\n\n\n\n
5)<\/strong> Now you can use the ElegantOTA in async mode for your OTA updates and with the ESPAsyncWebServer library.<\/p>\n\n\n\n
Install AsyncTCP and ESPAsyncWebServer Libraries<\/h3>\n\n\n\n
To test the examples in this tutorial, you also need to install the AsyncTCP and the ESPAsyncWebServer libraries.<\/p>\n\n\n\n
Note:<\/strong> the ElegantOTA library works with different forked versions of the ESPAsyncWebServer and the AsyncTCP web server libraries, so you don’t necessarily need to use the same ones that we’re using.<\/p>\n\n\n\n
Async Web Server Libraries<\/h3>\n\n\n\n
We’ll build the web server using the following libraries:<\/p>\n\n\n\n
- \n
- ESPAsyncWebServer <\/a><\/li>\n\n\n\n
- AsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n
You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking the Library icon at the left sidebar.<\/p>\n\n\n\n
Search for ESPAsyncWebServer<\/span> and install the ESPAsyncWebServer by ESP32Async<\/strong>.<\/p>\n\n\n
\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-ESPAsyncWebServer-Library-ArduinoIDE-2-f.png?resize=666%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThen, install the AsyncTCP library. Search for AsyncTCP<\/span> and install the AsyncTCP by ESP32Async<\/strong>.<\/p>\n\n\n
\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/Install-AsyncTCP-Library-ArduinoIDE.png?resize=722%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nElegantOTA ESP32 Basic Example<\/h2>\n\n\n\n
Let\u2019s start with a basic example (based on one of the library’s examples). The following code creates a simple web server with the ESP32. The root URL displays some text, and the \/update<\/strong> URL displays the interface to update the firmware and the filesystem.<\/p>\n\n\n\n
Copy the following code to your Arduino IDE.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-ota-elegantota-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Softwar\n*********\/\n\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ElegantOTA.h>\n\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nAsyncWebServer server(80);\n\nvoid setup(void) {\n Serial.begin(115200);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.println("");\n\n \/\/ Wait for connection\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(".");\n }\n Serial.println("");\n Serial.print("Connected to ");\n Serial.println(ssid);\n Serial.print("IP address: ");\n Serial.println(WiFi.localIP());\n\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, "text\/plain", "Hi! I am ESP32.");\n });\n\n server.begin();\n Serial.println("HTTP server started");\n\n ElegantOTA.begin(&server); \/\/ Start ElegantOTA\n}\n\nvoid loop(void) {\n ElegantOTA.loop();\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Insert your network credentials and the code should work straight away.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nHow Does the Code Work?<\/h3>\n\n\n\n
Start by including the required libraries.<\/p>\n\n\n\n
#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ElegantOTA.h><\/code><\/pre>\n\n\n\nInsert your network credentials in the following variables so that the ESP32 can connect to the Wi-Fi on your local network.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nCreate an AsyncWebServer<\/span> object on port 80:<\/p>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nIn the setup()<\/span>, initialize the Serial Monitor:<\/p>\n\n\n\n
Serial.begin(115200);<\/code><\/pre>\n\n\n\nInitialize Wi-Fi:<\/p>\n\n\n\n
WiFi.mode(WIFI_STA);\nWiFi.begin(ssid, password);\nSerial.println(\"\");\n\n\/\/ Wait for connection\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n}\nSerial.println(\"\");\nSerial.print(\"Connected to \");\nSerial.println(ssid);\nSerial.print(\"IP address: \");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nThen, handle the client requests. The following lines, send some text Hi! I am ESP32.<\/span> when you access the root (\/<\/span>) URL:<\/p>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, \"text\/plain\", \"Hi! I am ESP32.\");\n});<\/code><\/pre>\n\n\n\nIf your web server needs to handle more requests you can add them (we’ll show you in the next example).<\/p>\n\n\n\n
Initialize the server:<\/p>\n\n\n\n
server.begin();<\/code><\/pre>\n\n\n\nThen, add the next line to start ElegantOTA:<\/p>\n\n\n\n
ElegantOTA.begin(&server); \/\/ Start ElegantOTA<\/code><\/pre>\n\n\n\nIn the loop()<\/span>, add the following line:<\/p>\n\n\n\n
ElegantOTA.loop();<\/code><\/pre>\n\n\n\nAccessing the Web Server<\/h2>\n\n\n\n
After uploading code to the board, open the Serial Monitor at a baud rate of 115200. Press the ESP32 on-board RST button. It should display the ESP IP address as follows (yours may be different):<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegantOTA-web-server-ip-address.png?resize=678%2C345&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIn your local network, open your browser and type the ESP32 IP address. You should get access the root (\/<\/span>) web page with some text displayed.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/async-web-server-with-OTA.png?resize=667%2C362&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNow, if you want to modify your web server code via OTA, go to the ESP IP address followed by \/update<\/span>. The following web page should load.<\/p>\n\n\n
\n![\"ElegantOTA](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-elegant-ota-webserver.png?resize=907%2C666&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo upload new code to your board or files to the filesystem, you need to upload them in .bin<\/em> format. Follow the next section to learn how to generate a .bin<\/em> file from your sketch in Arduino IDE.<\/p>\n\n\n\n
Upload New Code to the ESP32 via OTA<\/h2>\n\n\n\n
Every file that you upload via OTA should be in .bin<\/em> format. You can generate a .bin<\/em> file from your sketch using the Arduino IDE.<\/p>\n\n\n\n
With your sketch opened, you just need to select the ESP32 board you’re using in Tools<\/strong> > Board<\/strong>, and then go to Sketch <\/strong>> Export Compiled Binary<\/strong>. A .bin<\/em> file will be generated from your sketch.<\/p>\n\n\n
\n![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/export-bin-file-arduino-ide.jpg?resize=383%2C272&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe generated file will be saved under your project folder inside a series of other folders. The file with the .ino.bin<\/em> extension is the one you should upload to your board using the ElegantOTA web page.<\/p>\n\n\n\n
Upload a New Web Server Sketch via OTA – Example<\/h3>\n\n\n\n
Imagine that after uploading the previous sketch, you want to upload a new one that allows you to control an LED via a web interface like this project<\/a>. Here’s the steps you need to follow:<\/p>\n\n\n\n
1. Copy the following code to your Arduino IDE. Don’t forget to insert your network credentials.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-ota-elegantota-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Softwar\n*********\/\n\n\/\/ Import required libraries\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ElegantOTA.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nbool ledState = 0;\nconst int ledPin = 2;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\nAsyncWebSocket ws("\/ws");\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <title>ESP Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" href="data:,">\n <style>\n html {\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n }\n h1 {\n font-size: 1.8rem;\n color: white;\n }\n h2{\n font-size: 1.5rem;\n font-weight: bold;\n color: #143642;\n }\n .topnav {\n overflow: hidden;\n background-color: #143642;\n }\n body {\n margin: 0;\n }\n .content {\n padding: 30px;\n max-width: 600px;\n margin: 0 auto;\n }\n .card {\n background-color: #F8F7F9;;\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\n padding-top:10px;\n padding-bottom:20px;\n }\n .button {\n padding: 15px 50px;\n font-size: 24px;\n text-align: center;\n outline: none;\n color: #fff;\n background-color: #0f8b8d;\n border: none;\n border-radius: 5px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n }\n \/*.button:hover {background-color: #0f8b8d}*\/\n .button:active {\n background-color: #0f8b8d;\n box-shadow: 2 2px #CDCDCD;\n transform: translateY(2px);\n }\n .state {\n font-size: 1.5rem;\n color:#8c8c8c;\n font-weight: bold;\n }\n <\/style>\n<title>ESP Web Server<\/title>\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="icon" href="data:,">\n<\/head>\n<body>\n <div class="topnav">\n <h1>ESP WebSocket Server<\/h1>\n <\/div>\n <div class="content">\n <div class="card">\n <h2>Output - GPIO 2<\/h2>\n <p class="state">state: <span id="state">%STATE%<\/span><\/p>\n <p><button id="button" class="button">Toggle<\/button><\/p>\n <\/div>\n <\/div>\n<script>\n var gateway = `ws:\/\/${window.location.hostname}\/ws`;\n var websocket;\n window.addEventListener('load', onLoad);\n function initWebSocket() {\n console.log('Trying to open a WebSocket connection...');\n websocket = new WebSocket(gateway);\n websocket.onopen = onOpen;\n websocket.onclose = onClose;\n websocket.onmessage = onMessage; \/\/ <-- add this line\n }\n function onOpen(event) {\n console.log('Connection opened');\n }\n function onClose(event) {\n console.log('Connection closed');\n setTimeout(initWebSocket, 2000);\n }\n function onMessage(event) {\n var state;\n if (event.data == "1"){\n state = "ON";\n }\n else{\n state = "OFF";\n }\n document.getElementById('state').innerHTML = state;\n }\n function onLoad(event) {\n initWebSocket();\n initButton();\n }\n function initButton() {\n document.getElementById('button').addEventListener('click', toggle);\n }\n function toggle(){\n websocket.send('toggle');\n }\n<\/script>\n<\/body>\n<\/html>)rawliteral";\n\nvoid notifyClients() {\n ws.textAll(String(ledState));\n}\n\nvoid handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {\n AwsFrameInfo *info = (AwsFrameInfo*)arg;\n if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {\n data[len] = 0;\n if (strcmp((char*)data, "toggle") == 0) {\n ledState = !ledState;\n notifyClients();\n }\n }\n}\n\nvoid onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,\n void *arg, uint8_t *data, size_t len) {\n switch (type) {\n case WS_EVT_CONNECT:\n Serial.printf("WebSocket client #%u connected from %s\\n", client->id(), client->remoteIP().toString().c_str());\n break;\n case WS_EVT_DISCONNECT:\n Serial.printf("WebSocket client #%u disconnected\\n", client->id());\n break;\n case WS_EVT_DATA:\n handleWebSocketMessage(arg, data, len);\n break;\n case WS_EVT_PONG:\n case WS_EVT_ERROR:\n break;\n }\n}\n\nvoid initWebSocket() {\n ws.onEvent(onEvent);\n server.addHandler(&ws);\n}\n\nString processor(const String& var){\n Serial.println(var);\n if(var == "STATE"){\n if (ledState){\n return "ON";\n }\n else{\n return "OFF";\n }\n }\n return String();\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n\n pinMode(ledPin, OUTPUT);\n digitalWrite(ledPin, LOW);\n \n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Connecting to WiFi..");\n }\n\n \/\/ Print ESP Local IP Address\n Serial.println(WiFi.localIP());\n\n initWebSocket();\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Start server\n server.begin();\n\n ElegantOTA.begin(&server); \/\/ Start ElegantOTA\n\n}\n\nvoid loop() {\n ws.cleanupClients();\n digitalWrite(ledPin, ledState);\n ElegantOTA.loop();\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
This is the same code used in this project<\/a>, but it contains the needed lines of code to handle ElegantOTA:<\/p>\n\n\n\n
#include <ElegantOTA.h><\/code><\/pre>\n\n\n\nElegantOTA.begin(&server);<\/code><\/pre>\n\n\n\nElegantOTA.loop();<\/code><\/pre>\n\n\n\n2. <\/strong>Save your sketch: File<\/strong> > Save <\/strong>and give it a name. For example: Web_Server_LED_OTA_ESP32<\/em>.<\/p>\n\n\n\n
3.<\/strong> Generate a .bin<\/em> file from your sketch. First, select the board model you’re using in Tools<\/strong> > Board<\/strong>. Then, go to Sketch <\/strong>> Export Compiled Binary<\/strong>.<\/p>\n\n\n
\n<\/figure><\/div>\n\n\nGo to your sketch folder. You should have a build<\/em> folder. Inside that folder, you’ll have another folder related to your board model. Open that folder. There’ll be several files. You should upload the file with the ino.bin<\/em> extension.<\/p>\n\n\n
\n![\"bin](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegant-ota-bin-file-to-upload.jpg?resize=908%2C365&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n4.<\/strong> Now, you need to upload that file using the ElegantOTA page. Go to your ESP IP address followed by \/update<\/span>. Make sure you have the firmware<\/strong> option selected. Click on Choose File<\/strong> and select the .ino.bin<\/em> file you’ve just generated.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegant-ota-ESP32-uploading-new-file-ota.png?resize=907%2C666&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n5.<\/strong> After a few seconds, you should get a success message. Then, click on the Back<\/strong> button.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/esp32-elegant-ota-upload-success.png?resize=907%2C666&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n6. <\/strong>Now, you can go to the root (\/<\/span>) URL to access the new web server. This is the page you should see when you access the ESP IP address on the root (\/<\/span>) URL.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-control-GPIO-websocket-server.png?resize=875%2C514&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou can click on the button to turn the ESP32 on-board LED on and off.<\/p>\n\n\n
\n![\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/10\/ESP32-board-Built_in-LED-turned-on-HIGH.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nBecause we’ve also added OTA capabilities to this new web server, we can upload a new sketch in the future if needed. You just need to go to the ESP32 IP address followed by \/update<\/span>.<\/p>\n\n\n\n
Congratulations, you’ve uploaded new code to your ESP32 via Wi-Fi using ElegantOTA.<\/p>\n\n\n\n
Continue reading if you want to learn how to upload files to the ESP32 filesystem (LittleFS) using the ElegantOTA library.<\/p>\n\n\n\n
Upload Files to Filesystem via OTA to the ESP32<\/h2>\n\n\n\n
In this section you’ll learn to upload files to the ESP32 filesystem (LittleFS) using the ElegantOTA library.<\/p>\n\n\n\n
ESP32 Filesystem Uploader Plugin<\/h3>\n\n\n\n
Before proceeding, you need to have the ESP32 Filesystem Uploader Plugin installed in your Arduino IDE. Follow the next tutorial before proceeding:<\/p>\n\n\n\n
- \n
- Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)<\/a><\/li>\n<\/ul>\n\n\n\n
Web Server with Files from LittleFS<\/h3>\n\n\n\n
Imagine the scenario that you need to upload files to the ESP32 filesystem, for example: configuration files; HTML, CSS and JavaScript files to update the web server page; or any other file that you may want to save in the LittleFS filesystem via OTA.<\/p>\n\n\n\n
To show you how to do this, we’ll create a new web server that serves files from LittleFS: HTML, and CSS files to build a web page that controls the ESP32 built-in LED remotely using a different interface.<\/p>\n\n\n\n
Copy the following code to your Arduino IDE.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-ota-elegantota-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Softwar\n*********\/\n\n#include <Arduino.h>\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include "LittleFS.h"\n#include <ElegantOTA.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\n\/\/ Set LED GPIO\nconst int ledPin = 2;\n\n\/\/ Stores LED state\nString ledState;\n\n\/\/ Initialize LittleFS\nvoid initLittleFS() {\n if (!LittleFS.begin(true)) {\n Serial.println("An error has occurred while mounting LittleFS");\n }\n else {\n Serial.println("LittleFS mounted successfully");\n }\n}\n\n\/\/ Initialize WiFi\nvoid initWiFi() {\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.print("Connecting to WiFi ..");\n while (WiFi.status() != WL_CONNECTED) {\n Serial.print('.');\n delay(1000);\n }\n Serial.println(WiFi.localIP());\n}\n\n\/\/ Replaces placeholder with LED state value\nString processor(const String& var) {\n if(var == "STATE") {\n if(digitalRead(ledPin)) {\n ledState = "ON";\n }\n else {\n ledState = "OFF";\n }\n return ledState;\n }\n return String();\n}\n\nvoid setup() {\n Serial.begin(115200);\n initWiFi();\n initLittleFS();\n\n \/\/ Set GPIO2 as an OUTPUT\n pinMode(2, OUTPUT);\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(LittleFS, "\/index.html", "text\/html", false, processor);\n });\n\n server.serveStatic("\/", LittleFS, "\/");\n\n \/\/ Route to set GPIO state to HIGH\n server.on("\/on", HTTP_GET, [](AsyncWebServerRequest *request) {\n digitalWrite(ledPin, HIGH);\n request->send(LittleFS, "\/index.html", "text\/html", false, processor);\n });\n\n \/\/ Route to set GPIO state to LOW\n server.on("\/off", HTTP_GET, [](AsyncWebServerRequest *request) {\n digitalWrite(ledPin, LOW);\n request->send(LittleFS, "\/index.html", "text\/html", false, processor);\n });\n\n \/\/ Start server\n server.begin();\n\n ElegantOTA.begin(&server); \/\/ Start ElegantOTA\n\n}\n\nvoid loop() {\n ElegantOTA.loop();\n}<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Note<\/strong>: this example is covered and explained in our eBook: Build Web Severs with the ESP32 and ESP8266<\/a>.<\/p>\n\n\n\n
Insert your network credentials in the following variables and save the code.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nUpdate Firmware<\/h3>\n\n\n\n
Create a .ino.bin<\/em> file from this sketch as shown previously (this sketch also includes the needed lines of code to provide OTA capabilities).<\/p>\n\n\n
\n<\/figure><\/div>\n\n\nGo to the ESP32 IP address followed by \/update<\/span> and upload the new firmware.<\/p>\n\n\n\n
Next, we’ll see how to upload the files.<\/p>\n\n\n\n
Update the Filesystem<\/h3>\n\n\n\n
Under the project folder, create a folder called data <\/strong><\/em>and move the following HTML and CSS files (click on the links to download the files):<\/p>\n\n\n\n
- \n
- HTML file: index.html<\/em><\/a><\/li>\n\n\n\n
- CSS file: style.css<\/em><\/a><\/li>\n\n\n\n
- Click here to donwload all project files<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n
To find your project folder, you can simply go to Sketch <\/strong>> Show Sketch Folder<\/strong>.<\/p>\n\n\n\n
This is the folder structure of your project and where the data folder should be located:<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP32-Web-Server-Folder-Structure.png?resize=750%2C408&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- Web_Server_OTA_ESP32_Example_2\n
- \n
- data<\/strong>\n
- \n
- data<\/strong>\n
- CSS file: style.css<\/em><\/a><\/li>\n\n\n\n
- HTML file: index.html<\/em><\/a><\/li>\n\n\n\n
- AsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n
- Upload new firmware via OTA to the ESP32 board<\/a><\/li>\n\n\n\n