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