ESP32 AsyncwebServer

Hello friends

This time i try to make my ESP32 a webserver

The problem is, that my browser isnt showing anything.

What i have done
So i created a scetch with the Arduino IDE. there i createt i folder called . I followed the instructions to upload my HTML file to the SPIFFS of my ESP32.
For that i created a HTML file called <indextest.html> in my folder data.
It contains only for test:

<p>Hello from file system</p>

I uploaded this file to the SPIFFS.

After that i created in plattformio my scetch

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
 
const char* ssid = "*****";
const char* password =  "*******";
 
AsyncWebServer server(80);
 
void setup(){
  Serial.begin(9600);
 
  if(!SPIFFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html", "text/html");
  });
 
  server.begin();
}
 
void loop(){}

and uploaded it. I dont get any compileerror etc.

Since my browser isnt showing anything when i enter the correct IP adress, i checked if the indextest.html is on the SPIFF. It seems that the file exists on the SPIFF

Since this is an relativ simple example, has anyone an idea where my mistake is?

Thank you very much

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html", "text/html");
  });

You need to enter this address : http://yourESPip/html

Read this if you need another example

Thak you for your answer

Sorry i wasnt specific

Also when i enter http://MyESPIP/html it just loads and than nothing.:confused:

Have you tried the example from techtutorialsx?

If you put the index.html file on your desktop amd double click it, does your text display?

Hello!

If you put the index.html file on your desktop amd double click it, does your text display?
Yes when i click on the HTML file my browser opens and shows the text:

Have you tried the example from techtutorialsx?

Yes i already watched it. I improved the code to this

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
 
const char* ssid = "*****";
const char* password =  "*****";
 
AsyncWebServer server(80);
 
void setup(){
  Serial.begin(9600);
 
  if(!SPIFFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html", "text/html");
  });

  server.on("/hello", HTTP_GET, [](AsyncWebServerRequest *request)  
       {request->send(200, "text/plain", "Hello World");}); 
 
  server.begin();
}
 
void loop(){}

When i enter *myIp/hello i get: Hello World
When i enter *myIp/html the page just load and nothing happens

I double checked if the file exists on my SPIFFS with:

#include "SPIFFS.h"
 
void setup() {
 
  Serial.begin(9600);
 
  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
 

  File file = SPIFFS.open("/test.txt", FILE_WRITE);
 
  if (!file) {
    Serial.println("There was an error opening the file for writing");
    return;
  }
 
  if (file.print("TEST")) {
    Serial.println("File was written");
  } else {
    Serial.println("File write failed");
  }
 
  file.close();
 
  Serial.println(SPIFFS.exists("/wrongfile.txt"));

  Serial.println(SPIFFS.exists("/indextest.html"));

  
 
}
void loop() {}

as a result i get in my Serial Monitor : 0
1

So it should exist there. I dont know what i do wrong

Anyone an idea?

Thank you very much

More test code you might try.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com  
*********/

#include "FS.h"
 
void setup() {
  Serial.begin(115200);
  
  if(!SPIFFS.begin()){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  
  File file = SPIFFS.open("/test_example.txt", "r");
  if(!file){
    Serial.println("Failed to open file for reading");
    return;
  }
  
  Serial.println();
  Serial.println("File Content:");
  while(file.available()){
    Serial.write(file.read());
  }
  file.close();
}
 
void loop() {

}

I think the problem comes from the fact that your file is not using the html syntax, although its extension is .html. So you should use "text/plain" :

request->send(SPIFFS, "/indextest.html", "text/plain");

Read this for more information.

If it doesn't work, try adding this at the end of the setup of your test code, to verify the content of the file:

  File file2 = SPIFFS.open("/indextest.html", FILE_READ);
  while (file2.available()) Serial.print(file2.read());
  Serial.println();

Does it display the content of the file on the serial monitor?

I see that you're using PlatformIO. I don't use it, only Arduino IDE and it works. So maybe the problem comes from that. Read this, maybe it will help...

Thank you for all the answers.

First i tested if the file realy exitst. I used this code

#include "SPIFFS.h"
 
void setup() {
 
  Serial.begin(9600);
 
  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
 
  File root = SPIFFS.open("/");
 
  File file = root.openNextFile();
 
  while(file){
 
      Serial.print("FILE: ");
      Serial.println(file.name());
 
      file = root.openNextFile();
  }
}
 
void loop() {}

I get: /indextest.html. So there should be a least a file with that name

I think the problem comes from the fact that your file is not using the html syntax, although its extension is .html. So you should use "text/plain"
I modified my indextest.html file to this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World and so!<p>
</body>
</html>

I tried both ways:

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html", "text/plain");
  });

AND

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html", "text/html");
  });

Both ways dont work. Still the same result.

Now i added to my Code the reading of the file part. At the end i have:

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
 
const char* ssid = "*****";
const char* password =  "******";
 
