ESP32 filesystem, /data

Is anybody already doing this? I know the solution to my problem could be really simple.
SPIFFS looks pretty accessible, but they’re going to kill it. And filesystem looks superior.

I want to upload some images to display on a webserver. I’ve apparently done it already, but I can’t come up with the code to display the image in the html. (Unlike C++, I speak html pretty well.)

The image is stored locally in a new folder, ‘data’. The data folder gets compressed into the upload.

I’ve seen code that says ‘data::filename’. Filesystem is subdirectory-friendly, but there’s apparently no ‘data’ folder.

I plan to experiment later by putting the image into its own directory in the /data folder and hunt/peck the path syntax.

I’m going down the list, learning the advanced functions of ESP32. Soon, I’ll run more than one program, use the dual processors. First, I have to lean this filesystem thing.

The files in the data/ folder are put into the root of the filesystem. So the data/test.txt file will be found as under the path /test.txt.

Check the sketch arduino-esp32/libraries/SPIFFS/examples/SPIFFS_Test/SPIFFS_Test.ino at master · espressif/arduino-esp32 · GitHub for some file system exploration code. Yes that code uses SPIFFS, but the APIs are already abstracted to just use fs::FS object, of which SPIFFS is one implementation, and another implementation will sure come along (as LITTLEFS/src/LITTLEFS.h at master · lorol/LITTLEFS · GitHub is already)

Thank you. Is there a chance you know what to type into the terminal to ask if my file is in memory?

I’m pretty sure I know it’s ‘.jpg’, not ‘JPG’.

This, theoretically, would be the address:
http://10.0.0.145/Ben_Grin_glasses.jpg

Under what HTTP path the files that resides on the ESP32 filesystem are exposed depends on the sketch that is running. What code are you running?

I really don’t want that path. It will be easy enough when the image is displayed.
And I’m not crazy about the code. I’ve only seen straight HTML included as raw way ahead of the rest of the code. This stuff has quotes, which destroys the main way to refer to filenames in HTML.


           client.println("</style></head><body><h1>Monster Laboratories Weather Station</h1>");

           client.println("<img src=/Ben_Grin_glasses.JPG width=450>");
           client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");

           client.println("<tr><td>Temp. Centigrade</td><td><span class=\"sensor\">");
           client.println(bme.temperature, 1);
           client.println(" *C</span></td></tr>");

The code looks like a plain TCP client writing back the HTML in the HTTP response directly. If such a complicated approach is taken, the server code will have to handle decoding the requested path, checking whether it’s available in the local filesystem, and serving it, by itself. I highly suggest to use examples like arduino-esp32/libraries/WebServer/examples/FSBrowser at master · espressif/arduino-esp32 · GitHub which build on the WebServer library. You won’t have to handle the pure HTTP side of it but just have a pre-setup code which attempts to find all non-registered Webpaths in the filesystem.