diff options
| author | Orangerot <purple@orangerot.dev> | 2024-12-12 02:47:17 +0100 |
|---|---|---|
| committer | Orangerot <purple@orangerot.dev> | 2024-12-12 02:47:17 +0100 |
| commit | e1dd8faaa5a4ace2854a71c10695105a7e07cf49 (patch) | |
| tree | 4befabe0a07e29aafad67c239bbf52c3f61f714e | |
| parent | f9b4d17140c708a1d853dff0555d0ccaf7c172fd (diff) | |
feat: load image by dragging it into viewport
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | main.js | 21 |
2 files changed, 22 insertions, 1 deletions
@@ -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" > @@ -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); |