From f741e2dfafb67742cba2ed332364c6aa84328820 Mon Sep 17 00:00:00 2001
From: turtlebasket <turtlebasket@gmail.com>
Date: Wed, 12 Oct 2022 11:40:52 -0700
Subject: [PATCH] image previews

---
 templates/index.jinja2 | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/templates/index.jinja2 b/templates/index.jinja2
index 50e6b8b..c96de17 100644
--- a/templates/index.jinja2
+++ b/templates/index.jinja2
@@ -2,7 +2,11 @@
 {% block content %} 
 <form action="/ratio_pyro" method="POST" enctype="multipart/form-data">
     <h2>Simple Ratio Pyrometry Interface</h2>
-    <input type="file" name="file" accept=".png,.jpg,.jpeg" value="Choose Image"/>
+
+    <img src="#" id="img-preview" type="file"/>
+    <br>
+
+    <input id="img-upload" type="file" name="file" accept=".png,.jpg,.jpeg" value="Choose Image"/>
 
     <h4>Camera Settings</h4>
 
@@ -35,4 +39,24 @@
     <br>
     <input type="submit" value="Generate Heatmap"/>
 </form>
+
+<script>
+let imgPreview = document.getElementById('img-preview');
+let imgUpload = document.getElementById('img-upload');
+imgUpload.onchange = event => {
+    console.log("hi")
+    const [file] = imgUpload.files;
+    if (file) {
+        console.log(file)
+        imgPreview.src = URL.createObjectURL(file);
+    }
+};
+</script>
+
+<style>
+#img-preview {
+    width: 18rem;
+}
+</style>
+
 {% endblock %}