Check hash of firmware

src/ElegantOTA.h

@@ -75,6 +75,7 @@ class ElegantOtaClass{
                         #endif
 					});
 
+					//TODO: handle MD5 paramter
                     _httpUpdater.setup(server, "/update");
 
                 }
@@ -123,6 +124,8 @@ class ElegantOtaClass{
                         if (!_server->authenticate(_username.c_str(), _password.c_str())) {
 						  return;
 						}
+						//TODO: handle MD5 paramter
+
                         // Perform upload
                         HTTPUpload& upload = _server->upload();
                         if (upload.status == UPLOAD_FILE_START) {
@@ -173,6 +176,8 @@ class ElegantOtaClass{
                         _server->send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
                         ESP.restart();
                     }, [&](){
+						//TODO: handle MD5 paramter
+
                         // Perform upload
                         HTTPUpload& upload = _server->upload();
                         if (upload.status == UPLOAD_FILE_START) {
@@ -233,4 +238,4 @@ class ElegantOtaClass{
 };
 
 ElegantOtaClass ElegantOTA;
-#endif
+#endif

ui/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "spark-md5": "^3.0.1",
     "spectre.css": "^0.5.8",
     "vue": "^2.6.11"
   },

ui/src/App.vue

@@ -142,13 +142,49 @@ export default {
   },
 
   methods: {
+    fileMD5(file) {
+      return new Promise((resolve, reject) => {
+        const blobSlice = File.prototype.slice
+          || File.prototype.mozSlice || File.prototype.webkitSlice;
+        const chunkSize = 2097152; // Read in chunks of 2MB
+        const chunks = Math.ceil(file.size / chunkSize);
+        const spark = new this.SparkMD5.ArrayBuffer();
+        const fileReader = new FileReader();
+        let currentChunk = 0;
+        let loadNext;
+
+        fileReader.onload = (e) => {
+          spark.append(e.target.result); // Append array buffer
+          currentChunk += 1;
+
+          if (currentChunk < chunks) {
+            loadNext();
+          } else {
+            const md5 = spark.end();
+            resolve(md5);
+          }
+        };
+
+        fileReader.onerror = (e) => {
+          reject(e);
+        };
+
+        loadNext = () => {
+          const start = currentChunk * chunkSize;
+          const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+
+          fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+        };
+
+        loadNext();
+      });
+    },
     uploadOTA(event) {
       this.uploading = true;
       const formData = new FormData();
-      if(event !== null){
-        this.file = event.target.files[0];
+      if (event !== null) {
+        [this.file] = event.target.files;
       }
-      formData.append(this.type, this.file, this.type);
       const request = new XMLHttpRequest();
 
       request.addEventListener('load', () => {
@@ -170,8 +206,19 @@ export default {
       });
 
       request.withCredentials = true;
-      request.open('post', '/update');
-      request.send(formData);
+
+      this.fileMD5(this.file)
+        .then((md5) => {
+          formData.append('MD5', md5);
+          formData.append(this.type, this.file, this.type);
+          request.open('post', '/update');
+          request.send(formData);
+        })
+        .catch(() => {
+          this.OTAError = 'Unknown error while upload, check the console for details.';
+          this.uploading = false;
+          this.progress = 0;
+        });
     },
 
     retryOTA() {

ui/src/main.js

@@ -1,7 +1,9 @@
+import SparkMD5 from 'spark-md5';
 import Vue from 'vue';
 import App from './App.vue';
 
 Vue.config.productionTip = false;
+Object.defineProperty(Vue.prototype, 'SparkMD5', { value: SparkMD5 });
 
 new Vue({
   render: (h) => h(App),