Async Web Server with SPIFFS Directory

Chat freely about anything...
 Reply

User avatar

Async Web Server with SPIFFS Directory

By Sirquil
- Sat Oct 19, 2019 12:45 am #84236 Existing code in WiFi client/server:

Code: Select all                         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<br><br>");
                             
                              String str;

                              if (!SPIFFS.begin(true))
                              {
                                   Serial.println("An Error has occurred while mounting SPIFFS");
                                   return;
                              }

                              File root = SPIFFS.open("/");

                              File file = root.openNextFile();

                              while (file)
                              {

                                   if(strncmp(file.name(), "/LOG", 4) == 0)
                                   {
                                        str += "<a href=\"";
                                        str += file.name();
                                        str += "\">";
                                        str += file.name();
                                        str += "</a>";
                                        str += "    ";
                                        str += file.size();
                                        str += "<br>\r\n";
                                       
                                   }
                                 
                                   file = root.openNextFile();
                              }

                              client.print(str);

                             
                              client.println("<br><br>");
                              client.println("<a href=http://" + publicIP + ":" +  LISTEN_PORT + "/Weather    >Home</a><br>");
                              client.println("</body></h2>");
                              client.println("</html>");

                              end();

                         }


Original code by martinayotte, modified for ESP32.

Result in WiFi client/server:

Result WiFi client-server.JPG
Working HTML and code


Is there a way to combine HTML and code for Asyncwebserver? PHP code used with HTML?

William
User avatar

Solved: Async Web Server with SPIFFS Directory

By Sirquil
- Sat Oct 19, 2019 8:23 am #84240 Solved!

Code: Select allHTML:

//index2.h
const char HTML2 PROGMEM[] = R"====(
<!DOCTYPE HTML>
<html>

<head>
    <title>SDBrowse</title>
    <meta http-equiv="refresh" content="15">
</head>

<body>
    <h2>Collected Observations
    <br>
    <br>%URLLINK%
    <br>
    <a href=http://" + publicIP + ":" + LISTEN_PORT + "/Weather    >Home</a><br>
<body>

</html>
)====";

setup:


serverAsync.on("/SdBrowse", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, PSTR("text/html"), HTML2, processor2);
});

processor function:

String processor2(const String& var)
{

    //index2.h

    String str;

    if (!SPIFFS.begin(true))
    {
       Serial.println("An Error has occurred while mounting SPIFFS");
       //return;
    }
   
    File root = SPIFFS.open("/");
   
    File file = root.openNextFile();
   
    while (file)
    {
   
       if(strncmp(file.name(), "/LOG", 4) == 0)
       {
            str += "<a href=\"";
            str += file.name();
            str += "\">";
            str += file.name();
            str += "</a>";
            str += "    ";
            str += file.size();
            str += "<br>\r\n";
           
       }
     
       file = root.openNextFile();
    }

    if(var == F("URLLINK"))
      return  str;

    return String();
 
}

SdBrowse result: 


SdBrowse result.JPG
SdBrowse result.JPG (34.52 KiB) Viewed 5125 times


William
User avatar

Re: Async Web Server with SPIFFS Directory

By Pablo2048
- Sat Oct 19, 2019 11:58 am #84245 William, I have some suggestions for you:
1. never call SPIFFS.begin in async callback - call .begin() method only once in your setup()
2. use PSTR/F decorators where possible (and corresponding _P methods - for example strncmp_P() )
3. avoid heap fragmentation using str.reserve(2048); - this avoid String class memory reallocation if you set the size carefully
4. never ever use + operator with String() objects - it's the worst that you can do for memory fragmentation - use str.concat() (with F decorator where possible) instead.
5. refactor your code so the huge str String is created only and only if %URLLINK% request is detected

All this gives you some more free RAM and minimize heap fragmentation...
User avatar

Re: Async Web Server with SPIFFS Directory

By Sirquil
- Sun Oct 20, 2019 12:08 am #84250 Pavel, I will implement your suggestions. Already took care of #1; rest I need to refresh my understanding.

"SdBrowse" web page provides a list of URL's; which at the moment does nothing, when a URL is selected. Previously to asyncwebserver used the following code:

Code: Select allelse if ((strncmp(path, "/LOG", 4) == 0) ||  (strcmp(path, "/README.TXT") == 0))   // Respond with the path that was accessed.
                         {

                              char *filename;
                              strcpy( MyBuffer, path );
                              filename = &MyBuffer[1];

                              if ((strcmp(path, "/FAVICON.ICO") == 0) || (strncmp(path, "/SYSTEM~1", 9) == 0) || (strncmp(path, "/ACCESS", 7) == 0))
                              {

                                   client.println("HTTP/1.1 404 Not Found");
                                   client.println("Content-Type: text/html");
                                   client.println();
                                   client.println("<h2>404</h2>");
                                   delayTime = 250;
                                   client.println("<h2>File Not Found!</h2>");
                                   client.println("<br><br>");
                                   client.println("<a href=http://" + publicIP + ":" +  LISTEN_PORT + "/SdBrowse    >Return to File Browser</a><br>");

                                   Serial.println("Http 404 issued");

                                   error = 1;

                                   end();
                              }
                              else
                              {

                                   client.println("HTTP/1.1 200 OK");
                                   client.println("Content-Type: text/plain");
                                   client.println("Content-Disposition: attachment");
                                   client.println("Content-Length:");
                                   client.println("Connnection: close");
                                   client.println();

                                   readFile();

                                   end();
                              }

                         }


readFile function would then download the file.

readFile function:

Code: Select allvoid readFile()
{

//     digitalWrite(online, HIGH);   //turn-on online LED indicator

     String filename = (const char *)&MyBuffer;

     Serial.print("File:  ");
     Serial.println(filename);


     File webFile = SPIFFS.open(filename);

     if (!webFile)
     {
          Serial.println("File" + filename + "failed to open");
          Serial.println("\n");
     }
     else
     {
          char buf[1024];
          int len;
          while  (len = webFile.read((uint8_t *)buf, 1024))
          {
               client.write((const char*)buf, len);
          }

          //delayTime = 500;

          webFile.flush();

          webFile.close();

     }

     error = 0;

     delayTime = 1000;

     MyBuffer[0] = '\0';

//     digitalWrite(online, LOW);   //turn-off online LED indicator

}


How can downloads be accomplished with asyncwebserver? How to assign URL to path?

William
 Reply
Return to General Discussions