Use ESP32 with VS Code & Platformio IDE to Upload Files to Filesystem (SPIFFS)

Learn how to Use ESP32 with VS Code & Platformio to Upload Files to Filesystem (SPIFFS). Instead of needing to write everything within the Arduino sketch, it may be useful to leverage the filesystem with the ESP32 to save HTML, CSS, and JavaScript files to create a web server.

If you’re using Arduino IDE, follow this tutorial instead: Install ESP32 SPIFFS Filesystem Uploader in Arduino IDE.

Introducing SPIFFS

The Serial Peripheral Interface Flash File System (SPIFFS) is built into the ESP32. For microcontrollers with flash memory chips connected through the SPI bus, like the ESP32 flash memory, SPIFFS is a lightweight filesystem.

Although SPIFFS is simpler and has fewer features than a normal filesystem on your computer, it still allows you to access flash memory. You can open, shut, read, write, and delete files. Since directories are not supported by SPIFFS, everything is saved as 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, CSS, and JavaScript files to build a web server;
• Save images, figures, and icons;
• And much more.

Upload Files to ESP32 SPIFFS

Under the project folder, under the data folder, put the files you want to upload to the ESP32 filesystem. We'll upload a .txt file with some random text to help you understand how everything works. Any other file type is acceptable for upload.

Creating a data Folder

Top 6

ESP32 eBooks

From Zero to Professional

Shop now

Inside the folder for your project, create a folder called data. VS Code can be used for this. Select the project folder that you are working on with your mouse. To create a new folder, click the “New Folder” button.

Otherwise, it won't work. This new folder must be called data.

Select the files you wish to upload by clicking the New File icon in the newly formed data folder. We'll create a file called “text.txt” for this example. Any other file type, like .html, .css, or .js files, may be created and uploaded.

Write some random text inside that “.txt” file.

The data folder should be within the project folder, and the files you wish to upload should be inside the data folder. It will not work otherwise.

Uploading Filesystem Image

Follow the next steps after creating and saving the file or files you want to upload to the data folder:

1. Click the PIO icon in the left sidebar. The project tasks should be open.
2. Select env:esp32doit-devkit-v1 (it may be slightly different depending on the board you’re using).
3. Expand the Platform menu.
4. Select Build Filesystem Image.
5. Finally, click Upload Filesystem Image.

Important: To upload the filesystem image successfully, you must close all serial connections (Serial Monitor) with your board.

After a while, you should get a success message.

Top 6

Arduino eBooks

From Zero to Professional

Shop now

Troubleshooting

Here are some common mistakes:

Could not open port “COMX” Access is denied.

This issue signifies that in VS Code or any other program, a serial connection has been opened with your board. Make sure to close all serial connections in Visual Studio Code (click the recycle bin icon on the terminal console) and terminate any programs that could be using the board serial port.

Timed out waiting for packet header error

You need to press the on-board boot image button once you start seeing a lot of dots on the debugging window and the filesystem image fails to upload.

To solve this issue permanently, read the following article:

• [Resolve] Failed to connect to ESP32: Timed out while waiting for packet header

Testing

Check to see if the file was really saved to the ESP32 filesystem now. In the main.cpp file, paste the following code, then upload it to your board:

/*********
  Ebokify
  Complete project details at https://ebokify.com/esp32-with-vs-code-platformio-spiffs/  
*********/

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

}

The following line may need to be changed depending on the name of your file:

File file = SPIFFS.open("/text.txt");

Open the Serial Monitor, and it should print the content of your file.

You’ve successfully used ESP32 with VS Code & Platformio to upload files to Filesystem (SPIFFS).

Conclusion

In this tutorial, you've learned how to upload files to the ESP32 filesystem (SPIFFS) using VS Code & PlatformIO. It is quick and simple.

This can be especially useful for uploading HTML, CSS, and JavaScript files to develop web server projects with the ESP32 boards.

If you like ESP32, you may also like:

• Getting Started with MicroPython on ESP32 and ESP8266
• Get MAC Address of ESP32/ESP8266 and Change It (Arduino IDE)
• ESP32 Timer Wake Up from Deep Sleep Mode with Arduino IDE
• ESP32/ESP8266 Digital Inputs and Outputs with MicroPython

We hope you find this tutorial useful. Thanks for reading.