title: Add multiple SPIFFS files to captive portal on Async web server on ESP32
body: <p>I'm using simple code of modified Captive portal with asynchronous web portal (from ESPAsyncWebServer library - <a href="https://github.com/me-no-dev/ESPAsyncWebServer" rel="nofollow noreferrer">https://github.com/me-no-dev/ESPAsyncWebServer</a>). It send html page from SPIFFS flash memory.</p>
  <p>The way it is working now, is that it send index.html on any connection. I've just modified single line that in mentioned example was sending hmtl code. What I'd like to archive, is to be able to send more files, like html file and image.</p>
  <p>So here is my code:</p>
  <pre><code>#include &lt;DNSServer.h&gt;
  #include &lt;WiFi.h&gt;
  #include &lt;AsyncTCP.h&gt;
  #include &quot;ESPAsyncWebServer.h&quot;
  #include &lt;SPIFFS.h&gt;
  
  DNSServer dnsServer;
  AsyncWebServer server(80);
  
  class CaptiveRequestHandler : public AsyncWebHandler {
    public:
      CaptiveRequestHandler() {}
      virtual ~CaptiveRequestHandler() {}
  
      bool canHandle(AsyncWebServerRequest *request) {
        //request-&gt;addInterestingHeader(&quot;ANY&quot;);
        return true;
      }
  
      void handleRequest(AsyncWebServerRequest *request) {
        request-&gt;send(SPIFFS, &quot;/index.html&quot;, String(), false);
      }
  };
  
  void setup() {
  
    Serial.begin(115200);
  
    if (!SPIFFS.begin()) {
      Serial.println(&quot;An Error has occurred while mounting SPIFFS&quot;);
      return;
    }
  
    WiFi.softAP(&quot;esp-captive&quot;);
    dnsServer.start(53, &quot;*&quot;, WiFi.softAPIP());
  
    server.addHandler(new CaptiveRequestHandler()).setFilter(ON_AP_FILTER);//only when requested from AP
  
    server.on(&quot;/image1&quot;, HTTP_GET, [](AsyncWebServerRequest * request) {
      request-&gt;send(SPIFFS, &quot;/image1.jpg&quot;, &quot;image/jpg&quot;); // this part has been modified
    });
  
    server.begin();
  }
  
  void loop() {
    dnsServer.processNextRequest();
  }
  </code></pre>
  <p>I've tried to add</p>
  <pre><code>  server.on(&quot;/image1&quot;, HTTP_GET, [](AsyncWebServerRequest * request) {
      request-&gt;send(SPIFFS, &quot;/image1.jpg&quot;, &quot;image/jpg&quot;); // this part has been modified
    });
  </code></pre>
  <p>in setup section as explained here - <a href="https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/" rel="nofollow noreferrer">https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/</a></p>
  <p>But it's not working. I've tried messing with path changing &quot;/&quot; in places whare it appears, but with no luck. Further, if I change</p>
  <pre><code>void handleRequest(AsyncWebServerRequest *request) {
    request-&gt;send(SPIFFS, &quot;/index.html&quot;, String(), false);
  }
  </code></pre>
  <p>to</p>
  <pre><code>void handleRequest(AsyncWebServerRequest *request) {
    request-&gt;send(SPIFFS, &quot;/image1.jpg&quot;, &quot;image/jpg&quot;);
  }
  </code></pre>
  <p>when logging to AP I get image not website, so I think paths are good.</p>
  <p>To add more information this is my webpage code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html style=&quot;height: 100%&quot;&gt;
  &lt;head&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;/head&gt;
  &lt;body style=&quot;background-image: url('image1'); background-size: contain; background-color: black; background-repeat: no-repeat; background-position: 50% 0%; height=100%&quot;&gt;
  &lt;h1 style=&quot;color:white&quot;&gt;ESP32&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and it is working fine on non-captive_portal solution (as explaind in previously mentioned tutorial).</p>
  <p>So my question is how can I get to load not only single file on captive portal in asynchronous webserver, but more complicated (still very simple) webpage?</p>