Introduction: How to Serve Html Files From SD Card on ESP32

In this tutorial, we will setup the ESP32 as a server which can be accessed by going to its IP address.


Arduino IDE For ESP32


Step 1: Ready Your HTML File

Ready your HTML file on any text editor you use. I use VSCODE and here's the html I used. The image tag <img> source (src) should be "/" + path . For example, to show the image named "plants.jpg", the image tag is as follows:<img class="picture" style="max-width:100%;" src="/plants.jpg">. Change all source tags to be similar to your path.

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Greenhouse">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        .center {
            margin: auto;
            text-align: center;

        .left {
            float: left;

        .right {
            float: right;

        .card {
            border-style: solid;
            border-width: 1px;
            border-color: #F7DC6F;
            padding: 5px;
            margin: 20px;

        .container {
            position: relative;

        .top-left {
            position: absolute;
            top: 8px;
            left: 16px;
            text-align: left;

        .hide {
            position: absolute;
            opacity: 0;

        input[type=checkbox]+label {
            color: rgb(129, 129, 129);
            font-style: italic;
            padding: 5px;

        input[type=checkbox]:checked+label {
            color: #000000;
            font-style: normal;
            padding: 5px;

<body class="center" onload="onload()" style="font-family: Verdana, Geneva, Tahoma, sans-serif;">
    <h1 class="center">Pulilan Greenhouse</h1>
    <div class=card style="border-color: #ffffff;">
        <img class="picture" id="slideshow" src="/picture/1.jpg" style="max-width:100%;">
        <p> </p>
        <button class="left" id="prev">❮ Prev</button>
        <button class="right" id="next">❯ Next</button>
        <button href="/picture/1.jpg" download id="download">Download</button>
        <button id="take_photo">Take Photo</button>
    <div class=card>
        <div style="background-color:#F7DC6F;">
        <div class="container">
            <img class="picture" style="max-width:100%;" src="/plants.jpg">
            <div class="top-left">
                <p id="temp"> Temp: 0 ℃ </p>
                <p id="RH"> RH: 0 % </p>

    <div class=card>
        <div style="background-color:#F7DC6F;">
        <table style="width: 100%;">
                        <input class="hide" type="checkbox" onchange="relay(" id="1">
                        <label for="1">Relay 1</label>
                        <input class="hide" type="checkbox" onchange="relay(" id="2">
                        <label for="2">Relay 2</label>
                        <input class="hide" type="checkbox" onchange="relay(" id="3">
                        <label for="3">Relay 3</label>
                        <input class="hide" type="checkbox" onchange="relay(" id="4">
                        <label for="4">Relay 4</label>
                        <input class="hide" type="checkbox" onchange="relay(" id="5">
                        <label for="5">Relay 5</label>
                        <input class="hide" type="checkbox" onchange="relay(" id="6">
                        <label for="6">Relay 6</label>

    <div class=card>
        <div style="background-color:#F7DC6F;text-align: center;">
        <div class="container" style="text-align: left;">
            Time: <input type="time"><br>
            Duration: <input type="number" style=" width:50px;"> mins <br>
            Days: <span class="days">
                <input class="hide" onchange="day_selection(" id="sun" name="sun" type="checkbox" value="0">
                <label for="sun">S</label>
                <input class="hide" onchange="day_selection(" id="mon" type="checkbox" value="0">
                <label for="mon">M</label>
                <input class="hide" onchange="day_selection(" id="tue" type="checkbox" value="0">
                <label for="tue">T</label>
                <input class="hide" onchange="day_selection(" id="wed" type="checkbox" value="0">
                <label for="wed">W</label>
                <input class="hide" onchange="day_selection(" id="thur" type="checkbox" value="0">
                <label for="thur">T</label>
                <input class="hide" onchange="day_selection(" id="fri" type="checkbox" value="0">
                <label for="fri">F</label>
                <input class="hide" onchange="day_selection(" id="sat" type="checkbox" value="0">
                <label for="sat">S</label>

        function onload() {

        var picture = 1;
        var next = document.getElementById("next");
        next.addEventListener("click", function () {
            picture += 1;
            console.log("picture", picture);
            document.getElementById("slideshow").src = "/picture/" + picture + ".jpg";

        var download = document.getElementById("download");
        download.addEventListener("click", function () {
            console.log("downlaod", document.getElementById("slideshow").src);

        var prev = document.getElementById("prev");
        prev.addEventListener("click", function () {
            picture -= 1;
            console.log("picture", picture);
            document.getElementById("slideshow").src = "/picture/" + picture + ".jpg";;

        var take_photo = document.getElementById("take_photo");

        function relay(id) {
            console.log(id, document.getElementById(id).checked);
        function day_selection(id) {
            console.log("id", id, document.getElementById(id).value);

Step 2: Prepare Your SD Card

  1. Format your sd card as shown in the picture
  2. Place Your index.html file and pictures. Ensure the picture filenames are the same that is included in your html file.

Step 3: ESP32 Web Server Code

This Code serves HTML File from the SD Card built in with the ESP32 Dev Module I'm using. Upload it on your ESP32 and go to the ip address displayed on your serial monitor. While uploading press the flash button continuously and reset button once while connecting until it starts writing (uploading).

//Load necessaries libraries from
#include <WiFi.h>             // Add Wifi Capabilities
#include <WebServer.h>        //To make a simple webserver that accomodates only one simultaneous client

#include "FS.h"              //To access the file system 
#include "SD_MMC.h"          //To access the SD Card

//replace with your network credentials
#ifndef STASSID
#define STASSID "replace_with_your_ssid"<br>#define STAPSK  "replace_with_your_ssid_pass"<br>

const char* ssid = STASSID;
const char* password = STAPSK;

WebServer server(80); //Set the server at port 80

void setup() {
  Serial.begin(115200); //Set the baud rate for serial communication with ESP

  if (!SD_MMC.begin()) { //initialize SD Card
    Serial.println("SD Card Mount Failed");
  uint8_t cardType = SD_MMC.cardType();  //get sd card type
  if (cardType == CARD_NONE) { //check if the sd card presence
    Serial.println("No SD Card attached");

  WiFi.mode(WIFI_STA); //Connect it to a wifi Network
  WiFi.begin(ssid, password); //with the ssid and password defined earlier

  while (WiFi.status() != WL_CONNECTED) {// Wait for connection
  Serial.print("Connected to ");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP()); //prints the local ip given to the esp by the router

  server.onNotFound(handleRoot); //Calls the function handleRoot regardless of the server uri ex.( server uri is "/edit")
  server.begin();//starts the server
  Serial.println("HTTP server started");

void handleRoot() {

  /* SD_MMC pertains to the sd card "memory". It is save as a
    variable at the same address given to fs in the fs library
    with "FS" class to enable the file system wrapper to make
    changes on the sd cards memory */
  fs::FS &fs = SD_MMC;
  String path = server.uri(); //saves the to a string server uri ex.( server uri is "/edit")
  Serial.print("path ");  Serial.println(path);

  //To send the index.html when the serves uri is "/"
  if (path.endsWith("/")) {
    path += "index.html";

  //gets the extension name and its corresponding content type
  String contentType = getContentType(path);
  Serial.print("contentType ");
  File file =, "r"); //Open the File with file name = to path with intention to read it. For other modes see <a href="" style="font-size: 13.5px;"></a>
  size_t sent = server.streamFile(file, contentType); //sends the file to the server references from <a href="" style="font-size: 13.5px;"></a>
  file.close(); //Close the file

//This functions returns a String of content type
String getContentType(String filename) {
  if (server.hasArg("download")) { // check if the parameter "download" exists
    return "application/octet-stream";
  } else if (filename.endsWith(".htm")) { //check if the string filename ends with ".htm"
    return "text/html";
  } else if (filename.endsWith(".html")) {
    return "text/html";
  } else if (filename.endsWith(".css")) {
    return "text/css";
  } else if (filename.endsWith(".js")) {
    return "application/javascript";
  } else if (filename.endsWith(".png")) {
    return "image/png";
  } else if (filename.endsWith(".gif")) {
    return "image/gif";
  } else if (filename.endsWith(".jpg")) {
    return "image/jpeg";
  } else if (filename.endsWith(".ico")) {
    return "image/x-icon";
  } else if (filename.endsWith(".xml")) {
    return "text/xml";
  } else if (filename.endsWith(".pdf")) {
    return "application/x-pdf";
  } else if (filename.endsWith(".zip")) {
    return "application/x-zip";
  } else if (filename.endsWith(".gz")) {
    return "application/x-gzip";
  return "text/plain";

void loop() {
  /*Waits For connection on the server and is responsible for
    sending and receivingdata request on server uri from the client*/

Step 4: Next Steps

In this tutorial, I’ve shown you how to build a web server with the ESP32. In combination with the websockest library for arduino, I've used this to take make a Dashboard that shows ESP32 CAM pictures and sensors data fro my greenhouse. Hope it worked fro you! Feel free to ask for questions! Good luck makers! :)