improve preview and paste/file interop

1 files changed, 44 insertions, 28 deletions

diff --git a/template.html b/template.html
index c780b4b..c7a0649 100644
--- a/template.html
+++ b/template.html
@@ -15,7 +15,7 @@
       --primary: #2da44e;
       --primary-hover: #2c974b;
       --danger: #cf222e;
-      --radius: 6px;
+      --radius: 3px;
     }
 
     * {
@@ -47,6 +47,14 @@
       font-weight: 500;
     }
 
+    .flex {
+      display: flex;
+    }
+
+    .flex-1 {
+      flex:1;
+    }
+
     .card {
       background: var(--card-bg);
       border: 1px solid var(--border);
@@ -104,6 +112,7 @@
       border-radius: var(--radius);
       font-weight: 600;
       cursor: pointer;
+      width: 100%;
     }
 
     input[type="submit"]:hover {
@@ -112,6 +121,7 @@
 
     /* Preview card */
     #preview-container {
+      display: none;
       background: var(--card-bg);
       border: 1px solid var(--border);
       border-radius: var(--radius);
@@ -158,27 +168,25 @@
 
         <fieldset>
           <legend>File Upload</legend>
-          <input type="file" name="file" />
-          <div class="hint">You can also paste an image directly</div>
-          <label>
-            Mime-Type:
-            <input type="text" name="file_mimetype" value="auto" />
-          </label>
-        </fieldset>
-
-        <fieldset>
-          <legend>Submit</legend>
-          <div class="submit-row">
-            <input type="submit" value="Post" />
+          <div class="flex">
+            <div class="flex-1">
+              <input type="file" name="file" />
+              <div>
+                <label>
+                  Mime-Type:
+                  <input type="text" name="file_mimetype" value="auto" />
+                </label>
+              </div>
+            </div>
+            <div class="flex-1" id="preview-container">
+              <h2>Image Preview</h2>
+              <img id="preview" />
+              <div class="hint" id="preview-hint">You can also paste an image directly and preview it.</div>
+            </div>
           </div>
         </fieldset>
+        <input type="submit" value="Post" />
       </form>
-
-      <div id="preview-container">
-        <h2>Image Preview</h2>
-        <img id="preview" />
-        <div class="hint" id="preview-hint">Paste an image to preview it</div>
-      </div>
       {{end}}
 
       {{if .TextLink }}
@@ -202,36 +210,44 @@
   <script>
     const pasteArea = document.body;
     const preview = document.getElementById("preview");
+    const previewContainer = document.getElementById("preview-container");
     const previewHint = document.getElementById("preview-hint");
     const form = document.querySelector("form");
+    const fileInput = form.querySelector('input[type="file"]');
 
     let pastedFile = null;
-
+    const setPreview = () => {
+      const enabled = (pastedFile !== null);
+      preview.src = enabled ? URL.createObjectURL(pastedFile) : '';
+      preview.style.display = enabled ? "block" : "none";
+      previewHint.style.display = enabled ? "none" : "block";
+    };
+    fileInput.addEventListener("change", function() {
+      if (this.files.length === 1) {
+        pastedFile = null;
+        setPreview();
+      }
+    });
     pasteArea.addEventListener("paste", (event) => {
       const items = event.clipboardData.items;
-
       for (const item of items) {
         if (item.type.startsWith("image/")) {
           pastedFile = item.getAsFile();
-
-          preview.src = URL.createObjectURL(pastedFile);
-          preview.style.display = "block";
-          previewHint.style.display = "none";
-
+          setPreview();
+          fileInput.value = '';
           event.preventDefault();
           break;
         }
       }
     });
-
     form.addEventListener("submit", () => {
       if (pastedFile) {
-        const fileInput = form.querySelector('input[type="file"]');
         const dt = new DataTransfer();
         dt.items.add(pastedFile);
         fileInput.files = dt.files;
       }
     });
+    previewContainer.style.display = 'block';
   </script>
   {{ end }}
 </body>