diff options
| author | Daniel Schadt <kingdread@gmx.de> | 2020-02-19 02:43:25 +0100 |
|---|---|---|
| committer | Daniel Schadt <kingdread@gmx.de> | 2020-02-19 02:43:25 +0100 |
| commit | 9a0d1df756483fe865dbbf3b112f1e5158d8bd84 (patch) | |
| tree | f904f5c5f0a8865dfac188d77acc5f7986955d04 /src/index.html | |
| parent | 63b2ff187e290d8eafd39a902af56a88c6ab53e9 (diff) | |
| download | simghost-9a0d1df756483fe865dbbf3b112f1e5158d8bd84.tar.gz simghost-9a0d1df756483fe865dbbf3b112f1e5158d8bd84.tar.bz2 simghost-9a0d1df756483fe865dbbf3b112f1e5158d8bd84.zip | |
update HTML landing page
The original landing page was pretty bad, not just from the looks, but
also from the functionality: In order to paste an image, you had to have
the cursor focussed in the small div.
This edition brings several improvements:
* The general style of the page has been improved by adding some CSS
styling to adjust the colors and center the content.
* Pasting an image will not work everywhere on the page without
focussing a specific element. This seems to work because
document.onpaste fires every time, not just when the element is
focussed and it even works without contenteditable=true, which removes
the ugly blinking cursors.
* There is a preview window for pasted images, clearly indicating what
is going on and which image is going to be pasted.
* Pasting an image will now hide the file chooser.
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 40 |
1 files changed, 36 insertions, 4 deletions
diff --git a/src/index.html b/src/index.html index 97191f0..33fb9cb 100644 --- a/src/index.html +++ b/src/index.html @@ -1,33 +1,65 @@ <html> <head> <title>Simple Image Host</title> +<style type="text/css"> +body { + background-color: #fefefe; + color: #454545; + margin-left: auto; + margin-right: auto; + max-width: 1000px; +} + +img#previewimage { + max-width: 100%; +} +</style> </head> <body> + <h1>simghost</h1> + <p>Simple image hosting. <a href="https://github.com/Kingdread/simghost">Source Code</a> available.</p> + <hr> + <img style="display: none;" id="previewimage"> <form method="POST" enctype="multipart/form-data"> <input type="hidden" name="imagecontent"> <table> <tr><td colspan="2"><input type="file" name="imagefile"></td></tr> - <tr><td colspan="2"><div contenteditable="true" id="paster">Paste image</div></td></tr> <tr><td>Duration:</td><td><input type="number" name="duration" value="500"></td></tr> <tr><td>User:</td><td><input type="text" name="username"></td></tr> <tr><td>Password:</td><td><input type="password" name="password"></td></tr> <tr><td></td><td><input type="submit" value="Upload"></td></tr> </table> </form> + <hr> + <noscript> + Enable JavaScript to paste images directly. + </noscript> <script> - document.querySelector("#paster").onpaste = function(e) { + document.write("Press Crtl+V to directly paste an image."); + document.onpaste = function(e) { for (let item of e.clipboardData.items) { if (item.type.startsWith("image/")) { + console.log("Found pasted image:"); console.log(item); let data = document.querySelector("input[name=imagecontent]"); item.getAsFile().arrayBuffer().then((bytes) => { - data.value = btoa(String.fromCharCode(...new Uint8Array(bytes))); - console.log(bytes); + let baseEncoded = btoa(String.fromCharCode(...new Uint8Array(bytes))); + data.value = baseEncoded; + showPastedImage(item, baseEncoded); }); } } e.preventDefault(); }; + + function showPastedImage(item, data) { + let selector = document.querySelector("[name=imagefile]"); + selector.value = ""; + selector.style.display = "none"; + let previewer = document.querySelector("#previewimage"); + previewer.style.display = "inline"; + previewer.src = `data:${item.type};base64,${data}`; + } </script> </body> </html> |