Read jpg file from FS, send HTTP to browser

[bb328]

Hi all,

I am using a esp32-cam sketch (this one), and it works fine in my environment (IDE ver 1.8.16, esp32 boards ver 2.0.1, AI-Thinker esp32-cam), and now I want to modify the sketch to do a few extra features.
So far I have managed to save the camera captured jpg files in LittleFS file system, and also to read those files and send them to a ftp server. The ftp part of my code (after ftp login) is:

      path = (String) "image.jpg";       // test file
      fullPath = (String) "/" + path ;

      const char * ftpFile = path.c_str();
      const char * FS_file = fullPath.c_str();

      File file = LittleFS.open(FS_file);
      if (!file) {
        Serial.println("LittleFS.open failed");
        return;
      }

      ftp.InitFile("Type I");                     // bin
      ftp.NewFile(ftpFile);
      Serial.printf("writing file: %s \n", ftpFile);

      while (file.available()) {                  // Create and fill a buffer
        unsigned char buf[1024];
        file.read(buf, sizeof(buf));
        ftp.WriteData(buf, sizeof(buf));
      }
      ftp.CloseFile();
      file.close();

It works well, and I think maybe I can re-use some of that code in my next challenge, which is to read a jpg file from LittleFS and feed a HTTP "handler" that would display the image just like the original "capture handler" displays the image taken with the camera.
I find the HTTP coding rather difficult to understand, so I hope some of you can help me with this last part. Here is the original capture handler (works fine):

static esp_err_t capture_handler(httpd_req_t *req) {

  fb = NULL;
  esp_err_t res = ESP_OK;

  Serial.println("Capture Requested");

  fb = esp_camera_fb_get();
  if (!fb) {
    Serial.println("CAPTURE: failed to acquire frame");
    httpd_resp_send_500(req);
    if (autoLamp && (lampVal != -1)) setLamp(0);
    return ESP_FAIL;
  }

  httpd_resp_set_type(req, "image/jpeg");
  httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");

  if (fb->format == PIXFORMAT_JPEG) {
    res = httpd_resp_send(req, (const char *)fb->buf, fb->len);
  } else {
    jpg_chunking_t jchunk = {req, 0};
    res = frame2jpg_cb(fb, 80, jpg_encode_stream, &jchunk) ? ESP_OK : ESP_FAIL;
    httpd_resp_send_chunk(req, NULL, 0);
  }

  esp_camera_fb_return(fb);
  return res;
}

My (not completed) attempt so far is:

// Read jpg from FS, display in web server
static esp_err_t FS_handler(httpd_req_t *req) {

  esp_err_t res = ESP_OK;

  Serial.println("FS image requested");
  String fullPath = "/image.jpg";                   // test file
  const char * FS_file = fullPath.c_str();
  File file = LittleFS.open(FS_file);
  if (!file) {
    Serial.println("LittleFS.open failed");
    httpd_resp_send_500(req);
    return ESP_FAIL;
  }

  httpd_resp_set_type(req, "image/jpeg");
  httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");

  while (file.available()) {              // Create and fill a buffer
    unsigned char buf[1024];              // (re-used code from ftp upload)
    file.read(buf, sizeof(buf));

    // How to do this ? (original code below)
    //jpg_chunking_t jchunk = {req, 0};
    //res = frame2jpg_cb(fb, 80, jpg_encode_stream, &jchunk) ? ESP_OK : ESP_FAIL;
    //httpd_resp_send_chunk(req, NULL, 0);
  }

  file.close();
  return res;
}

How can I connect buf with the http stream ?
Any advice much appreciated.
Thanks.