AsyncWebServer server(80);
 
void setup(){
  Serial.begin(9600);
 
  if(!SPIFFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html", "text/plain");
  });

  server.on("/hello", HTTP_GET, [](AsyncWebServerRequest *request)  
       {request->send(200, "text/plain", "Hello World");}); 

 File file2 = SPIFFS.open("/indextest.html", FILE_READ);
  while (file2.available()) Serial.print(file2.read());
  Serial.println();
 
  server.begin();
}
 
void loop(){}

strangely my SerialMonitor is showing this: KLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKLKKLKLKLKLKLKLKLK.... and so on

Now i am double confused

Thank you

Obviously, this is not the expected content... :confused:
Did you choose the correct baudrate (9600) ?

If you used the Arduino IDE, I would advise to check the configuration parameters of your ESP32 in the 'tools' menu such as 'flash size', 'partition scheme'. But with PlatformIO, I don't know.

Can you upload another text file on your ESP32, and verify its existence and its content?

#include "SPIFFS.h"
 
void setup() {
    Serial.begin(115200);  // <-- always use this, forget about 9600
    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
   }
 
    File file = SPIFFS.open("/test.txt", FILE_WRITE);
     if(!file){
        Serial.println("There was an error opening the file for writing");
        return;
    }
     if(file.print("TEST")){
        Serial.println("File was written");;
    } else {
        Serial.println("File write failed");
    }
     file.close();
 
    File file2 = SPIFFS.open("/test.txt");
     if(!file2){
        Serial.println("Failed to open file for reading");
        return;
    }
     Serial.println("File Content:");
     while(file2.available()) Serial.write(file2.read()); 
     file2.close();
}
 
void loop() {}

Thank you

Ok. So i createt a new file called arduinotest.txt. In this file i wrote: test for arduino forum

I uploaded this file to my SPIFFS

I modiefied your code following:

#include "SPIFFS.h"
void setup() {
    Serial.begin(115200);  // <-- always use this, forget about 9600
    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
   }
 
    File file = SPIFFS.open("/arduinotest.txt", FILE_WRITE);
     if(!file){
        Serial.println("There was an error opening the file for writing");
        return;
    }
     if(file.print("arduinotest")){
        Serial.println("File was written");;
    } else {
        Serial.println("File write failed");
    }
     file.close();
 
    File file2 = SPIFFS.open("/arduinotest.txt");
     if(!file2){
        Serial.println("Failed to open file for reading");
        return;
    }
     Serial.println("File Content:");
     while(file2.available()) Serial.write(file2.read());
     file2.close();
}
 
void loop() {}

I get this result in my serial monitor

rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
mode:DIO, clock div:2
load:0x3fff0018,len:4
load:0x3fff001c,len:1044
load:0x40078000,len:8896
load:0x40080400,len:5828
entry 0x400806ac
File was written
File Content:
arduinotest

Shouldnt the part File Content be: test for arduino forum

Do you have an idea?

Thank you

No it's OK, this line writes "arduinotest" in the file:

 if(file.print("arduinotest")){

If you don't want to overwrite your file, remove these lines and try again from the beginning:

  File file = SPIFFS.open("/arduinotest.txt", FILE_WRITE);
     if(!file){
        Serial.println("There was an error opening the file for writing");
        return;
    }
     if(file.print("arduinotest")){
        Serial.println("File was written");;
    } else {
        Serial.println("File write failed");
    }
     file.close();

Anyways, it seems that the file is correctly read. But it wasn't the case in your previous answer.

Maybe there is a length limitation in the extension, i.e. 'html' wouldn't work while 'htm' would (I use '.htm' files, never tried '.html') ?

Or just try :

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.html"); //Send file with default content type
  });

with either indextest.html or indextest.htm

Thank you again.

Hard to solve^^. But i think i am one step further

So. I created a file called indextest.htm. When i click on the file, my browser opens i see the text.
<Hello World and so!>. Like i would expect it.
I uploaded the file to my SPIFFS and tested it with:

void setup() {
    Serial.begin(115200);  // <-- always use this, forget about 9600
    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
   }
 
    File file = SPIFFS.open("/indextest.htm", FILE_WRITE);
     if(!file){
        Serial.println("There was an error opening the file for writing");
        return;
    }
     if(file.print("arduinotestYes")){
        Serial.println("File was written");;
    } else {
        Serial.println("File write failed");
    }
     file.close();
 
    File file2 = SPIFFS.open("/indextest.htm");
     if(!file2){
        Serial.println("Failed to open file for reading");
        return;
    }
     Serial.println("File Content:");
     while(file2.available()) Serial.write(file2.read());
     file2.close();
}
 
void loop() {}

My serial monitor says:
rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
configsip: 0, SPIWP:0xee
clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00
mode:DIO, clock div:2
load:0x3fff0018,len:4
load:0x3fff001c,len:1044
load:0x40078000,len:8896
load:0x40080400,len:5828
entry 0x400806ac
File was written
File Content:
arduinotestYes

