I am using ESPAsyncWebServer Library in a ESP32 DevKit. I want to make a form in the browser in order to upload files in SPIFFS.
I have to notice that the whole device works perfectly. I connect to Wi-Fi, it uploads files via IDE etc.
Through searching in the net, I found this part of code that does not work.
server.on("/upload-file", HTTP_GET, [](AsyncWebServerRequest* request) {
String html = "<body><div><form method='post' action='/upload-file'><input type='file'><button>Send</button></form></div></body>";
request->send(200, "text/html", html);
});
server.on("/upload-file", HTTP_POST, [](AsyncWebServerRequest* request) {
AsyncWebServerResponse* response = request->beginResponse(200, "text/html", "hello world");
response->addHeader("Connection", "close");
request->send(response);
}, handleUpload);
server.onFileUpload(handleUpload);
The handleUpload function:
void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final){
if (!index) {
request->_tempFile = SPIFFS.open("/" + filename, "w");
}
if (len) {
request->_tempFile.write(data, len);
}
if (final) {
request->_tempFile.close();
request->redirect("/files");
}
}
It shows the form but the file doesn't upload. Is there any idea on how can I make it work?
1 Answer 1
I had the same problem and thanks to you, I did solve the problem!
Here is the full code, My html code for the upload page, the form is in the tag:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
</head>
<body>
<h1>File Upload Example</h1>
<form method="POST" action="/upload" enctype="multipart/form-data" target="iframe"><input type="file" name="upload"><input type="submit" value="Upload"></form>
<iframe style="visibility: hidden;" src="http://" )+local_IPstr+"/Usm" name="iframe"></iframe>
</body>
</html>
code for ESP:
void handleUpload(AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final){
if (!index) {
request->_tempFile = SPIFFS.open("/" + filename, "w");
Serial.println("1");
}
if (len) {
request->_tempFile.write(data, len);
Serial.println("2");
}
if (final) {
Serial.println("3");
request->_tempFile.close();
request->redirect("/");
}
}
controlserver.on("/upload", HTTP_POST, [](AsyncWebServerRequest *request) {
request->send(200); }, handleUpload);
controlserver.on("/UPL", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", upl);
});
readFile(SPIFFS, "/11.txt"); // show the content of the uploaded file, obviously you should know the name of the uploaded file!
you can write a function like this to make sure the file was delivered:
readFile(fs::FS &fs, const char * path){
Serial.printf("Reading file: %s\r\n", path);
File file = fs.open(path, "r");
if(!file || file.isDirectory()){
Serial.println("- empty file or failed to open file");
return String();
}
Serial.println("- read from file:");
String fileContent;
while(file.available()){
fileContent+=String((char)file.read());
}
file.close();
Serial.println(fileContent);
}
Serial.println("saw1")(and 2 and 3, etc) statements to each function to trace the flow. If it makes it all the way through, or in the last working part's code, start logging the function's arguments to see where things are not as expected.