Allow click-to-upload

index.html

@@ -45,6 +45,7 @@
         font-size: 3em;
         cursor: pointer;
       }
+
       .lisalappu:hover {
         background: #f0f0f0;
       }
@@ -57,6 +58,10 @@
         body {
           margin: unset;
         }
+
+        input {
+          display: none;
+        }
       }
 
       .lappu {
@@ -70,6 +75,7 @@
       }
 
       .lappu figure {
+        position: relative;
         user-select: none;
         width: 30%;
         aspect-ratio: 1/1;
@@ -78,6 +84,14 @@
         overflow: hidden;
       }
 
+      .lappu figure input {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+      }
+
       .lappu .username {
         font-size: 16px;
         font-weight: 400;
@@ -91,10 +105,7 @@
       }
     </style>
     <script>
-      const handleDrop = (e) => {
+      function handleImage(file, element) {
-        e.preventDefault();
-        const element = e.currentTarget;
-        const file = e.dataTransfer.files[0];
         if (file && file.type.startsWith("image/")) {
           const reader = new FileReader();
           reader.onload = (event) => {
@@ -106,6 +117,19 @@
         } else {
           alert("Please drop an image file.");
         }
+      }
+
+      function handleUpload(event) {
+        event.preventDefault();
+        const element = event.target.parentElement.querySelector("img");
+        handleImage(event.target.files[0], element);
+      }
+
+      const handleDrop = (e) => {
+        e.preventDefault();
+        const element = e.currentTarget;
+        const file = e.dataTransfer.files[0];
+        handleImage(file, element);
       };
 
       const handleDragOver = (e) => {
@@ -142,6 +166,7 @@
       <div class="lappu" ondblclick="handleYeet(event)">
         <div style="text-align: center">
           <figure>
+            <input type="file" onchange="handleUpload(event)" />
             <img
               src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg=="
               alt="Matti Meikäläinen"