So as far as i see it. It should be ok.

I now uploaded this scetch to test further, if it works.

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
 
const char* ssid = "****";
const char* password =  "*****";
 
AsyncWebServer server(80);
 
void setup(){
  Serial.begin(115200);
 
  if(!SPIFFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.htm", "text/plain");
  });

  server.on("/hello", HTTP_GET, [](AsyncWebServerRequest *request)  
       {request->send(200, "text/plain", "Hello testest");}); 

 File file2 = SPIFFS.open("/indextest.htm", FILE_READ);
  while (file2.available()) Serial.print(file2.read());
  Serial.println();
 
  server.begin();
}
 
void loop(){}

Result: myIp/hello = Hello testest
Result. myIp/html = arduinotestYes

So it seems that my "overright" worked and i can read the file.

My next step was that i uploaded the file indextest.htm again, so that i contains the original content:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World and so!<p>
</body>
</html>

After that the same problem that nothing appears is back

I tried it with both

 server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.htm", "text/html");
  });

and

  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.htm", "text/plain");
  });

and my serial monitor is showing wrong things like:
j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�j�

Can u extract something out of it with this information?

Thank you

Did you try my last suggestion ?

 server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(SPIFFS, "/indextest.htm");
 });

sorry

yes tried it now.
Unforunely with the same negativ result:/

No I really don't understand. Please post your final code again.

what i have notcied.

When i write into my indextest.htm save it and upload it to SPIFF it does not work

But when i "modify" the file with this code

#include "SPIFFS.h"
 
void setup() {
    Serial.begin(115200);  // <-- always use this, forget about 9600
    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
   }
 
    File file = SPIFFS.open("/indextest.htm", FILE_WRITE);
     if(!file){
        Serial.println("There was an error opening the file for writing");
        return;
    }
     if(file.print("testestmodify")){
        Serial.println("File was written");;
    } else {
        Serial.println("File write failed");
    }
     file.close();
 
    File file2 = SPIFFS.open("/indextest.htm");
     if(!file2){
        Serial.println("Failed to open file for reading");
        return;
    }
     Serial.println("File Content:");
     while(file2.available()) Serial.write(file2.read());
     file2.close();
}
 
void loop() {}

i get: myIp/html = testestmodify

i dont get it, why it works in this way but in the other way not

uff

Thank you very much=)

Sorry. i try it again.

So this is my code

#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
 
const char* ssid = "*****";
const char* password =  "*****";
 
AsyncWebServer server(80);
 
void setup(){
  Serial.begin(115200);
 
  if(!SPIFFS.begin()){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
  }
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
 /*
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/indextest.htm", "text/plain");
  });*/


   server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(SPIFFS, "/indextest.htm");
 });
/*
  server.on("/hello", HTTP_GET, [](AsyncWebServerRequest *request)  
       {request->send(200, "text/plain", "Hello testest");}); 


 File file2 = SPIFFS.open("/indextest.htm", FILE_READ);
  while (file2.available()) Serial.print(file2.read());
  Serial.println();*/
 
  server.begin();
}
 
void loop(){}

When i enter now: myIP/html it works. BUT only after i modiefied my indextest.htm with this code:

#include "SPIFFS.h"
 
void setup() {
    Serial.begin(115200);  // <-- always use this, forget about 9600
    if(!SPIFFS.begin(true)){
        Serial.println("An Error has occurred while mounting SPIFFS");
        return;
   }
 
    File file = SPIFFS.open("/indextest.htm", FILE_WRITE);
     if(!file){
        Serial.println("There was an error opening the file for writing");
        return;
    }
     if(file.print("testestmodify")){
        Serial.println("File was written");;
    } else {
        Serial.println("File write failed");
    }
     file.close();
 
    File file2 = SPIFFS.open("/indextest.htm");
     if(!file2){
        Serial.println("Failed to open file for reading");
        return;
    }
     Serial.println("File Content:");
     while(file2.available()) Serial.write(file2.read());
     file2.close();
}
 
void loop() {}

Before that. It does not work. It seems that the modification with FILE_WRITE makes it readable for my code. But i have no clue why

Thank you

It may be due to the encoding format when you create your file on your computer, running Windows I presume.

I created the file with Notepad++, using UTF-8 encoding (not sure it's what is required), try to upload it as is in the SPIFFS and run your code.

indextest.zip (280 Bytes)

So after many anger and tears i found the solution

It seems that if you upload things with the arduino IDE it is not possible to "see" them with platformio. a wild guess is, that when you upload via arduino the absolut path of the file is kinda different then it appears in plaintext.

My solution was to upload my file directly via platformio. Here is a link on how to do so:

It seems that after that the absolut paths are readable.

Thanl you again for all the help

karma+1

1 Like