Asyncwebserver; add url link to end of plain text file

Chat freely about anything...
 Reply

User avatar

Asyncwebserver; add url link to end of plain text file

By Sirquil
- Thu Jun 24, 2021 1:28 am #91751 I select a filename from a list that calls a function to read a plain text file. I would like to add a url link to return to the list of filenames

This standalone html code for win pc does what i am trying to accomplish using Asyncwebserver:

Code: Select all[<html>
<head>
<title>README</title>
</head>
<body>

<div><object data="C:\users\1234\Desktop\Notes\LOG07042020.TXT" width="100%" height="800"></object></div>

<br><h2><a href=http://10.0.0.100:8030/Weather >Home</a>

</body>
</html>


instead of "C:\users\1234\Desktop\Notes\LOG07042020.TXT" I would like to use a variable.

My attemps using code from Asyncwebserver documentation for sending html code have all failed.

Mt latest attempt:

Code: Select all        String resp = "<!DOCTYPE html><html><head><title>Observations</title></head><body>";
        resp += "<div><object data" + fn + " width='100%' height='800'></object></div>";
        resp += "<br><h2><a href=http://10.0.0.100:8030/SdBrowse >SdBrowse</a></body></html>";
                 
        AsyncWebServerResponse *response = request->beginResponse(200, "text/html", resp);
        response->addHeader("Access-Control-Allow-Origin","*");
        request->send(response);


Compiles; does add urllink; however, plain text log file is not displayed. An example for fn would be "/LOG06142021.TXT." Have tried inserting filename; still no text display.

William
Last edited by Sirquil on Fri Jun 25, 2021 12:04 am, edited 2 times in total.
User avatar

Re: Asyncwebserver; add url link to end of plain text file

By Sirquil
- Thu Jun 24, 2021 6:16 am #91758 zekageri provided this code for an issue on the Asyncwebserver website; thank you zekageri.

Code: Select all serverAsync.on("/Observations", HTTP_GET, [](AsyncWebServerRequest *request){

  String resp = "<!DOCTYPE html><html><head><title>Observations</title></head><body>";
         resp += "<div><object data=/LOG06132021.TXT width='100%' height='800'></object></div>";
         resp += "<br><h2><a href=http://10.0.0.100:8030/Weather >Home</a></body></html>";


  AsyncWebServerResponse *response = request->beginResponse(200, "text/html", resp);
  response->addHeader("Access-Control-Allow-Origin","*");
  request->send(response);
});


Can this code be modified to work from this function? Replacing "request->send(SPIFFS, fn, String(), false); //Display file."

Code: Select allvoid notFound(AsyncWebServerRequest *request)
{

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

  if (! request->url().endsWith(F(".TXT")))
  {
    request->send(404);
  }
  else
  {
    if (request->url().endsWith(F(".TXT")))
    {
      //.endsWith(F(".txt")))

      // here comes some mambo-jambo to extract the filename from request->url()
      int fnsstart = request->url().lastIndexOf('/');

      fn = request->url().substring(fnsstart);

      PATH = fn;

      accessLog();

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



      File webFile = SPIFFS.open(fn);

      Serial.print("File size: ");

      Serial.println(webFile.size());

      if (!webFile)
      {

        Serial.println("File:  " + fn + " failed to open");
        Serial.println("\n");

      }
      else if (webFile.size() == 0)
      {

        webFile.close();

      }
      else
      {

        //request->send(SPIFFS, fn, String(), true);  //Download file
        request->send(SPIFFS, fn, String(), false);  //Display file

        webFile.close();

      }

      fn = "";

      end();



    }

  }

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

}


Pablo2048 provided the function code for an issue on the Asyncwebserver website; thank you Pablo2048.

William
Attachments
(1.16 KiB) Downloaded 172 times
User avatar

Resolved: Asyncwebserver; add url link to end of plain text

By Sirquil
- Wed Jul 14, 2021 12:58 pm #91873 Have a solution to request using "JavaScript"; provided, in an example by Sara Santos of "RNTlab.com."

Solution code I am using to add header, text area, and hyperlink to an all text file:

Code: Select all
//----------------

"HTML6":
```//index6.h
const char HTML6[] PROGMEM = R"====(
<!DOCTYPE HTML>
<html>

<head>
    <title>Show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.main
{
  type: text/txt;
  font-size:18px;
  width: auto;
  height: auto;
  margin: 30px;
}
</style>
</head>

<body>

    <h2>Observations
    <!-- <a href="/Show"><button>Show Log File</button></a> -->
    <br>
    <br>
    <div class="main" style="white-space: pre-wrap;" type="text/txt" id=file-content></div>
    <!-- <p style="white-space: pre-wrap;"id="file-content"></p>  -->
    <br> 
    <a href=http://%LINK%/SdBrowse >SdBrowse</a></h2><br>   
   
</body>
<script>  //JavaScript by Sara Santos
  window.addEventListener('load', getFile);
  function getFile(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
      if (this.readyState == 4 && this.status == 200)
      {
        console.log(this.responseText);
        document.getElementById("file-content").innerHTML=this.responseText;
      }
    };
  xhr.open("GET", "/get-file", true);
  xhr.send();
}
</script>
</html>
)====";

//----------
Request "/Show " //Loads HTML6


  serverAsync.on("/Show", HTTP_GET, [](AsyncWebServerRequest * request)
  {
   
    PATH = "/Show";
    accessLog();

    if (! flag == 1)
    {
     
      request->send_P(200, PSTR("text/html"), HTML6, processor6);
     
    }
    end();
  });

//---------------

Request to get text file for HTML6:


 serverAsync.on("/get-file", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, fn, "text/txt");
  });

//---------------------

Request to get redirect from "notFound" function:


 serverAsync.on("/redirect/internal", HTTP_GET, [](AsyncWebServerRequest *request){
    request->redirect("/Show");  //recevies HTML request to redirect
  });




ESP32 Project website

ESP32 Project "RainGauge" code

William
 Reply
Return to General Discussions