Download the tool:
https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.5.0/ESP8266FS-0.5.0.zipFrom:
https://arduino-esp8266.readthedocs.io/en/3.0.1/search.html?q=littlefs&check_keywords=yes&area=default :
Unpack the tool into tools directory (the path will look like <home_dir>/Arduino/tools/ESP8266FS/tool/esp8266fs.jar) If upgrading, overwrite the existing JAR file with the newer version.
Restart Arduino IDE.
Open a sketch (or create a new one and save it).
Go to sketch directory (choose Sketch > Show Sketch Folder).
Create a directory named data and any files you want in the file system there.
Make sure you have selected a board, port, and closed Serial Monitor.
If your board requires you to press a button (or other action) to enter bootload mode for flashing a sketch, do that now.
Select Tools > ESP8266 Sketch Data Upload. This should start uploading the files into ESP8266 flash file system. When done, IDE status bar will display SPIFFS Image Uploaded message.
From my webpages:
https://www.fancon.cz/esp8266-humi-server-klient/arduino-humi-server-client.html#otafileHow to upgrade a file system via OTA
1/28/2021
I've been looking for advice for a long time on how to upload a file to a file system via OTA, as I mentioned above. But I always broke down LittleFS (SPIFFS).
But now I read that I can't upload files directly, but first I have to convert the whole file system to * .bin. There is a special tool for this, which does not work more than it works. But I found in that scary jungle of the internet (They should cancel it ...) a gem, advice on gold.
To upgrade via a serial line, you always need tools (downloaded from github.com), which I have already installed in the Arduino IDE. If I have data for SPIFFS stored in the project in the data directory where it must be located, then just run the ESP8266 LittleFS Data Upload tool over the open project. He is trying to record over a serial line, but since the ESP8266 is not connected, it crashes. Before his death, however, he writes where he created the file system in the * .bin format.
For a project named HUMI3_LOOP, it looks something like this:
[LittleFS] upload: C: \ Users \ Pavel \ AppData \ Local \ Temp \ arduino_build_732033 / HUMI3_LOOP.mklittlefs.bin
And then you just need to extract the HUMI3_LOOP.mklittlefs.bin file from this location and upload it via OTA with the FileSystem entry. In order to be able to easily transfer the file to the client, the settings in your ESP8266 http server must not be missing.
For favicon.ico it is this line:
server.serveStatic ("/ favicon.ico", LittleFS, "favicon.ico");
That line of code tells the server to reach the file system when a client requests a favicon.ico file and send the requested file directly to the client. Amazing with its simplicity. If the file is not found, then the client's 404 File not found is returned. Beautifully transparent and it even works. Only in this work does the accuracy of the name and the size of the letters matter.
But when I first successfully uploaded favicon.ico via OTA, a tiny icon didn't appear in Chrome. I deleted the cache and who knows what else. Eventually I ran Edge and lo and behold, the icon was. Chrome remembered that he hadn't received a favicon from a source before, and then didn't ask for it again. But after a while he could tell.
You can also easily get a file from the ESP8266 http server file system, including favicon.ico, by simply querying IP-ESP8266 / favicon.ico and having it on the screen. It's amazing when I uploaded a nice JPG image via OTA and the browser could view it directly from that mischievous cockroach. Please note the tiny blue favicon at the top left. The image itself is full screen, but I have reduced the size of the browser window to see what and how.
Tested with Ardino IDE 1.8.15 and ESP8266 core 2.7.4 - esp8266 - 12 and Wemos D1 mini 4MB flash