ESP32 Devlog 10 — SPIFFS Filesystem

I never knew ESP32 has a filesystem

This is a godsend feature. SPIFFS is a sort of lightweight file system with a flat structure that was stored in the flash memory and a basic feature to manage the file system (Create, Read, Update, Delete, or CRUD for short).

Now i don’t have to write HTML file inside the .ino file because it was SO TEDIOUS. I always wanted to use the HTML in their fullest power (which is seperated by files). But for starters, i would like to test how it works.

By default, the filesystem is already bulit on ESP32. But, to upload the compiled files to ESP32 filesystem, one should use Arduino IDE and write the code in that editor. Fortunately, someone made an Arduino IDE file uploader tool that you can check it out here.

A. File Uploader Installation

As usual, i’m using an article from Random Nerd Tutorials about Install ESP32 Filesystem Uploader. Here’s the steps simplified:

1. Go to the release page and download the ESP32FS-1.0.zip

2. Then, Go to the Arduino IDE Directory and open the tools folder. Unzip the downloaded .zip folder to the tools folder. You should have a similar folder structure:

.../Arduino-<version>/tools/ESP32FS/tool/esp32fs.jar

3. Restart your arduino IDE. To check if the plugin was successfully installed, you should have the option “ESP32 Sketch Data Upload” in the Tools section.

Image was taken from randomnerdtutorials.com. Somehow i can’t screenshot while the dropdown was active.

B. Upload Files using Filesystem Uploader

1. Create an Arduino sketch and save it. The sketch can be empty.
2. Then open the sketch folder using Ctrl + K.
3. Create a folder, set the name of the folder to data, and inside the data folder, create a file like text.txt

4. Upload the data files with Tools > ESP32 Sketch Data Upload. If you saw the “SPIFFS Image Uploaded”, it means that the files were successfully uploaded to the ESP32 SPIFFS filesystem. In my case, you cannot upload the SPIFFS image to the ESP32 while you open the serial monitor.

5. Test the SPIFFS using this code:

Here’s the serial exception slap

If the upload went successful, you might see these message.

Serial Monitor Snapshot of text.txt file. It Works

C. How it works

We mainly configure the setup() code block which if the SPIFFS works with SPIFFS.begin(true). Then, we create an File object which uses SPIFFS.open() method. If the file exists, then the file is simply read char by char, then close the file.

D. HTML, CSS, and ESP32 with Filesystem Uploader Plugin

With the SPIFFS fresh in mind, we can “upgrade” the our old ESP32 HTTP web server to the next level. That is, we don’t store the HTML as .ino file. Here are the .ino code:

And here’s the HTML code:

The steps concept and the code are explained in the previous devlog. Don’t forget to upload the HTML files to the ESP32 filesystem.

F. Next Project

Data visualization, here we come