diff --git a/web/index.html b/web/index.html
index 6d9b9bf..a66b49c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,7 +6,10 @@
    </style>
   </head>
   <body>
-    <canvas id="pteropus-canvas"></canvas>
     <script type="module" src="pteropus-frame.js"></script>
+    <canvas id="pteropus-canvas"></canvas>
+    <div id="bottom-panel">
+      <input type="file" id="file-upload-file-input" name="filename" accept="image/tiff, .tif, .tiff">
+    </div>
   </body>
 </html>
diff --git a/web/pteropus-frame.js b/web/pteropus-frame.js
index bd5f593..e4bf11b 100644
--- a/web/pteropus-frame.js
+++ b/web/pteropus-frame.js
@@ -21,7 +21,15 @@ async function run() {
     const resizeObserver = new ResizeObserver((entries) => {
         needs_resize = true;
     });
-    resizeObserver.observe(mainCanvas)
+    resizeObserver.observe(mainCanvas);
+
+    let fileUploadButton = document.getElementById("file-upload-file-input");
+    fileUploadButton.addEventListener("change", () => {
+        const files = fileUploadButton.files;
+        if(files.length > 0) {
+            test_file_data = files[0]
+        }
+    });
 
     while(true)
     {
