2 files changed, 22 insertions, 1 deletions
diff --git a/index.html b/index.html
index 91f1ca5..892aa39 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
   </head>
   <body style="padding-top: 100dvh; " class="import-active">
     <div class="navbar columns is-mobile is-fixed-top">
-      <div class="column">
+      <div class="column" id="viewport">
         <div class="hero is-fullheight" style="min-height: 100dvh;">
           <div class="hero-body">
             <div class="container" >
diff --git a/main.js b/main.js
index 81e9f87..583d997 100644
--- a/main.js
+++ b/main.js
@@ -21,6 +21,8 @@ document.addEventListener("DOMContentLoaded", function() {
   document.getElementById("back").addEventListener("click", () => document.body.className = "import-active");
 
   // bind listeners
+  document.getElementById("viewport").addEventListener("drop", drop_handler);
+  document.getElementById("viewport").addEventListener("dragover", event => event.preventDefault());
   document.getElementById("take-picture").addEventListener("click", use_camera);
   document.getElementById("cheese").addEventListener("click", take_picture);
   document.getElementById("upload-image").addEventListener("change", upload_image)
@@ -101,6 +103,25 @@ function upload_image() {
   img.onload = () => draw(true);
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+function drop_handler(ev) {
+  ev.preventDefault();
+  let file;
+
+  if (ev.dataTransfer.items) {
+    const item = ev.dataTransfer.items[0];
+    if (item.kind !== "file") return;
+    file = item.getAsFile();
+  } else {
+    file = ev.dataTransfer.files[0];
+  }
+  console.log(file);
+
+  document.body.className = "editor-active";
+  img.src = URL.createObjectURL(file);
+  img.onload = () => draw(true);
+}
+
 function save_image(event) {
   event.preventDefault();
   draw(false);