[ESP32][ASyncwebserver]ESP32側で動的に生成されるSPIFFS内のログファイルを、クライアント側にダウンロードしたい

Question

概要

ESP32にsoftAP機能とAsyncwebserverを実装して、非同期Webサーバとして運用しています
ESP32はSPIFFSファイルシステムを利用しており、HTMLなどの静的ファイルやログcsvなどの動的ファイルが保存されています

実現したいこと

クライアント側 Web画面上からの操作でSPIFFS内のログcsvをダウンロード(PC側に保存)したいです
ただ、ログcsvは動的に生成されるためあらかじめファイル名が決まっておらず、server.onでファイル名にアクセスされた時の動作を規定するAsyncwebserverの一番簡単な方法が使えずに困っています

問題点

オーソドックスにSPIFFS内に保存されたファイルをWebページ上からダウンロードしようと思ったら、下記の様になりますよね

<a href="/log/test.csv">dammy.csv</a>

server.on("/log/test.csv", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/log/test.csv", "text/csv");
    delay(1) ;
  });

しかし、上記例では試験的にあらかじめ用意したtest.csvという名前のファイルをダウンロードするだけだからいいですが、実際にはログは動的に生成され、ファイル名が都度変わります
ファイル名が事前に決まっていないとserver.onの待ち受けアドレス(最初の引数)でファイル名にアクセスされるのを待ち受ける形にはできません

試したこと

a hrefを使うのではなく、クライアント側からダウンロードしたいファイルのパスをFormDataに含んだPOSTを発出し、POSTを受けてサーバ側が関数を呼び出し、該当のパスのファイルをレスポンスとしてクライアント側に返すようにしてみましたが、何の反応もありません。
レスポンスがうまくできていないのか、もしくはレスポンス自体は帰っているけど、クライアント側が「これはダウンロードするデータだ」と認識していなくてスルーしているのか分かりませんが…javascript側にレスポンスを待ち受ける記述が必要なのでしょうか…

<input id="path_input" type="text" name="path_input"><br>
<button id="path" type="button" name="path" form="path_input" value="form_value" onclick="POST_event(this);">DOWNLOAD</button>

function POST_event(ele)
    {
      var formID = ele.getAttribute("form");
      var buttonNAME = ele.getAttribute("name");
      var buttonVALUE = document.getElementById(formID).value;

      var XHR = new XMLHttpRequest();
      var postDatas = new FormData();
      postDatas.append(buttonNAME,  buttonVALUE);
      XHR.open("POST", "/POST_Receiver", true);
      XHR.send(postDatas);
    }

