From e1dd8faaa5a4ace2854a71c10695105a7e07cf49 Mon Sep 17 00:00:00 2001 From: Orangerot Date: Thu, 12 Dec 2024 02:47:17 +0100 Subject: feat: load image by dragging it into viewport --- index.html | 2 +- main.js | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 91f1ca5..892aa39 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-
+
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); -- cgit v1.2.3