Esp32 Web Updater and SPIFFS file manager

With previous versions of the Arduino IDE, it was easy to upload files to SPIFFS using the ESP32FS plugin. Unfortunately, this extension does not work under the completely revised Arduino IDE version 2.0. To deal with this problem, I created the “Esp32-Web-Update-and-SPIFFS-manager” sketch that can be downloaded below, which includes a web OTA update option.

The interface accessible via a web browser is provided by ESPAsyncWebServer. The server can be accessed via the WiFi network at the IP address of the ESP32 or by entering the url ‘http://esp32-filemanager.local/manager’.

You can change the url in the config.h file as you like. The web interface is password protected against foreign intervention. The default password can be found in the config.h file, we can change these identifiers here. At the beginning of the file, enter the SSID and password pair required for Wi-Fi connection.

We can upload and delete files on this web interface. It is also possible to edit text files and write a new text document. In the config.h file, you can specify which file extensions are allowed to be edited and created in the file editor. It is also possible to format the entire SPIFFS.

The program provides an opportunity to perform an OTA firmware update. Using the Update library, we can wirelessly upload a sketch translated into binary code to the ESP32. Compile our sketch with the Arduino IDE by selecting the menu item ‘Sketch -> Export Compiled Binary’. or by pressing the key combination Alt+Ctrl+S’.

A binary file ending in ‘.ino.bin’ was created in the /project_folder/build/esp32.esp32.xxx/ folder.

On the web interface, in the ‘ESP32 firmware update’ section, select the previously prepared binary file, then click ‘Update!’ button. At the end of the update, we get the following screen.

We can upload any firmware to the ESP32 in this way, but if it does not contain the code that can be downloaded below, it will lose its ability to update the ESP32 wirelessly later.

If we solve the commented parts in the diagram below, we get a “flashing led” example.

The original article and download file can be found here