From 17189d95aa59ef36b408cfab7c6610d6606b923b Mon Sep 17 00:00:00 2001
From: Tanay Rishi <Tanay.Rishi@fdmgroup.com>
Date: Mon, 24 Jun 2024 15:51:17 +0800
Subject: [PATCH] Add feature to browse computer to upload an image file
 instead of drag and drop

---
 index.html | 11 +++++++-
 script.js  | 82 ++++++++++++++++++++++++++++++++----------------------
 styles.css | 12 ++++++++
 3 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index 8e4e410..dc1cb1f 100644
--- a/index.html
+++ b/index.html
@@ -30,11 +30,20 @@
                     <h1>Draw points to create polygon coordinates</h1>
                     <p class="show_normalized" id="coords" style="display: none;">x: <span id="x"></span> | y: <span id="y"></span></p>
                     <canvas id="canvas"></canvas>
+                    <div style="margin-top: 20px;">
+                        <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 style="margin-top: 20px;">
                         <a href="" id="clear" class="widgetButton">Clear Polygons</a>
                         <a href="" id="saveImage" class="widgetButton">Save Image</a>
                         <br>
-                        <p id="mode">Mode: Polygon (Press <kbd>L</kbd> to switch to Line drawing mode)</p>
+                        <p id="mode">Mode: Polygon (Press <kbd>L</kbd> to switch to Line drawing mode). Press "enter" to complete polygon.</p>
                     </div>
                 </div>
                 <div class="right">
diff --git a/script.js b/script.js
index aa69671..3fbdbf6 100644
--- a/script.js
+++ b/script.js
@@ -32,17 +32,19 @@ var drawMode = "polygon";
 var modeMessage = document.querySelector('#mode');
 var coords = document.querySelector('#coords');
 
+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)";
+        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)';
+        modeMessage.innerHTML = 'Draw Mode: Polygon (press <kbd>L</kbd> to change to line drawing). Press "enter" to complete polygon.';
     }
 });
 
@@ -272,41 +274,20 @@ window.addEventListener('keydown', 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];
-    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';
+    processAndDisplayImage(file);
 });
 
+// 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 = [];
 
@@ -402,4 +383,39 @@ document.querySelector('#normalize_checkbox').addEventListener('change', functio
     parentPoints.push(points);
 
     writePoints(parentPoints);
-});
\ No newline at end of file
+});
+
+// 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';
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 06f43bc..73b787c 100644
--- a/styles.css
+++ b/styles.css
@@ -167,3 +167,15 @@ pre {
 footer {
     margin-top: 20px;
 }
+
+
+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;
+}
\ No newline at end of file