Add feature to browse computer to upload an image file instead of drag and drop

index.html

@@ -140,6 +140,13 @@ <h2>JSON Points</h2>
                     </div>
                     <div class="image-container">
                         <canvas id="canvas"></canvas>
+                        <form enctype="multipart/form-data" id="upload-file">
+                            <label for="file">
+                                Or, select a file to upload: 
+                            </label>
+                            <input id="file" type="file" name="file" required/>
+                            <input type="submit" value="Upload" class="widgetButton"/>
+                        </form>
                     </div>
                 </div>
             </div>

script.js

@@ -48,6 +48,21 @@ function resetState() {
     document.querySelector('#python').innerHTML = '';
 }
 
+var input = document.querySelector('input[type="file"]');
+
+// if user presses L key, change draw mode to line and change cursor to cross hair
+document.addEventListener('keydown', function(e) {
+    if (e.key == 'l') {
+        drawMode = "line";
+        canvas.style.cursor = 'crosshair';
+        modeMessage.innerHTML = "Draw Mode: Line (press <kbd>P</kbd> to change to polygon drawing)";
+    }
+    if (e.key == 'p') {
+        drawMode = "polygon";
+        canvas.style.cursor = 'crosshair';
+        modeMessage.innerHTML = 'Draw Mode: Polygon (press <kbd>L</kbd> to change to line drawing). Press "enter" to complete polygon.';
+    }
+});
 
 var isFullscreen = false;
 var taskbarAndCanvas = document.querySelector('.right');
@@ -344,10 +359,10 @@ canvas.addEventListener('mousemove', function(e) {
     }
 });
 
+// moved the logic to add the image file to canvas in 'processAndDisplayImage'
 canvas.addEventListener('drop', function(e) {
     e.preventDefault();
     var file = e.dataTransfer.files[0];
-
     // only allow image files
     var supportedImageTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
     if (!supportedImageTypes.includes(file.type)) {
@@ -400,6 +415,13 @@ canvas.addEventListener('drop', function(e) {
     };
 });
 
+// function to process uploading image file through form instead of drag and drop
+document.querySelector("#upload-file").addEventListener('submit', (e) => {
+    e.preventDefault();
+    var file = input.files[0];
+    processAndDisplayImage(file);
+})
+
 function writePoints(parentPoints) {
     var normalized = [];
 
@@ -712,4 +734,40 @@ window.addEventListener('keydown', function(e) {
     if (e.key === 'f' || e.key === 'F') {
         toggleFullscreen();
     }
-})
+})
+
+
+// This function abstracts away the logic to read and verify the image file, allowing it to be used by both the
+// drop method, and the upload a file form method
+function processAndDisplayImage(file) {
+    var reader = new FileReader();
+
+    reader.onload = function(event) {
+        // only allow image files
+        img.src = event.target.result;
+    };
+    reader.readAsDataURL(file);
+
+    var mime_type = file.type;
+
+    if (
+        mime_type != 'image/png' &&
+        mime_type != 'image/jpeg' &&
+        mime_type != 'image/jpg'
+    ) {
+        alert('Only PNG, JPEG, and JPG files are allowed.');
+        return;
+    }
+
+    img.onload = function() {
+        scaleFactor = 0.25;
+        canvas.style.width = img.width * scaleFactor + 'px';
+        canvas.style.height = img.height * scaleFactor + 'px';
+        canvas.width = img.width;
+        canvas.height = img.height;
+        canvas.style.borderRadius = '10px';
+        ctx.drawImage(img, 0, 0);
+    };
+    // show coords
+    document.getElementById('coords').style.display = 'inline-block';
+}

styles.css

@@ -307,6 +307,16 @@ li {
     margin-top: 16px;
 }
 
+input::file-selector-button {
+    border-radius: 4px;
+    background-color: #7733f4;
+    box-shadow: 0 3px 3px 0 rgb(55 65 81 / 20%);
+    font-family: proxima-nova,sans-serif;
+    color: #fff;
+    font-weight: 700;
+    text-align: center;
+    letter-spacing: .5px;
+
 .mt-3 {
     margin-top: 24px;
-}
+  }