feat: load image by dragging it into viewport

1 files changed, 21 insertions, 0 deletions

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);