add drag and drop for upload

DeqingSun · DeqingSun · commit a791f76dfeb0 · 2020-07-04T01:55:36.000-04:00
diff --git a/bootloaderWebtool/ch55xbl.js b/bootloaderWebtool/ch55xbl.js
@@ -376,13 +376,65 @@ function parseIntelHex(data, bufferSize) {
     throw new Error("Unexpected end of input: missing or invalid EOF record.");
 };
 
+function dropHandler(ev) {
+    console.log('File(s) dropped');
+
+    // Prevent default behavior (Prevent file from being opened)
+    ev.preventDefault();
+
+    hexFile = undefined;
+
+    if (ev.dataTransfer.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+            // If dropped items aren't files, reject them
+            if (ev.dataTransfer.items[i].kind === 'file') {
+                var file = ev.dataTransfer.items[i].getAsFile();
+                if (i == 0) {
+                    hexFile = file;
+                }
+            }
+        }
+    } else {
+        // Use DataTransfer interface to access the file(s)
+        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+            if (i == 0) {
+                hexFile = ev.dataTransfer.files[i];
+            }
+        }
+    }
+
+    if (hexFile) {
+        var reader = new FileReader();
+        // Closure to capture the file information.
+        reader.onload = (function (theFile) {
+            return function (e) {
+                var hexContent = e.target.result
+                uploadCH55xBootloader(parseIntelHex(hexContent, 63 * 1024).data)
+            };
+        })(file);
+        reader.readAsText(file);
+    }
+
+}
+
+function dragOverHandler(ev) {
+    //console.log('File(s) in drop zone'); 
+
+    // Prevent default behavior (Prevent file from being opened)
+    ev.preventDefault();
+}
 
 document.addEventListener('DOMContentLoaded', function () {
     let connectButton = document.querySelector('#connect');
     let uploadButton = document.querySelector('#upload');
+    let dropZoneDiv = document.querySelector('#drop_zone');
     statusDiv = document.querySelector('#status');
 
     connectButton.addEventListener('click', connectCH55xBootloader);
     uploadButton.addEventListener('click', pressUpload);
+    dropZoneDiv.addEventListener('drop', dropHandler, false);
+    dropZoneDiv.addEventListener('dragover', dragOverHandler, false)
+
     document.getElementById('fileid').addEventListener('change', handleFileSelect, false);
 }, false);
diff --git a/bootloaderWebtool/index.html b/bootloaderWebtool/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <title>ch55x bootloader tool</title>
     <script src="ch55xbl.js"></script>
-  </head>
-  <body>
+</head>
+
+<body>
     <p>
-      <button id="connect">Connect</button> <span id="status"></span>
+        <button id="connect">Connect</button> <span id="status"></span>
     </p>
     <p>
-      <button id="upload">Upload Hex</button> <input type='file' id="fileid" accept=".hex" hidden/>
-    </p>      
-  </body>
+        <button id="upload">Upload Hex</button>
+        <input type='file' id="fileid" accept=".hex" hidden/>
+    </p>
+    <div style="border: 1px dashed LightGrey;  width:  300px;  height: 100px;" id="drop_zone">
+        <p>Or Drag hex to this Drop Zone ...</p>
+    </div>
+</body>
+
 </html>
