ESP8266WebServerを使ってSPIFFSファイルビューアを作成する

気楽にESP8266内部のfavicon.icoやindex.htmlを書き換えたり、画像をアップロードしたいと思ったらプログラム作成の吉日です。　WebServerでファイル操作を行える基本ソフトを作ってみました。
プログラム内で表示するWebページを持っているので、使いやすいと思います。
僕は以前の改造と組み合わせて、SSID・Password・他の設定などを登録できる様にして
IOT端末っぽくしています。


#ESP8266環境で必要なリソース
　SPIFFSとMDNSを使います。

#ESP32で使うには？
  ESP8266WebServerを移植すると動作可能になります。(確認済)
  過去の日記に移植内容を書いてあります。 ※数行治す程度です。



#機能
　WindowsのGoogle ChromeよりESP8266.local/files.htmlへアクセスすることで
　ファイル一覧が確認できる。
　任意のファイルを削除できる。
　任意のファイルの内容をテキスト表示できる。
　任意のファイルをダウンロードできる。
　Windows上の任意のファイルをアップロードできる。


#使い方

記事「ESP8266で遊ぶための初期コードを作成する」にて画面紹介等しておきました。
メインソースはこんな風にします。

```ino:esp8266.ino:

#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <ESP8266WebServer.h>
#include <FS.h>
const char* ssid = "guest";
const char* password = "guest";

ESP8266WebServer server(80);
// HTMLヘッダ
const char *ESPHTMLHeader ="<html lang=\"ja\">\n<head>\n\
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">\n\
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n</head>\n";
char *ESPfilename = "filename";
//=====================================================================================
// 選択ファイルをテキストで表示する
void ESPlist(){
  Serial.print( "display text : " );  Serial.println( server.arg(1) );
  String dataType = "text/plain";
  String path = "/" + server.arg(1);
  File dataFile = SPIFFS.open( path, "r");
  if (server.streamFile(dataFile, dataType) != dataFile.size())
    Serial.println("Sent less data than expected!");
  dataFile.close();
}
//=====================================================================================
// 選択ファイルを起動する(htmlなら普通に表示
void ESPexec(){
  Serial.print( "execute file : " );  Serial.println( server.arg(1) );
  String path = "/" + server.arg(1);
//loadFromDataFile( path );
}
//=====================================================================================
// 削除ファイルを実際に削除する
void ESPremove(){
  String path = "/" + server.arg(1);
  SPIFFS.remove(path);
  Serial.print( "removed file : " );  Serial.println( server.arg(1) );
}
//=====================================================================================
// アップロード用htmlを表示する
void ESPuploadhtml( ){
  Serial.println( "execute : upload.html" );
  String output = ESPHTMLHeader;
  output += "\
<form method=\"POST\" action=\"/upload\" enctype=\"multipart/form-data\">\n\
<p>Select upload file</p>\n<input type=\"file\" name=\"file\"/><br>\n\
<input type=\"submit\" value=\"SUBMIT\">\n</form>\n</html>\n";
  server.send(200, "text/html", output);
}
//=====================================================================================
// ファイル一覧及び削除ファイルの選択
void ESPfiles( ){
  if( 0<server.args() ){
    if( server.arg(0)=="remove" )     ESPremove();
    if( server.arg(0)=="list" ){      ESPlist();      return; }
    if( server.arg(0)=="exec" ){      ESPexec();      return; }
    if( server.arg(0)=="/upload.html" ){  ESPuploadhtml();  return; }
  }
  String output = ESPHTMLHeader;
  output += "\
<form name='files' action=/files.html method='post'>\
<p><select name=\"mode\">\n\
<option value=\"exec\" selected>exec file</option>\
<option value=\"list\">source list</option>\
<option value=\"/upload.html\">upload file</option>\
<option value=\"remove\">remove file</option>\
</select><br>";
  Dir dir = SPIFFS.openDir( server.arg("dir") );
  while(dir.next()){
    File entry = dir.openFile("r");
    output += "<input type=\"radio\" name=\"remove\" value=\"";
    output += String(entry.name()).substring(1);
    output += "\">";
//
    output += "<a href=\"http://";
    output += MYHOSTNAME;
    output += ".local/";
    output += String(entry.name()).substring(1);
    output += "\">";
//
    output += String(entry.name()).substring(1);
    output += "\n<br>";
    entry.close();
  }
  output += "<input type=submit value=OK target=tif>\n</form>\n</html>\n";
  server.send(200, "text/html", output);
}
//=====================================================================================
// upload.htmlで選択したファイルをアップロードする
File fsUploadFile;
void ESPhandleFileUpload(){
  HTTPUpload& upload = server.upload();
  if(upload.status == UPLOAD_FILE_START){
    String filename = "/" + upload.filename;
    Serial.print( "upload [" );
    Serial.print( filename );
    Serial.print( "] start:");
    fsUploadFile = SPIFFS.open( filename, "w");
  } else if(upload.status == UPLOAD_FILE_WRITE){
    if(fsUploadFile)
      fsUploadFile.write(upload.buf, upload.currentSize);
    Serial.print( upload.currentSize );
    Serial.print( ":" );
  } else if(upload.status == UPLOAD_FILE_END){
    if(fsUploadFile)
      fsUploadFile.close();
    Serial.println( "end");
  }
}
//=====================================================================================
void setup(void)
{  
  Serial.begin(115200);
  SPIFFS.begin();
  
  // Connect to WiFi network
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");  
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (!MDNS.begin("esp8266")) {
    Serial.println("Error setting up MDNS responder!");
    while(1) { 
      delay(1000);
    }
  }
  Serial.println("mDNS responder started");
  
  // Start TCP (HTTP) server
  server.begin();
  Serial.println("TCP server started");

  // Add service to MDNS-SD
  MDNS.addService("http", "tcp", 80);

  //
  server.on("/upload", HTTP_POST, [](){ ESPfiles(); }, ESPhandleFileUpload);
  server.on("/files.html", ESPfiles);
  server.on("/upload.html", ESPuploadhtml);
}
//=====================================================================================
void loop(void)
{
  server.handleClient( );
  MDNS.update();
}


```