Squashing all body parser commits to have a reasonable history.

Parsers for both multipart and form-encoded form POST handlers implemented.

The API is geared towards handling file uploads and other large data items, and require the fields to be handled sequentially.

An example program that allows uploading, downloading and editing (for text files) is supplied.

Author: jackjansen

.gitignore

@@ -66,4 +66,7 @@ cert.h
 private_key.h
 
 # Do not push VS Code project files
-.vscode
+.vscode
+
+# Ignore platformio work directory
+.pio

examples/HTML-Forms/HTML-Forms.ino

@@ -27,11 +27,27 @@
 // We will use wifi
 #include <WiFi.h>
 
+// We will use SPIFFS and FS
+#include <SPIFFS.h>
+#include <FS.h>
+
 // Includes for the server
 #include <HTTPSServer.hpp>
 #include <SSLCert.hpp>
 #include <HTTPRequest.hpp>
 #include <HTTPResponse.hpp>
+#include <HTTPBodyParser.hpp>
+#include <HTTPMultipartBodyParser.hpp>
+#include <HTTPURLEncodedBodyParser.hpp>
+
+// We need to specify some content-type mapping, so the resources get delivered with the
+// right content type and are displayed correctly in the browser
+char contentTypes[][2][32] = {
+  {".txt", "text/plain"},
+  {".png",  "image/png"},
+  {".jpg",  "image/jpg"},
+  {"", ""}
+};
 
 // The HTTPS Server comes in a separate namespace. For easier use, include it here.
 using namespace httpsserver;
@@ -51,13 +67,34 @@ HTTPSServer secureServer = HTTPSServer(&cert);
 // which are pointers to the request data (read request body, headers, ...) and
 // to the response data (write response, set status code, ...)
 void handleRoot(HTTPRequest * req, HTTPResponse * res);
-void handleForm(HTTPRequest * req, HTTPResponse * res);
+void handleFormUpload(HTTPRequest * req, HTTPResponse * res);
+void handleFormEdit(HTTPRequest * req, HTTPResponse * res);
+void handleFile(HTTPRequest * req, HTTPResponse * res);
+void handleDirectory(HTTPRequest * req, HTTPResponse * res);
 void handle404(HTTPRequest * req, HTTPResponse * res);
 
