X

Install ESP32 Filesystem Uploader in Arduino IDE – SPIFFS

In this tutorial, we will show you how to install a file system uploader plugin in Arduino IDE to upload files to ESP32 SPI flash (SPIFFS). By default, there is no support in Arduino IDE to upload files to ESP32. But we can install a plugin to add a file uploading feature in Arduino IDE.

Install ESP32 Filesystem Uploader in Arduino IDE SPIFFS

We have a similar guide with ESP8266 NodeMCU LittleFS filesystem:

SPIFFS Filesystem Introduction

ESP32 supports the SPI flash file system or Serial Peripheral Interface Flash File System (SPIFFS). It is a file system created by partitioning the SPI NOR flash of ESP32 into binary file region and file system region. We can use SPIFFS to store files in SPI flash without having to use any external memory with ESP32.

SPIFFS allows users to read and write files to/from the flash memory of microcontrollers. But write operation is not recommended to use frequently due to the limited number of write cycles of flash memory. Nevertheless, we can use it to read, write, delete and close files saved on SPIFFS.

Flat Structure

Unlike the file system in Linux, ESP32 SPIFFS does not support directories. Instead, it produces a flat structure. If SPIFFS is mounted under /spiffs, then creating a file with the path /spiffs/tmp/myfile.txt will create a file called /tmp/myfile.txt in SPIFFS, instead of myfile.txt in the directory /spiffs/tmp.

Applications

The use of SPIFFS with ESP32 becommes very handy in various applicatons such as follows:

  • Saving mesh and network configuration settings in permanent memory without any SD card
  • While using EPS32 as a Bluetooth mesh Node, its provisioing and configuration data must store in permanent memory
  • In case of ESP32 web server, server HTML and CSS files from SPIFFS
  • Saving look-up tables to perform query and retrieve data from PHP database

In most of our web server projects with ESP32, we have included HTML and CSS files inside our Arduino sketch. We save these HTML documents inside Arduino sketch by converting them into strings. Whenever a web client makes an HTTTP request, we send this string as a response which is basically a web page.

On the contrary, with SPIFFS, we can save HTML, CSS, and Javascript files into the ESP32 flash file system. Whenever a web client makes an HTTTP request, we can serve these files directly from SPIFFS.

Related Projects: ESP32 Web Server with SPIFFS (SPI Flash File System)

Installing File System Uploader Plugin in Arduino IDE

ESP32 SPIFFS allows use to write files to flash. We can write our own code to upload files from the file system. However, by doing so, we have to write code ourselves and include the code in our application. Additionally, it will increase the actual size of our application.

Hence, we can use a plugin available for Arduino IDE to upload files. This plugin allows users to upload files to SPIFFS directly from their computers. It will make the whole process easier and let us work with files easily.

Installing ESP32 Arduino IDE

Before starting with the file system uploader plugin installation process, you should make sure that you have the latest version of Arduino IDE installed on your system. Moreover, you should also install an ESP32 add-on in Arduino IDE. You can check this tutorial:

Download File Uploader Plugin

(1) First, download the file uploader plugin for Arduino IDE. Go to this link and click on the ESP32FS-1.0.zip folder. When you click on the zip folder, it will download it to your selected location.

Download SPI file system Uploader Plugin

(2) After that, extract the zip folder and you will find ESP32FS folder inside ESP32FS-1.0.zip.

Extract file system uploader zip file

(3) Copy the ESP32FS folder and paste it to the tools folder in your Arduino IDE installation folder. The tools folder is available inside the Arduino IDE installation folder. In our case, it is available at:

 C:\Program Files (x86)\Arduino\tools
Arduino tools folder

(4) You have successfully added the ESP32 file uploader plugin to Arduino IDE. You just need to restart your Arduino IDE.

In order to check if the ESP32 FileSystem plugin has been installed correctly, open your Arduino IDE. After that, go to tools. You will find the “ESP32 Sketch Data Upload” option there.

SPIFFS sketch data upload

Upload File to ESP32 using the Filesystem Uploader

In this section, let’s see an example to upload an example file to ESP32 SPIFFS using the plugin we have just installed. Follow these step by step instructions:

  1. First, open Arduino IDE and open the sketch folder. To open the sketch folder, go to sketch>>Show Sketch Folder. It will open the default folder where your sketch is being saved.
open sketch folder Arduino IDE
  1. Inside the sketch folder, you will find two a sample Arduino sketch and a data folder. In case your sketch folder does not have a data folder. You should create one because we put the files inside the data folder, which we want to upload to ESP32 SPIFFS.
sketch folder data Arduino IDE
  1. Create a sample text file with any name. But you should use the same name in the Arduino sketch while reading a file. For example, we have created a text file with the name of “example.”
file to be uploaded to SPIFFS
  1. Copy this example.txt file inside data folder.
save file in data folder
  1. Finally, we can upload the file saved in the data folder to the filesystem of ESP32. To upload a file, go to tools and select ESP32 from tools>boards, and after that press “Tools > ESP32 Sketch Data Upload“.
SPIFFS sketch data upload

Note: Make sure to select the ESP32 board before uploading the file. Otherwise, you will get this error SPIFFS Not Supported on avr.

As soon as you click the ESP32 Sketch Data Upload” option, Arduino IDE will start uploading SPIFFS files image to ESP32 as follows:

SPIFFS file uploading to esp32

Note: If you see the Connecting …….____……” message in your Arduino console. That means Arduino IDE is trying to connect with ESP32. But in some versions of ESP32 boards you need to press and hold the BOOT button on ESP2 board when you see the Connecting …….____……” message.

After some time, you will see the message “SPIFFS Image Uploaded. “ That means files are uploaded successfully to ESP32 SPIFFS.

SPIFFS file uploaded

In this example, we are using only one file. But you can save more than one file in the data folder inside the sketch folder. It will upload all files to the ESP32 filesystem.

Example Sketch to Read SPIFFS File

Let’s see an example sketch to read the example.txt file, which we just uploaded to the ESP32 filesystem and print its content on the Arduino serial monitor.

Copy the following code to your .ino file of Arduino sketch and upload it to Arduino.

#include "SPIFFS.h"
 
void setup() {
  Serial.begin(115200);
  
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  
  File file = SPIFFS.open("/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();
}
 
void loop() {

}

After uploading a sketch, open the serial monitor in Arduino IDE by going to Tools > Serial Monitor. Also, set the baud rate to 115200. Finally, press the enable button on the ESP32 board:

ESP32 enable reset button

As soon as you press the enable button, it will print the content of example.txt file on the serial monitor as follows:

print file system data on Arduino serial monitor

That means you have successfully uploaded the file to the ESP32 filesystem and also able to read the file.

Summary

By using the file system uploader plugin, we can easily upload files to ESP32 SPI Flash. On top of that, we can also read, write, delete and close files inside our Arduino sketch using the SPIFFS.h library available in Arduino IDE. You can check the following project to learn to serve HTML, CSS files to a web client stored on the ESP32 file system:

More ESP32 tutorials and projects:

Leave a Comment