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
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:
![Arduino UNO R4 WiFi [ABX00087] - Renesas RA4M1 / ESP32-S3 - Wi-Fi, Bluetooth, USB-C, CAN, DAC, OP AMP, Qwiic Connector, 12x8 LED Matrix](https://m.media-amazon.com/images/I/416S910MpBL.jpg)
- Click the PIO icon in the left sidebar. The project tasks should be open.
- Select env:esp32doit-devkit-v1 (it may be slightly different depending on the board you’re using).
- Expand the Platform menu.
- Select Build Filesystem Image.
- 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.
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:
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:
![Official Arduino Starter Kit [K000007] (English Projects Book) - 12 DIY Projects with All Necessary Electronic Components and Instructions - origianl kit by Arduino from Italy](https://m.media-amazon.com/images/I/51fPv6DsjQL.jpg)
/*********
LEDEdit PRO
Complete project details at https://lededitpro.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:
- Send Email from ESP32 via SMTP Server (Arduino IDE)
- ESP32 with WiFiMulti: Connect to the Strongest Wi-Fi Network
- Programming ESP32 with PlatformIO IDE and Atom Text Editor
- How to Install ESP32 Boards in Arduino IDE 2.0
We hope you find this tutorial useful. Thanks for reading.