+std::string htmlEncode(std::string data) {
+  // Quick and dirty: doesn't handle control chars and such.
+  const char *p = data.c_str();
+  std::string rv = "";
+  while(p && *p) {
+    char escapeChar = *p++;
+    switch(escapeChar) {
+      case '&': rv += "&amp;"; break;
+      case '<': rv += "&lt;"; break;
+      case '>': rv += "&gt;"; break;
+      case '"': rv += "&quot;"; break;
+      case '\'': rv += "&#x27;"; break;
+      case '/': rv += "&#x2F;"; break;
+      default: rv += escapeChar; break;
+    }
+  }
+  return rv;
+}
+
 void setup() {
   // For logging
   Serial.begin(115200);
-
   // Connect to WiFi
   Serial.println("Setting up WiFi");
   WiFi.begin(WIFI_SSID, WIFI_PSK);
@@ -68,17 +105,28 @@ void setup() {
   Serial.print("Connected. IP=");
   Serial.println(WiFi.localIP());
 
+  // Setup filesystem
+  if (!SPIFFS.begin(true)) Serial.println("Mounting SPIFFS failed");
+
   // For every resource available on the server, we need to create a ResourceNode
   // The ResourceNode links URL and HTTP method to a handler function
   ResourceNode * nodeRoot = new ResourceNode("/", "GET", &handleRoot);
-  ResourceNode * nodeForm = new ResourceNode("/", "POST", &handleForm);
+  ResourceNode * nodeFormUpload = new ResourceNode("/upload", "POST", &handleFormUpload);
+  ResourceNode * nodeFormEdit = new ResourceNode("/edit", "GET", &handleFormEdit);
+  ResourceNode * nodeFormEditDone = new ResourceNode("/edit", "POST", &handleFormEdit);
+  ResourceNode * nodeDirectory = new ResourceNode("/public", "GET", &handleDirectory);
+  ResourceNode * nodeFile = new ResourceNode("/public/*", "GET", &handleFile);
 
 	// 404 node has no URL as it is used for all requests that don't match anything else
   ResourceNode * node404  = new ResourceNode("", "GET", &handle404);
 
   // Add the root nodes to the server
   secureServer.registerNode(nodeRoot);
-  secureServer.registerNode(nodeForm);
+  secureServer.registerNode(nodeFormUpload);
+  secureServer.registerNode(nodeFormEdit);
+  secureServer.registerNode(nodeFormEditDone);
+  secureServer.registerNode(nodeDirectory);
+  secureServer.registerNode(nodeFile);
 
   // Add the 404 not found node to the server.
   // The path is ignored for the default node.
@@ -108,73 +156,200 @@ void handleRoot(HTTPRequest * req, HTTPResponse * res) {
 	// you would write to Serial etc.
 	res->println("<!DOCTYPE html>");
 	res->println("<html>");
-	res->println("<head><title>Hello World!</title></head>");
+	res->println("<head><title>Very simple file server</title></head>");
 	res->println("<body>");
-	res->println("<h1>HTML Forms</h1>");
-	res->println("<p>This page contains some forms to show you how form data can be evaluated on server side.");
-
-	// The following forms will all use the same target (/ - the server's root directory) and POST method, so
-	// the data will go to the request body. They differ on the value of the enctype though.
-
-	// enctype=x-www-form-urlencoded
-	// means that the parameters of form elements will be encoded like they would
-	// be encoded if you would use GET as method and append them to the URL (just after a ? at the end of the
-	// resource path). Different fields are separated by an &-character. Special characters have a specific encoding
-	// using the %-character, so for example %20 is the representation of a space.
-	// The body could look like this:
-	//
-	// foo=bar&bat=baz
-	//
-	// Where foo and bat are the variables and bar and baz the values.
-	//
-	// Advantages:
-	// - Low overhead
-	// Disadvantages:
-	// - May be hard to read for humans
-	// - Cannot be used for inputs with type=file (you will only get the filename, not the content)
-	res->println("<form method=\"POST\" action=\"/\" enctype=\"x-www-form-urlencoded\">");
-	res->println("<h2>enctype=x-www-form-urlencoded</h2>");
-	res->println("</form>")
-
-	// enctype=multipart/form-data
-	//
-	// TODO: Explanatory text
-	//
-	// Advantages:
-	// - Even longer text stays somewhat human readable
-	// - Can be used for files and binary data
-	// Disadvantages:
-	// - Big overhead if used for some small string values
-	res->println("<form method=\"POST\" action=\"/\" enctype=\"multipart/form-data\">");
-	res->println("<h2>enctype=multipart/form-data</h2>");
-	res->println("</form>")
-
+	res->println("<h1>Very simple file server</h1>");
+	res->println("<p>This is a very simple file server to demonstrate the use of POST forms. </p>");
+	res->println("<h2>List existing files</h2>");
+	res->println("<p>See <a href=\"/public\">/public</a> to list existing files and retrieve or edit them.</p>");
+	res->println("<h2>Upload new file</h2>");
+	res->println("<p>This form allows you to upload files (text, jpg and png supported best). It demonstrates multipart/form-data.</p>");
+	res->println("<form method=\"POST\" action=\"/upload\" enctype=\"multipart/form-data\">");
+	res->println("file: <input type=\"file\" name=\"file\"><br>");
+	res->println("<input type=\"submit\" value=\"Upload\">");
+	res->println("</form>");
 	res->println("</body>");
 	res->println("</html>");
 }
 
-void handleForm(HTTPRequest * req, HTTPResponse * res) {
+void handleFormUpload(HTTPRequest * req, HTTPResponse * res) {
 	// First, we need to check the encoding of the form that we have received.
 	// The browser will set the Content-Type request header, so we can use it for that purpose.
 	// Then we select the body parser based on the encoding.
-	// Note: This is only necessary if you expect various enctypes to be send to the same handler.
-	// If you would have only one form on your page with a fixed enctype, just instantiate the
-	// corresponding reader.
-
-	// TODO: Select Parser, instantiate it
-
-	// Now we iterate over the so-called fields of the BodyParser. This works in the same way for
-	// all body parsers.
-	// The interface is somewhat limited, so you cannot just call something like
-	// myParser.get("fieldname"), because this would require the parser to cache the whole request
-	// body. If you have your ESP32 attached to an external SD Card and you want to be able to upload
-	// files that are larger than the ESP's memory to that card, this would not work.
-	// This is why you iterate over the fields by using myParser.next() and check the name of the
-	// current field with myParser.getFieldName(), and then process it with a buffer.
-	// If you need random access to all fields' values, you need to parse them into a map or some similar
-	// data structure by yourself and make sure that all fits into the memory.
-
-	// TODO: Iterate over fields
+	// Actually we do this only for documentary purposes, we know the form is going
+	// to be multipart/form-data.
+	HTTPBodyParser *parser;
+	std::string contentType = req->getHeader("Content-Type");
+	size_t semicolonPos = contentType.find(";");
+	if (semicolonPos != std::string::npos) contentType = contentType.substr(0, semicolonPos);
+	if (contentType == "multipart/form-data") {
+		parser = new HTTPMultipartBodyParser(req);
+	} else {
+		Serial.printf("Unknown POST Content-Type: %s\n", contentType.c_str());
+		return;
+	}
+	// We iterate over the fields. Any field with a filename is uploaded
+	res->println("<html><head><title>File Upload</title></head><body><h1>File Upload</h1>");
+	bool didwrite = false;
+	while(parser->nextField()) {
+		std::string name = parser->getFieldName();
+		std::string filename = parser->getFieldFilename();
+		std::string mimeType = parser->getFieldMimeType();
+		Serial.printf("handleFormUpload: field name='%s', filename='%s', mimetype='%s'\n", name.c_str(), filename.c_str(), mimeType.c_str());
+		// Double check that it is what we expect
+		if (name != "file") {
+			Serial.println("Skipping unexpected field");
+			break;
+		}
+		// Should check file name validity and all that, but we skip that.
+		std::string pathname = "/public/" + filename;
+		File file = SPIFFS.open(pathname.c_str(), "w");
+		size_t fileLength = 0;
+		didwrite = true;
+		while (!parser->endOfField()) {
+			byte buf[512];
+			size_t readLength = parser->read(buf, 512);
+			file.write(buf, readLength);
+			fileLength += readLength;
+		}
+		file.close();
+		res->printf("<p>Saved %d bytes to %s</p>", (int)fileLength, pathname.c_str());
+	}
+	if (!didwrite) res->println("<p>Did not write any file</p>");
+	res->println("</body></html>");
+	delete parser;
+}
+
+void handleFormEdit(HTTPRequest * req, HTTPResponse * res) {
+  if (req->getMethod() == "GET") {
+	// Initial request. Get filename from request parameters and return form.
+	auto params = req->getParams();
+	std::string filename;
+	bool hasFilename = params->getQueryParameter("filename", filename);
+	std::string pathname = std::string("/public/") + filename;
+	res->println("<html><head><title>Edit File</title><head><body>");
+	File file = SPIFFS.open(pathname.c_str());
+	if (!hasFilename) {
+		res->println("<p>No filename specified.</p>");
+	} else
+	if (!file.available()) {
+		res->printf("<p>File not found: %s</p>\n", pathname.c_str());
+	} else {
+		res->printf("<h2>Edit content of %s</h2>\n", pathname.c_str());
+		res->println("<form method=\"POST\" enctype=\"application/x-www-form-urlencoded\">");
+		res->printf("<input name=\"filename\" type=\"hidden\" value=\"%s\">", filename.c_str());
+		res->print("<textarea name=\"content\" rows=\"24\" cols=\"80\">");
+		// Read the file and write it to the response
+		size_t length = 0;
+		do {
+			char buffer[256];
+			length = file.read((uint8_t *)buffer, 256);
+			std::string bufferString(buffer, length);
+			bufferString = htmlEncode(bufferString);
+			res->write((uint8_t *)bufferString.c_str(), bufferString.size());
+		} while (length > 0);
+		res->println("</textarea><br>");
+		res->println("<input type=\"submit\" value=\"Save\">");
+		res->println("</form>");
+	}
+	res->println("</body></html>");
+  } else {
+	// Assume POST request. Contains submitted data.
+	res->println("<html><head><title>File Edited</title><head><body><h1>File Edited</h1>");
+	HTTPURLEncodedBodyParser parser(req);
+	std::string filename;
+	bool savedFile = false;
+	while(parser.nextField()) {
+	  std::string name = parser.getFieldName();
+	  if (name == "filename") {
+		char buf[512];
+		size_t readLength = parser.read((byte *)buf, 512);
+		filename = std::string("/public/") + std::string(buf, readLength);
+	  } else
+	  if (name == "content") {
+		if (filename == "") {
+		  res->println("<p>Error: form contained content before filename.</p>");
+		  break;
+		}
+		size_t fieldLength = 0;
+		File file = SPIFFS.open(filename.c_str(), "w");
+		savedFile = true;
+		while (!parser.endOfField()) {
+		  byte buf[512];
+		  size_t readLength = parser.read(buf, 512);
+		  file.write(buf, readLength);
+		  fieldLength += readLength;
+		}
+		file.close();
+		res->printf("<p>Saved %d bytes to %s</p>", int(fieldLength), filename.c_str());
+	  } else {
+		res->printf("<p>Unexpected field %s</p>", name.c_str());
+	  }
+	}
+	if (!savedFile) res->println("<p>No file to save...</p>");
+	res->println("</body></html>");
+  }
+}
+
+void handleDirectory(HTTPRequest * req, HTTPResponse * res) {
+  res->println("<html><head><title>File Listing</title><head><body>");
+  File d = SPIFFS.open("/public");
+  if (!d.isDirectory()) {
+  	res->println("<p>No files found.</p>");
+  } else {
+	res->println("<h1>File Listing</h1>");
+	res->println("<ul>");
+	File f = d.openNextFile();
+	while (f) {
+	  std::string pathname(f.name());
+	  res->printf("<li><a href=\"%s\">%s</a>", pathname.c_str(), pathname.c_str());
+	  if (pathname.rfind(".txt") != std::string::npos) {
+		  std::string filename = pathname.substr(8); // Remove /public/
+		res->printf(" <a href=\"/edit?filename=%s\">[edit]</a>", filename.c_str());
+	  }
+	  res->println("</li>");
+	  f = d.openNextFile();
+	}
+	res->println("</ul>");
+  }
+  res->println("</body></html>");
+}
+
+void handleFile(HTTPRequest * req, HTTPResponse * res) {
+  std::string filename = req->getRequestString();
+  // Check if the file exists
+  if (!SPIFFS.exists(filename.c_str())) {
+    // Send "404 Not Found" as response, as the file doesn't seem to exist
+    res->setStatusCode(404);
+    res->setStatusText("Not found");
+    res->println("404 Not Found");
+    return;
+  }
+
+  File file = SPIFFS.open(filename.c_str());
+
+  // Set length
+  res->setHeader("Content-Length", httpsserver::intToString(file.size()));
+
+  // Content-Type is guessed using the definition of the contentTypes-table defined above
+  int cTypeIdx = 0;
+  do {
+    if(filename.rfind(contentTypes[cTypeIdx][0])!=std::string::npos) {
+      res->setHeader("Content-Type", contentTypes[cTypeIdx][1]);
+      break;
+    }
+    cTypeIdx+=1;
+  } while(strlen(contentTypes[cTypeIdx][0])>0);
+
+  // Read the file and write it to the response
+  uint8_t buffer[256];
+  size_t length = 0;
+  do {
+    length = file.read(buffer, 256);
+    res->write(buffer, length);
+  } while (length > 0);
+
+  file.close();
 }
 
 void handle404(HTTPRequest * req, HTTPResponse * res) {

examples/Static-Page/Static-Page.cpp

@@ -0,0 +1,3 @@
+#include <Arduino.h>
+#include "Static-Page.ino"
+