Comments (8)
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();
}
from autoconnect.
@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.
- Supports AutoConnectFileselect element
- Supports AutoConnectElement type with getElement template.
You always suggest to me what is missing. Thank you.
from autoconnect.
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:
enctype='multipart/form-data'
attribute with the form which generated by the custom Web page.- 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.
from autoconnect.
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.
from autoconnect.
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.
-
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. -
File upload feature
Add theinput 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.
from autoconnect.
this is nice, i didn't know of this :)
sorry i'm not that good in programming.
thanks, for helping.
from autoconnect.
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.
from autoconnect.
Merged #57
from autoconnect.
Related Issues (20)
- ESP32 problem HOT 8
- Mqtt Example HOT 2
- Using "AutoConnectCore.h" header and running into errors HOT 2
- AutoConnect to offer captive portal for 5min even if ESP32 is WiFi-Connected HOT 1
- AutoConnect on WiFi connection error shows too many redirects. HOT 2
- AutoConnectCore Not Working HOT 1
- Failing to store network HOT 2
- AutoConnect not longer runningh on ESP8266 HOT 2
- Use Autoconnect library with ESP now HOT 1
- Issue after updating libraries in my PIO project: enableCors() HOT 2
- Strange Issue
- WiFiClientSecure is not working with AutoConnect HOT 1
- how to use esp8266 with WiFiClientSecure
- AutoConnectPageImpl.hpp:1001:20: error: there are no arguments to 'spi_flash_get_chip_size' that depend on a template parameter, so a declaration of 'spi_flash_get_chip_size' must be available [-fpermissive] HOT 2
- Save data from Custom Page to flash HOT 2
- esp32: frozen loop() and kicked out of the WiFi connection at Configure new AP
- WPA2 Enterprise support
- Captive portal cause watchdog triggering
- Possibility to change pass for SoftAP from webui.
- Fresh Install and even the simplest of code will not compile HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autoconnect.