Chat freely about anything...

User avatar
By Sirquil
#80938 martinayotte coded a helper to list SPIFFS files on a web page; very quick and does a great job.
Moving on to the ESP32; requesting help converting code from ESP8266 to the newer ESP32 SPIFFS directory structure. Found a function to list directories; do not understand how to use martinayotte's helper with this function.

ESP32 funtion:

Code: Select allhttps://github.com/espressif/arduino-esp32/blob/master/libraries/SPIFFS/examples/SPIFFS_Test/SPIFFS_Test.ino

#include "FS.h"
#include "SPIFFS.h"

/* You only need to format SPIFFS the first time you run a
   test or else use the SPIFFS plugin to create a partition
   https://github.com/me-no-dev/arduino-esp32fs-plugin */
   
#define FORMAT_SPIFFS_IF_FAILED true

void listDir(fs::FS &fs, const char * dirname, uint8_t levels){
    Serial.printf("Listing directory: %s\r\n", dirname);

    File root = fs.open(dirname);
    if(!root){
        Serial.println("- failed to open directory");
        return;
    }
    if(!root.isDirectory()){
        Serial.println(" - not a directory");
        return;
    }

    File file = root.openNextFile();
    while(file){
        if(file.isDirectory()){
            Serial.print("  DIR : ");
            Serial.println(file.name());
            if(levels){
                listDir(fs, file.name(), levels -1);
            }
        } else {
            Serial.print("  FILE: ");
            Serial.print(file.name());
            Serial.print("\tSIZE: ");
            Serial.println(file.size());
        }
        file = root.openNextFile();
    }
}


ESP8266 code use to list SPIFFS as filename URL links:

Code: Select all // Check the action to see if it was a GET request.
        else if (strcmp(path, "/SdBrowse") == 0)   // Respond with the path that was accessed.
        {

          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<body>");
          client.println("<head><title>SDBrowse</title><head />");
          // print all the files, use a helper to keep it clean
          client.println("<h2>Collected Observations</h2>");

          //////////////// Code to listFiles from martinayotte of the "ESP8266 Community Forum" ///////////////
          String str = String("<html><head></head>");

          if (!SPIFFS.begin())
          {
             Serial.println("SPIFFS failed to mount !");
          }
          Dir dir = SPIFFS.openDir("/");

          delay(20);
         
          while (dir.next())
          {
             str += "<a href=\"";
             str += dir.fileName();
             str += "\">";
             str += dir.fileName();
             str += "</a>";
             str += "    ";
             str += dir.fileSize();
             str += "<br>\r\n";
          }
         
          client.print(str);

          ////////////////// End code by martinayotte //////////////////////////////////////////////////////
          client.println("<br><br>");
          client.println("<a href=http://" + publicIP + ":" + LISTEN_PORT + "/Weather    >Current Observations</a><br>");
          client.println("</body></html>\r\n");
         
          end();

        }


Tried using the helper with the ESP32 function unsuccessfully.


William
Last edited by Sirquil on Fri Mar 22, 2019 1:08 pm, edited 2 times in total.
User avatar
By Sirquil
#80940 Tried:
Code: Select all// Check the action to see if it was a GET request.
                    else if (strcmp(path, "/SdBrowse") == 0)   // Respond with the path that was accessed.
                    {

                       // send a standard http response header
                       client.println("HTTP/1.1 200 OK");
                       client.println("Content-Type: text/html");
                       client.println();
                       client.println("<!DOCTYPE HTML>");
                       client.println("<html>");
                       client.println("<body>");
                       client.println("<head><title>SDBrowse</title><head />");
                       // print all the files, use a helper to keep it clean
                       client.println("<h2>Collected Observations</h2>");
                     

                         //////////////// Code to listFiles from martinayotte of the "ESP8266 Community Forum" ///////////////
                         //////////////////// Modified for ESP32 //////////////////
                         
                         
                         File root = SPIFFS.open("/");
                         
                         File file = root.openNextFile();

                         //File file = root.openNextFile();

                          while (file)
                         {
                             
                              String str = String("<!DOCTYPE HTML><html><head></head>");
                              str += "<a href=\"";
                              str += file.name();
                              str += "\">";
                              str += file.name();
                              str += "</a>";
                              str += "    ";
                              str += file.size();
                              str += "<br>\r\n";
                              str += "</body></html>\r\n";
                         }

                         client.print(str);

                         ////////////////// End code by martinayotte //////////////////////////////////////////////////////
                         client.println("<br><br>");
                         client.println("<a href=http://" + publicIP + ":" + LISTEN_PORT + "/Weather    >Current Observations</a><br>");
                         client.println("</body>");
                         client.println("</html>");

                         end();

                    }


Above code produced:
Image

William
Attachments
Code Produced.JPG
Screen capture of above code result.
User avatar
By Sirquil
#80943 Image

ESP32 Code solution:

Code: Select all// Check the action to see if it was a GET request.
                    else if (strcmp(path, "/SdBrowse") == 0)   // Respond with the path that was accessed.
                    {

                       // send a standard http response header
                       client.println("HTTP/1.1 200 OK");
                       client.println("Content-Type: text/html");
                       client.println();
                       client.println("<!DOCTYPE HTML>");
                       client.println("<html>");
                       client.println("<body>");
                       client.println("<head><title>SDBrowse</title><head />");
                       // print all the files, use a helper to keep it clean
                       client.println("<h2>Collected Observations</h2>");
                     

                         //////////////// Code to listFiles from martinayotte of the "ESP8266 Community Forum" ///////////////
                         //////////////////// Modified for ESP32 //////////////////

                         String str = String("<!DOCTYPE HTML><html><head></head>");
                         
                         if (!SPIFFS.begin(true))
                         {
                            Serial.println("An Error has occurred while mounting SPIFFS");
                            return;
                         }
                         
                         File root = SPIFFS.open("/");
                         
                         File file = root.openNextFile();

                         while (file)
                         {
                             
                             
                              str += "<a href=\"";
                              str += file.name();
                              str += "\">";
                              str += file.name();
                              str += "</a>";
                              str += "    ";
                              str += file.size();
                              str += "<br>\r\n";
                             
                              file = root.openNextFile();
                         }


William
Attachments
ESP32 Helper for  listing filenames as URL links.JPG
Serial Monitor and Chrome browser showing SdBrowser output.
User avatar
By GaryRH
#93335 Hi,

I'm really sorry to wake this thread up but it's pretty much exactly what I'm after, I'm just not sure how to implement it.

I have created a server on my esp32, using this tutorial. However I would like to display a list of directory content similar to the 'index of'/directory index, which this post seems to show.

However I'm just not sure how to implement the solution to create a html webpage. Any help or pointers would be greatly appreciated. I know this is a esp8266 forum, but the post is relevant to the esp32.

Thank you