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>