UpLoad SPIFFS
From: https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/
Install ESP32 Filesystem Uploader in Arduino IDE
The ESP32 contains a Serial Peripheral Interface Flash File System (SPIFFS).
SPIFFS is a lightweight filesystem created for microcontrollers with a flash
chip, which is connected by SPI bus, like the ESP32 flash memory. In this
article we’re going to show how to easily upload files to the ESP32 filesystem
using a plugin for Arduino IDE.
Install ESP32 Filesystem Uploader in Arduino IDE
Note: if you have an ESP8266 board, read: Install ESP8266 NodeMCU LittleFS
Filesystem Uploader in Arduino IDE.
At the moment, this is not compatible with Arduino 2.0.
If you’re using VS Code with the PlatformIO extension, read the following
tutorial instead:
ESP32 with VS Code and PlatformIO: Upload Files to Filesystem (SPIFFS)
Introducing SPIFFS
SPIFFS lets you access the flash memory like you would do in a normal filesystem
in your computer, but simpler and more limited. You can read, write, close, and
delete files. At the time of writing this post, SPIFFS doesn’t support
directories, so everything is saved on a flat structure.
Using SPIFFS with the ESP32 board is especially useful to:
- Create configuration files with settings;
- Save data permanently;
- Create files to save small amounts of data instead of using a microSD card;
- Save HTML and CSS files to build a web server;
- Save images, figures, and icons;
- And much more.
With SPIFFS, you can write the HTML and CSS in separate files and save them on
the ESP32 filesystem. Check the following tutorial to learn how to build a web
server with files stored on the ESP32 file system:
ESP32 Web Server using SPIFFS (SPI Flash File System)
Installing the Arduino ESP32 Filesystem Uploader
You can create, save and write files to the ESP32 filesystem by writing the code
yourself on the Arduino IDE. This is not very useful, because you’d have to type
the content of your files in the Arduino sketch.
Fortunately, there is a plugin for the Arduino IDE that allows you to upload
files directly to the ESP32 filesystem from a folder on your computer. This
makes it really easy and simple to work with files. Let’s install it.
Note: at the time of writing this post, the ESP32 Filesystem Uploader plugin is
not supported on Arduino 2.0.
First, make sure you have the ESP32 add-on for the Arduino IDE. If you don’t,
follow the next tutorial:
Windows, Mac, and Linux instructions – Installing the ESP32 Board in
Arduino IDE
Windows Instructions
Follow the next steps to install the filesystem uploader if you’re using
Windows:
1) Go to the releases page and click the ESP32FS-1.0.zip file to download.
Download ESP32 SPIFFS Filesystem fs for Arduino IDE
2) Find your Sketchbook location. In your Arduino IDE, go to File > Preferences
and check your Sketchbook location. In my case, it’s in the following path:
C:\Users\sarin\Documents\Arduino.
Arduino sketchbook location
3) Go to the sketchbook location, and create a tools folder.
creating tools folder sketchbook folder SPIFFS
4) Unzip the downloaded .zip folder. Open it and copy the ESP32FS folder to the
tools folder you created in the previous step. You should have a similar folder
structure:
/tools/ESP32FS/tool/esp32fs.jar
install filesystem plugin folder structure
5) Finally, restart your Arduino IDE.
To check if the plugin was successfully installed, open your Arduino IDE. Select
your ESP32 board, go to Tools and check that you have the option “ESP32 Sketch
Data Upload“.
ESP32 Sketch Data Upload Arduino IDE SPIFFS FS Filesystem
MacOS X
Follow the next instructions if you’re using MacOS X.
1) Go to the releases page and click the ESP32FS-1.0.zip file to download.
Download ESP32 SPIFFS Filesystem fs for Arduino IDE
2) Unpack the files.
3) Create a folder called tools in /Documents/Arduino/.
4) Copy the unpacked ESP32FS folder to the tools directory. You should have a
similar folder structure.
~Documents/Arduino/tools/ESP32FS/tool/esp32fs.jar
Install SPIFFS ESP32 Mac OS X folder structure
5) Finally, restart your Arduino IDE.
To check if the plugin was successfully installed, open your Arduino IDE. Select
your ESP32 board, go to Tools and check that you have the option “ESP32 Sketch
Data Upload“.
ESP32 Data Sketch Upload Menu Arduino IDE Mac OS
Uploading Files using the Filesystem Uploader
To upload files to the ESP32 filesystem follow the next instructions.
1) Create an Arduino sketch and save it. For demonstration purposes, you can
save an empty sketch.
2) Then, open the sketch folder. You can go to Sketch > Show Sketch Folder. The
folder where your sketch is saved should open.
Arduino IDE Show Sketch folder to create data folder
3) Inside that folder, create a new folder called data.
ESP32 Arduino Sketch Example File Filesystem fs SPIFFS
4) Inside the data folder is where you should put the files you want to save
into the ESP32 filesystem. As an example, create a .txt file with some text
called test_example.
ESP32 Notepad Test Example File Filesystem fs SPIFFS
5) Then, to upload the files, in the Arduino IDE, you just need to go to
Tools > ESP32 Sketch Data Upload.
ESP32 Sketch Data Upload Arduino IDE SPIFFS FS Filesystem
The uploader will overwrite anything you had already saved in the filesystem.
Note: in some ESP32 development boards you need to press the on-board BOOT
button when you see the “Connecting …….____……” message.
SPIFFS Image Connecting to ESP32 board
The files were successfully uploaded to the ESP32 filesystem when you see the
message “SPIFFS Image Uploaded“.
SPIFFS Image Uploaded to ESP32 board
Testing the Uploader
Now, let’s just check if the file was actually saved into the ESP32 filesystem.
Simply upload the following code to your ESP32 board.
/*H****************************************************
Rui Santos
Complete project details at https://randomnerdtutorials.com
*****************************************************/
#include "SPIFFS.h"
//************************* DEFINES ************************************
//************************* PROTOTYPES ************************************
//************************* VARIABLES ************************************
/*F********************************************************************
*
**********************************************************************/
void
setup()
{
Serial.begin( BAUD );
if( !SPIFFS.begin( true ) )
{
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
File file = SPIFFS.open("/test_example.txt");
if( !file )
{
Serial.println( "Failed to open file for reading");
return;
}
Serial.println("File Content:");
while( file.available() )
Serial.write( file.read() );
file.close();
}
/*F********************************************************************
*
**********************************************************************/
void
loop()
{
}
After uploading, open the Serial Monitor at a baud rate of 115200. Press the
ESP32 “ENABLE/RST” button. It should print the content of your .txt file on the
Serial Monitor.
ESP32 SPIFFS FS Filesystem Example Arduino IDE Serial Monitor
You’ve successfully uploaded files to the ESP32 filesystem using the plugin.
Wrapping Up
Using the filesystem uploader plugin is one of the easiest ways to upload files
to the ESP32 filesystem. Check the following project to see how to build a web
server using HTML and CSS files stored on the filesystem: ESP32 Web Server using
SPIFFS (SPI Flash File System).
Another way to save data permanently is using the ESP32 Preferences library. It
is especially useful to save data as key:value pairs in the flash memory. Check
the following tutorial:
ESP32 Save Data Permanently using Preferences Library
For more projects with ESP32, check the following resources:
Learn ESP32 with Arduino IDE
Build Web Servers with ESP32 and ESP8266
Firebase Web App with ESP32 and ESP8266
Free ESP32 Projects and Tutorials…