// POST解析&処理
  server.on("/POST_Receiver", HTTP_POST, [](AsyncWebServerRequest *request) {
    int params = request->params();
    for(int i=0;i<params;i++)
    {      
      AsyncWebParameter* p = request->getParam(i);
      String name  = p->name().c_str();
      String value = p->value().c_str();      
      if( name == "path" ){AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/test.csv", "text/csv"/*value.c_str(), String(), true*/); request->send(response);}
    }
    delay(1) ;
  });

要約

実現したいことは、動的に生成される、あらかじめファイル名が定まっていないログファイルを、クライアント側にダウンロードしたい、ということです
「試したこと」の方向性自体が間違っているのか、それとも方向性は合っているけど記述が不足している、間違っているのか
他にこのような方法があるんじゃないのか、などアドバイスいただけると嬉しいです

追記

今、一つパッと思いついたのですが、server.onNotFoundで指定されたパスのファイルがSPIFFS内に存在するかlistDirで検索して、一致した場合にそのファイルをrequest->sendすれば、a herfやJavaScriptのlocation.replace(link);でダウンロードできるかも…

それと、参考にしている(というか本家の)ページにこんな記述がありました。
https://github.com/me-no-dev/ESPAsyncWebServer#file-upload-handling

// save callback for particular URL path
auto handler = server.on("/some/path", [](AsyncWebServerRequest *request){
  //do something useful
});

これを使って、/log以下にアクセスされたときに起動するハンドラーが作れたりしないかなぁ…
本日は他の作業をやらなくてはならず時間がないため、検証は来週に行うことにします…

Answer 1

レスポンスがうまくできていないのか、もしくはレスポンス自体は帰っているけど、クライアント側が「これはダウンロードするデータだ」と認識していなくてスルーしているのか分かりませんが

原因を明確にする必要があると思います。例えば、"/POST_Receiver"の中で、paramsやname、valueが想定した値になっているのか、シリアルコンソールに表示して確認するとか。JavaScriptもですね。

あと、Webサーバでは同期通信しかしていないようなので、WebServerライブラリの枠組みを使って、以下のような方法もあると思います。

void handleReadFile() {
    String path = server.arg("path");
    Serial.println("File name: " + path); // デバッグ用

    SPIFFS.begin(true);
    if (SPIFFS.exists(path)) {
        File file = SPIFFS.open(path, "r");
        server.streamFile(file, "text/csv");
        file.close();
    } else {
        server.send(200, "text/plain", path + " does not exist.");
    }
    SPIFFS.end();
}

このコードで、以下を実行すると、/test.csvの内容が返却されました。もちろん、server.on("/readFile", handleReadFile);して、/readFileで、readFile()が実行されるようにしています。

$ curl http://SERVERADDRESS/readFile?path=/test.csv

SPIFFSに関して、

• SPIFFS.begin(true)は、SPIFFSが未フォーマットの場合はフォーマットするので注意してください。
• SPIFFS.begin()は、setup()の中で実行しても問題ないと思います。その場合、SPIFFS.end()は、handleReadFile()の中で行わないでください。

Comments

[Mudo_Ayumu]

回答ありがとうございます。
現状、周りにアドバイスしてくれる人間がおらず独学でやっているので、迅速にアドバイスいただけて非常に助かります。

---

本日、追検証の時間が取れないので後日もう一度確認してみますが、
一度返信させていただきます。

Asyncwebserverは普通のwebserverと同じメソッドが使えないことが多いようで、
server.arg、server.streamFileは一度試したことがありますが、これらも使えなかったと思います。

質問文の中では文字数制限対策に省略していましたが、/POST_Receiverで受け取ったname,valueは想定通りであることを確認しています。

Serial.printf("\n[POST Received]\t");
Serial.printf("name:%s\tvalue:%s\n",name.c_str(),value.c_str());

以上、時間が取れた時にもう一度確認してみます

[mkgt00]

> Asyncwebserverは普通のwebserverと同じメソッドが使えないことが多いようで、
server.arg、server.streamFileは一度試したことがありますが、これらも使えなかったと思います。

私が書いたのは、以下の通りで、WebServerライブラリを使う方法です。
> Webサーバでは同期通信しかしていないようなので、WebServerライブラリの枠組みを使って

JavaScriptからではなく、curlなどのツールを使って、POSTの結果を取得してみるのが早いのではと思いました。うまく取得できていれば、JavaScript側の表示の問題だし、取得できていなければ、Webサーバ側の問題と、切り分けができるので。

[Mudo_Ayumu]

この質問の内容は現在製作しているソフトの一部の機能のみに焦点を当てて質問しています。
質問の内容部分だけなら非同期である必要はないので通常のWebServerライブラリでもいいのですが、質問に書いてない部分で非同期である必要があるのでAsync~を使ってます。

curlというツールは知らなかったので少し調べてみましたが、すごく便利そうですね!
使い方など勉強してみようと思います。
サーバ側がPOSTを正しく受けてるところまで確認できているので、残りは
①そもそもサーバ側がレスポンスとしてファイルを投げていないのか
②サーバ側がレスポンスを返しているのにクライアント側が受け取れていないのか
ここを切り分けるということですね

[mkgt00]

AsyncWebServerを利用した、Arduino側のコードは正しく動作するようです(動作しました)。気になるのは、SPIFFS(begin)をしているか、本当に、/test.csvが存在するかくらいです。

あと、curlコマンドですが、今回は、POSTメソッドを使うので、以下が正しいです。前回のは、GETメソッドを使います。申し訳ありません。

curl -X POST "http://SERVERADDRESS/POST_Receiver" -d "path=/test.csv"

[Mudo_Ayumu]

本日少しだけ時間が取れたので検証してみました。

curlからPOSTしてみた結果、レスポンスとしてtest.csvの中身の文字列が返っていることが確認できました。一歩前進です。

C:\curl\bin>curl -X POST "http://192.168.1.100/POST_Receiver" -d "path="
aaa,bbb,ccc
ddd,eee,fff

ということは、クライアント側がレスポンスを受け取っているが「ダウンロードするもの」として認識していないため、受け取っただけでスルーしているということでしょうか
javascript側でレスポンスをダウンロードするような記述をしてあげればそれで解決できそうな気がしてきました

Answer 2

function POST_event(ele)の中に下記の様に記述を入れることでレスポンスをダウンロードできました

xhr.onreadystatechange = function()
      {
        if (this.readyState == 4 && this.status == 200)
        {
          let bom  = new Uint8Array([0xEF, 0xBB, 0xBF]);
          let blob = new Blob([bom, this.response], {type: 'text/csv'});
          var urlUtil = window.URL || window.webkitURL;
          var DLUrl = urlUtil.createObjectURL(blob);
          var link = document.createElement('a');
          link.href=DLUrl;
          link.download = formVALUE;
          document.body.appendChild(link);
          link.click();
        }
      };

let bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
let blob = new Blob([bom, this.response], {type: 'text/csv'});
の2行はCSVにUTF-8 BOM情報を付与するものです。
BOMなしの場合は必要ありません。その場合は

xhr.onreadystatechange = function()
      {
        if (this.readyState == 4 && this.status == 200)
        {
          var urlUtil = window.URL || window.webkitURL;
          var DLUrl = urlUtil.createObjectURL(this.responce);
          var link = document.createElement('a');
          link.href=DLUrl;
          link.download = formVALUE;
          document.body.appendChild(link);
          link.click();
        }
      };

でOKでした