possible to select a filename on custom page

[ageurtse]

Is it possible to select a filename on a custom webpage, or is there a way to implement this. I realy would like to have this feather.

[Hieromon]

You can use a <input type="file"> tag with AutoConnectElement. Like this:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <AutoConnect.h>

static const char PAGE_FILENAME[] PROGMEM = R"(
[
  {
    "title": "File name input",
    "uri": "/input",
    "menu": true,
    "element": [
      {
        "name": "caption",
        "type": "ACText",
        "value": "File name input Demo."
      },
      {
        "name": "filename",
        "type": "ACElement"
      },
      {
        "name": "send",
        "type": "ACSubmit",
        "value": "Upload",
        "uri": "/echo"
      }
    ]
  },
  {
    "title": "File name",
    "uri": "/echo",
    "menu": false,
    "element": [
      {
        "name": "caption",
        "type": "ACElement",
        "value": "File name: "
      },
      {
        "name": "echo",
        "type": "ACElement"
      }
    ]
  }
]
)";

AutoConnect portal;

String selectFile(AutoConnectAux &aux, PageArgument& args) {
  AutoConnectElement* elmFilename = aux.getElement("filename");
  elmFilename->value = "Select file: <input type=\"file\" name=\"filename\">";
  return String();
}

String echoBack(AutoConnectAux &aux, PageArgument& args) {
  AutoConnectAux* auxInput = portal.aux("/input");
  AutoConnectElement* elmFilename = auxInput->getElement("filename");
  String fileName = elmFilename->value;
  Serial.print("File name:");
  Serial.println(fileName);
  AutoConnectElement* elmEcho = aux.getElement("echo");
  elmEcho->value = fileName;
  return String();
}

void setup() {
  delay(1000);
  Serial.begin(115200);
  Serial.println();

  portal.load(PAGE_FILENAME);
  portal.on("/input", selectFile);
  portal.on("/echo", echoBack);
  portal.begin();
}

void loop() {
  portal.handleClient();
}

[Hieromon]

@ageurtse Until you pointed out, I thought that I could handle input type=file for file selecting with AutoConnectElement. But my thoughts were insensitive. As a result of my lack of thought, the implementation of file selection elements is very tricky as above. The library has an absence obviously of the AutoConnectFileselect element. Also, the AutoConnectElement type of the getElement template function is also missing. I have to support these things with v0.9.8.

1. Supports AutoConnectFileselect element
2. Supports AutoConnectElement type with getElement template.

You always suggest to me what is missing. Thank you.

[Hieromon]

P.S. @ageurtse If you want to upload the file object with the file name you received with the File-select tag, you can not do with the above code. To receive the upload with esp8266 or esp32, we need the following two things:

1. enctype='multipart/form-data' attribute with the form which generated by the custom Web page.
2. An uploading handler in the sketch.

For adding the entype, the library shoud be improved. For the upload hander, we can specify the handler with ESP8266WebServer::onFileUpload function. So, I will improve to generate the enctype attribute if input type=file tag contained.

[ageurtse]

I ask this so i can make a custom page for webupdating, yes there is it again. This is stil somthing that is low on my wish list, first need to code the rest of my project.

[Hieromon]

For now, combining ESP8266HTTPUpdateServer makes it possible to incorporate OTA into the AutoConnect menu even with v0.9.7. Declare AutoConnectAux with update uri of ESP8266HTTPUpdateServer and join it to AutoConnect. You may already have tried this approach, the sketch is, for example like this:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <ESP8266HTTPUpdateServer.h>
#include <AutoConnect.h>

const char* host = "esp8266-webupdate";

static const char AUX_AppPage[] PROGMEM = R"(
{
  "title": "Hello world",
  "uri": "/",
  "menu": true,
  "element": [
    {
      "name": "caption",
      "type": "ACText",
      "value": "<h2>Hello, world</h2>",
      "style": "text-align:center;color:#2f4f4f;padding:10px;"
    },
    {
      "name": "content",
      "type": "ACText",
      "value": "In this page, place the custom web page handled by the sketch application."
    }
  ]
}
)";

ESP8266WebServer httpServer(80);
ESP8266HTTPUpdateServer httpUpdater;
AutoConnect portal(httpServer);
AutoConnectAux hello;
AutoConnectAux update("/update", "Update");

void setup(void) {
  delay(1000);
  Serial.begin(115200);
  Serial.println("\nBooting Sketch...");
  httpUpdater.setup(&httpServer);
  hello.load(AUX_AppPage);
  portal.join({ hello, update });
  portal.begin();
  MDNS.begin(host);
  MDNS.addService("http", "tcp", 80);
  Serial.printf("HTTPUpdateServer ready! Open http://%s.local/update in your browser\n", host);
}

void loop(void) {
  portal.handleClient();
}

However, I'm now designing some functions inspired by your request and please review whether these two features meet your requirements.

1. Binary sketch HTTP update feature Update sketch binary of ESP module from AutoConnect menu. It is similar to ESP8266HTTPUpdateServer but does not use mDNS, it also works from different network segments or Internet. This is an implementation for issue #26.

2. File upload feature Add the input type="file" tag to the AutoConnectElements. We call that element temporarily AutoConnectFile. AutoConnectFile outputs the file selected by the browser to the stream of ESP8266/ESP32. The user sketch can specify SD or EEPROM as a stream. This is an implementation for issue #50, that is, this topic.

[ageurtse]

this is nice, i didn't know of this :) sorry i'm not that good in programming.

thanks, for helping.

[Hieromon]

I supported a new element AutoConnectFile which can select a file and upload it with built-in upload handler. The built-in upload handler receives a file and saves to SPIFFS/SD automatically without the sketch code, and you can store it an external also by your owned sketch code. It has been previewed on the develop branch enhance/v098. This enhancement requires the new PageBuilder1.3.3 which is on the develop branch of PageBuilder repository.

[Hieromon]

Merged #57